---
tags: Bootstrap5網頁切版整合術
---
# 12. 後台管理 - 功能性為導向的介面規劃

## 後台管理章節說明
後台管理的功能較多，主要會由內部人員或特定人員來操作，所以不一定要符合rwd

## 結構規劃
1. 桌機版左側選單為開啟，行動版為收合，右側上`<a>`標籤按鈕，可展開收合左側的sidebar選單

2. 左側選單縮小視窗時或空間不足時，選單內容會加上垂直卷軸滾動

3. 右側.main依瀏覽器剩餘寬度

### 建立結構
1. 新增資料夾components>_sidebar.scss，在all.scss匯入
2. 左側定義變數`$sidebar-width: 280px;`
3. 右側.main的寬度用calc來計算，
這裡變數會被視為字串，所以要再加上`#{}`才能運算
4. 右側上方按鈕: `<a>`設定.d-inline-block就不會占滿整個空間 ; 在bs icon搜尋expand，加入icon

<div class="d-flex">
    <aside class="sidebar vh-100 border-end">
    </aside>
    <main class="main">
        <div class="bg-white border-bottom w-100">
            <a href="#" class="py-3 px-4 d-inline-block border-end">
                <i class="bi bi-arrows-angle-expand"></i>
            </a>
        </div>
    </main>
</div>

$sidebar-width: 280px;

.sidebar{
    width: $sidebar-width;
}

.main{
    width: calc(100vw - #{$sidebar-width});
}

## 可收合側欄選單sidebar <small>:star: :star: :star:</small>

**_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-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});
     }
}

<small>這裡實作時一直出現編譯錯誤"找不到這個mixin"，原來是 @import順序 出錯了，自訂的要放在後面

    @import "./node_modules/bootstrap/scss/functions";
    @import "./node_modules/bootstrap/scss/bootstrap";
    @import "./helpers/variables";
    @import "./components/sidebar";

</small>

### 選單收合:

<small>-在這裡先把樣式寫好，下一節會用js，點擊按鈕後在body加入或移除.sidebar-toggled
-測試的時候可以先用開發者工具，手動在body加上.sidebar-toggled
</small>

1. 新增class名稱為.sidebar-toggled 作為展開sidebar用

2. 行動版 將選單移回來(按下按鈕後)

    .sidebar-toggled{
        .sidebar{
            margin-left:0;        
        }
    }

3. 桌機版 選單往外移(按下按鈕後)

    .sidebar-toggled {
         .sidebar {
              margin-left: -$sidebar-width;
         }
         .main{
              width: 100%;   
              margin-left: 0;   
          }
        }

### JS效果 點擊按鈕展開收合選單
1. 在`<a>`加上id="toggle-btn"，js選取用
2. 新增javascripts資料夾，新增all.js檔，再到html body結尾之前匯入
3. 點擊`<a>`標籤切換樣式.sidebar-toggled
<small>(這裡不懂js沒關係先略過)</small>

## 側欄選單內容

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. 到文件>摺疊>在要折疊的外層`<a>`標籤加上.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;

<small>官方變數檔裡面有新增xl、2xl、pill</small>

3. 建立三欄卡片.row>col*3>.card>.card-body

4. 建立二欄卡片 左col-4 右col

* 左邊已設定col-4所以右邊可以寫col就好
* `<canvas>`跟`<img>`很像，要再加入.img-fluid，才不會拉動後掉到下一排
* 把canvas的程式碼貼在main裡面
* 將兩個卡片設定等高h-100


## 表格運用
* 這裡使用.card搭配.card-header、.card-body'、card-footer
1. card-header:
input搭配.form-control，再用.shadow-none.border-0 把hover:foucs的陰影框線拿掉

2. card-body:
* 將表格加入響應式.table-responsive.table-hover
* .thead內距加大，.py-3加在訂單編號就可以，再到tr加上.align-middle就可以全部垂直對齊

* 在tbody加上.text-nowrap避免文字換行，行動版表格可左右滾動



3. card-footer:
* 到元件>分頁，複製程式碼貼進來

## 訂單管理介面

## 傳遞內容至 Modal 內

## 單一產品頁面製作

## Sticky 與 scroll spy 的混合運用

## 作業製作