---
# System prepended metadata
title: 12. 後台管理 - 功能性為導向的介面規劃
tags: [Bootstrap5網頁切版整合術]
---
---
tags: Bootstrap5網頁切版整合術
---
# 12. 後台管理 - 功能性為導向的介面規劃
## 後台管理章節說明
後台管理的功能較多，主要會由內部人員或特定人員來操作，所以不一定要符合rwd
## 結構規劃
1. 桌機版左側選單為開啟，行動版為收合，右側上``標籤按鈕，可展開收合左側的sidebar選單
2. 左側選單縮小視窗時或空間不足時，選單內容會加上垂直卷軸滾動
3. 右側.main依瀏覽器剩餘寬度
### 建立結構
1. 新增資料夾components>_sidebar.scss，在all.scss匯入
2. 左側定義變數`$sidebar-width: 280px;`
3. 右側.main的寬度用calc來計算，
這裡變數會被視為字串，所以要再加上`#{}`才能運算
4. 右側上方按鈕: ``設定.d-inline-block就不會占滿整個空間 ; 在bs icon搜尋expand，加入icon
```html
```
```css
$sidebar-width: 280px;
.sidebar{
width: $sidebar-width;
}
.main{
width: calc(100vw - #{$sidebar-width});
}
```
## 可收合側欄選單sidebar :star: :star: :star:
**_sidebar.scss:**
1. 先前套用up的中斷點都是使用class方式套用，這裡用scss方式，文件>排版>斷點，找到最小寬度`media-breakpoint-up(lg)`，lg以上尺寸才會套用。
2. 複製語法media-breakpoint-up(lg){}，將剛才建立的結構，內容移到裡面
3. 行動版(預設):
(1)sidebar寬為 sidebar-width;
margin-left: -$sidebar-width; 用負值將選單位移到畫面外，位移速度建議快一點;
(2)main為滿寬100%
4. 桌機版: sidebar寬為$sidebar-width，因受到行動版margin-left負值影響，需要再將sidebar移回來，所以要設定margin-left:0;
```_sidebar.scss
$sidebar-width: 280px;
//行動版(預設)
.sidebar{
width: $sidebar-width;
margin-left: -$sidebar-width;
transition: margin-left .25s;
}
.main{
width: 100%;
}
//桌機版(up)
@include media-breakpoint-up(lg) {
.sidebar{
margin-left: 0;
width: $sidebar-width;
}
.main {
width: calc(100vw - #{$sidebar-width});
}
}
```
這裡實作時一直出現編譯錯誤"找不到這個mixin"，原來是 @import順序 出錯了，自訂的要放在後面
```css
@import "./node_modules/bootstrap/scss/functions";
@import "./node_modules/bootstrap/scss/bootstrap";
@import "./helpers/variables";
@import "./components/sidebar";
```
### 選單收合:
-在這裡先把樣式寫好，下一節會用js，點擊按鈕後在body加入或移除.sidebar-toggled
-測試的時候可以先用開發者工具，手動在body加上.sidebar-toggled
1. 新增class名稱為.sidebar-toggled 作為展開sidebar用
2. 行動版 將選單移回來(按下按鈕後)
```css
.sidebar-toggled{
.sidebar{
margin-left:0;
}
}
```
3. 桌機版 選單往外移(按下按鈕後)
```css
.sidebar-toggled {
.sidebar {
margin-left: -$sidebar-width;
}
.main{
width: 100%;
margin-left: 0;
}
}
```
### JS效果 點擊按鈕展開收合選單
1. 在``加上id="toggle-btn"，js選取用
2. 新增javascripts資料夾，新增all.js檔，再到html body結尾之前匯入
3. 點擊``標籤切換樣式.sidebar-toggled
(這裡不懂js沒關係先略過)
## 側欄選單內容
sidebar: 縮小視窗時或空間不足時，選單會加上垂直卷軸滾動
1. 先將sidebar選單加上.d-flex.flex-column方向垂直
2. 內層分為後台名稱、選單、登出按鈕三個結構，
登出按鈕加上.mt-auto把按鈕推到最下面，
中間選單內容加上.overflow-auto
3. 在_sidebar.scss新增.sidebar-link、.sidebar-link.active的設定
首頁按鈕加上.sidebar-link.active
登出按鈕加上.sidebar-link
4. 選單
5. 選單下拉內容加上.collapse、加上id="menu-order"
6. 到文件>摺疊>在要折疊的外層``標籤加上.data-bs-toggle="collapse" ，href="#menu-order"連結到要收合的內容
## 版型整理、固定左側選單、固定上方導覽列
1. 版型整理:
將index.html改名為layout.html，這基本的版型其他頁面也會用到，所以拉出layout來管理共用的版型 (後端會使用template language、前端用vue或react)
2. 固定左側選單:
.sidebar寫position: fixed; top:0; 固定在左側
.main要再位移回來
手機版:展開sidebar要加入margin-left:$sidebar-width;
按鈕就不會被擋住
3. 固定上方導覽列:
在導覽列加上.sticky-top，滾動內容時，選單會在內容的上方
## 卡片區塊結構+動態圖表範例程式碼
1. 將layout.html另存為home.html
2. 到_variables調整圓角
* bordre-radius 會調整到所有的圓角，這裡不需要調整全部
* 可新增變數或調整bordre-radius-lg:0.75rem;//.3rem!default
* 卡片圓角也要修改 $card-border-radius: $border-radius-lg;
官方變數檔裡面有新增xl、2xl、pill
3. 建立三欄卡片.row>col*3>.card>.card-body
4. 建立二欄卡片 左col-4 右col
* 左邊已設定col-4所以右邊可以寫col就好
* `