###### <p style="text-align: right"> 建立日期：2021-01-04 / 更新日期：2021-01-05</p>

# Bootstrap 4

###### tags: `Bootstrap`

## Bootstrap 3 和 4 的差異
* 從 Less 轉移到 Sass
* 支援從 IE8+ and iOS 6+ 改成 IE10+ and iOS 7+
* 排版從 float 改成 flex
* 中斷點重新命名且新增一個中斷點
| v3 / v4 | -- / xs | xs / sm | sm / md | md / lg |lg / xl |
| ------- | ------- | ------- | ------- | ------- | ------- |
| v3 | | <768px | >=768px | >= 992px | >= 1200px |
| v4 | <= 575px | >=576px | >=768px | >= 992px | >= 1200px |
| v4 column | col-* | col-sm-* | col-md-* | col-lg-* | col-xl-* |
* 單位從 px 到 rem
* 預設字體大小 14px 改成 16px（也是瀏覽器預設的文字大小）
* 預設色彩由沉著改成較鮮艷的顏色，並新增常使用的次要、黑白色彩
* 增加 outline 版本的按鈕
* 將樣式有許多共通處的元件移除後統整成更易於使用，且彈性更高的卡片元件
* 放棄使用 Helvetica（Windows 沒有這個字體） 和 Arial 作為預設字體
* 預先載入 box-sizing: border-box;

## 重要概念
* 行動優先的框架，透過許多 media queries 來設立中斷點並製作具彈性的排版
* 總欄數為 12
* `class="container"` 裡面放 `class="row"`，`class="row"` 裡面放 `class="col-xx"`，`class="col-xx"` 裡面放頁面內容，才能正確顯示 gutter（主要原因為空間補回及 flex）
* `class="container"` 主要是用來定義最外層的容器，使用上分為應對：
* 滿版寬度：container-fluid，彈性，寬度隨著版型大小調整，適合不需要嚴謹的定義最大寬度
* 階段固定寬度：container，適合對網頁內容寬度的階段美感都很要求且需要最大寬度的限制。但裝置寬度小於 575px 時，內容仍是彈性的寬度。

## Components
* 提供大量現成的組件讓開發者可以輕鬆組合變化

## 參考資料
* [Bootstrap v4.5](https://getbootstrap.com/docs/4.5/getting-started/introduction/ "Bootstrap v4.5 Documentation")
* [Vue 出一個電商網站](https://www.udemy.com/course/getbootstrap-4/ "精通 Bootstrap 4 - 開發超強不解釋")