---
tags: Bootstrap5網頁切版整合術
---
# 3. Flex 與網格系統介紹 2-1
## 1. 基礎格線觀念
<!--這裡在看下影片-->
1. BS5預設包含12欄
2. 除了預設欄以外，也可使用等比欄位劃分
3. 包含五種預設的Gutter寬度
4. 提供欄列的組合型式


5. 以繪圖軟體來看total width960px包含gutter on outside(gutter的一半)
* gutter on outside讓內容避免過於緊貼視窗邊緣


<br>

## 2. 繪圖軟體與格線之間的關聯性
1. 點格線，選擇frame尺寸


2. 點畫布→ layout grid→ 展開後設定column


3. 所有內容都會壓在欄線上，<del>不會壓在gutter上</del>


4. bs5裡有一個.container容器為固定寬度，包含gutter on outside


5. 可改變gutter寬度，產生一個較小寬度的gutter，整體容器寬度不變


6. bs5的.conatiner有分兩種:
* 限制類型寬度的.container，範例為960


* 流體類型的.container，範例為貼齊總寬度1140，類型改streth、margin10、gutter20，width:auto會依不同瀏覽器寬度做縮放


<br>

## 3. 響應式中斷點
1. 特定中斷點以上，例d-xl-none 就是在寬度1200px以上隱藏


2. bs以行動優先的中斷點設計，技巧:先思考行動版，再補桌面版


    <div class="box d-none d-xl-block"></div>

    <div class="demo text-center text-lg-start">
      <p>Lorem ipsum dolor sit amet consectetur delectus... </p>
    </div>

<br>

## 4. 格線容器container
1. bs的container class主要用來定義最外層的容器，分為滿版寬度、階段固定寬度

2. 如果網頁內容不需要嚴謹的定義最大寬度，可使用.container-fluid
若對網頁內容寬度的階段美感都很要求且需要最大寬度的限制，可使用.container或是.container-{breakpoint}




<br>

## 5. 欄：上篇

col-auto依內容調整寬度


巢狀:在加上一層row,col


<br>

## 6. 欄：下篇
col有其他中斷點時，可不加入col-12


offset推移，設定1推移一個col，較少使用


<small>來源:六角學院-Bootstrap5網頁切版整合術</small>