---
tags: 大學生體驗營 - 2021 夏季班
---

## BS5 格線系統


## Mobile first 與 Desktop first 差別

* [desktop first](https://codepen.io/liao/pen/WNQJVqr?editors=1100)
* [mobile first](https://codepen.io/liao/pen/jObxgeW?editors=1100)

## 格線系統 - 減輕 magic number 出現
* 格線系統關鍵字：column(欄)、gutter(間距)
* [960 grid，以前解析度都是 1024](https://960.gs/demo.html)
* [BS4 layoutit](https://www.layoutit.com/build)
> 常見總欄數是 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-
* 名言 3：網頁內容與元件請放在 .col- 裡面
> 常見錯誤，在 .col 增加寬度
> 常見錯誤，在格線系統調整左右 margin 與 padding

> 常見觀念：可以加上下 的 margin 與 padding
> 常見觀念：最外層至少補一個 container
> 常見觀念：整體格線邏輯是一致

## BS5 格線斷點設計
* [文件位置](https://bootstrap5.hexschool.com/docs/5.0/layout/grid/#grid-options)
* [範例處](https://codepen.io/hexschool/pen/OJpXqVj?editors=1100)

> 若想先做 PC 版，可用 md、lg 當起手式

## 格線系統與元件整合

* [範例處](https://codepen.io/liao/pen/abvaXyy?editors=1100)

## 網站範例 + 通用類別搭配

* [IT 邦幫忙](https://ithelp.ithome.com.tw/) - 手機版時隱藏右側內容
* [六角學院](https://www.hexschool.com/) - 判斷哪些地方有用到 .row 哪些地方沒有
* [甜點電商表尾](https://wcc723.github.io/F2E-PK/products.html) - 表尾設計 + row 裡面再加 .col
* [Bootstrap Template](https://bootstrapmade.com/bootstrap-4-templates/) - 一次搞懂所有格線系統用法

<!-- 主線任務 LV1：-->