---
# System prepended metadata
title: Bootstrap 5 格線系統
---
# Bootstrap 5 格線系統
## 格線系統 - 減輕 magic number 出現
* 格線系統的組成：column(欄)、gutter(間距，可以是margin或padding)
* [960 grid，以前解析度都是 1024](https://960.gs/demo.html)
12個column(欄)11個gutter(間距)，因為12這個數字是可以被2.3.4.6整除，即一列兩欄，一列三欄，一列四欄等，其gutter以margin下去推
* [BS4 layoutit](https://www.layoutit.com/build)
其gutter以padding下去推
> 常見總欄數是 12
## [BS5 格線系統](https://bootstrap5.hexschool.com/docs/5.0/layout/grid/)原理
* 排版三劍客： .container、.row、.col 1~12
* .container
* .container 固定寬度
* .container-fluid 滿版
* .row
* no-gutters：不需要 gutters
* 名言 1：.col- 的外層只能是 .row
* 名言 2：.row 裡面第一層只能是 .col-(就像ul裡面第一層只能是li，tr裡面第一層只能是td)
* 名言 3：網頁內容與元件請放在 .col- 裡面
>正確範例
```htmlmixed=
```
>錯誤範例(row下面第一層只能是col，h2部分就錯了)
```htmlmixed=
```
即不是我們想要的效果，標題和左邊選單沒有在同一列裡呈現
>若col放超過12，會往下排
```htmlmixed=
```
因為row本身也是應用[flex](https://courses.hexschool.com/courses/html/lectures/14727004)的效果去做出來的
flex-wrap:wrap即內容變多時，會往下疊，變到下一行去
>錯誤範例(多一層，因 row裡面第一層只能是col)
```htmlmixed=
```
因row是`display:flex`，裡面第一層的div就會變成一個
而`標題
`即變成一般的div，沒有flex效果，會從上到下排列下來。
> 常見錯誤，在 .col 增加寬度
因col已給width的限制，如上圖col-6即定義width:50%，不需要再給一次寬度限制
> 常見錯誤，在格線系統調整左右 margin 與 padding
>
因兩個col-6加起來就是100%，再加`margin-right: 30px;`就超過了，故會往下排
bs5已有padding的設定
> 常見觀念：可以加上下 的 margin 與 padding
bs5使用`box-sizeing:border-box`將border往內推，故不會影響的整體高度(每日任務)
> 常見觀念：最外層至少補一個 container
row外層沒有container，就會是滿版，依照瀏覽器去延伸
container是個容器，即內容會呈現水平居中
正確範例(row的外層不一定是container)
```htmlmixed=
```
只寫col,會自適應寬度，依比例分配併排在一起(因其使用flex的縮寫語法1:1)
```htmlmixed=
```
從上至下排版(col-12)
```htmlmixed=
```
正確範例(container裡面第一層容器不一定要是row，因可能為滿版設計，不一定要符合格線系統)
```htmlmixed=
```
正確範例(設計header和footer為滿版)
```htmlmixed=
```
> 常見觀念：整體格線邏輯是一致
預留空間給版型，以保有比較多的彈性
ex.若字數增加，不會跑版
## BS5 格線斷點設計
* [文件位置](https://bootstrap5.hexschool.com/docs/5.0/layout/grid/#grid-options)
* 手機sm，平版md.lg
* boostrap 5 預設為手機優先(col-4、col-8即在設定手機以上的版型)，col-md-4、col-md-8才是設定平版以上版型
* [範例處](https://codepen.io/hexschool/pen/OJpXqVj?editors=1100)
> 若想做網站會先做 PC 版，可用 md(ipad size)、lg(tab和pc之間) 當起手式
先看權重，再看順序(後面覆蓋前面)
可同時寫四至五個class的設定，去斷點
通常寫三個設定即可，因若此三個設定的條件不滿足，就會變成手機版，通常寫md.lg，很少寫sm和xl
## 格線系統與元件整合
* 容器可以放很多元件，例如鉛筆盒就是容器，橡皮擦、筆就是元件
* 容器和元件的樣式分開設計，元件效果亦可分顏色、大小等樣式分開設定
```htmlmixed=
.btn{
width: 50px;
display: inline-block;
height: 400px;
padding: 2px;
}
.btn-primary{
background: blue;
}
.btn-lg{
padding: 20px;
}
```
* [範例處](https://codepen.io/liao/pen/abvaXyy?editors=1100)
## 網站範例 + 通用類別搭配
通用類別補足容器或元件的細節，亦有設定斷點的功能
d-md-none：即display:none，平版(768)以上[隱藏](https://bootstrap5.hexschool.com/docs/5.0/utilities/display/#hiding-elements)
mb-md-5：平版以上，有[間距](https://bootstrap5.hexschool.com/docs/5.0/utilities/spacing/)margin-bottom
[Flex](https://bootstrap5.hexschool.com/docs/5.0/utilities/flex/)最常用，因很多情況下不會用到格線系統，可改變軸向，例如：可設定在手機時元件在左側，平版以上元件在右側
* [IT 邦幫忙](https://ithelp.ithome.com.tw/) - 手機版時隱藏右側內容 (d-none、d-lg-block)
* [六角學院](https://www.hexschool.com/) - 判斷哪些地方有用到 .row 哪些地方沒有
通常選單不做col,因字數不定，亦可能新增其他選單，用navbar，支援漢堡選單
滿版設計用或不用格線系統皆可，若不用格線系統，則可用text-align:center去讓文字置中
因row本身是display:flex，會併排，此用到[justify-content](https://bootstrap5.hexschool.com/docs/5.0/utilities/flex/#justify-content)-center，以通用類別去改變 flex 物件在主軸上的對齊置中。亦有.justify-content-md-center等，可針對不同斷點去設計。
* [甜點電商表尾](https://wcc723.github.io/F2E-PK/products.html) - 表尾設計 + row 裡面再加 .col
flex-column：靠上靠下，去拉出高度
* [Bootstrap Template](https://bootstrapmade.com/bootstrap-4-templates/) - 設計稿網站，一次搞懂所有格線系統用法
Your email address部分 可用.row.justify-content-center>.col-6
photoshop 無格線系統設計
Adobe XD,Sketch figma illustrator 有[格線系統](https://wcc723.github.io/design/2018/10/19/grid-system-2/)設計
格線裡面可以還有格線
col是100%解析度，可以在它裡面再加row
```htmlmixed=
左邊選單
Cras justo odio
Cras justo odio
Cras justo odio
```
