---
# System prepended metadata

title: BootsTrap 4
tags: [BootStrap]

---

# BootsTrap 4
###### tags: `BootStrap`
bootstrap4的優點為使用更具有彈性的flexbox、更精簡的html結構、更明確的CSS class命名：
![](https://i.imgur.com/apb3oCn.png)

可以不用照著傳統的HTML架構，例如ul、li，就算是改為div，只要class名稱是對的，效果就一樣：
![](https://i.imgur.com/QXadqnT.png)

## Utilities
bs4相比bs3多了很多小工具：
### Display
可以直接用class來做到css中display的效果：
![](https://i.imgur.com/kuAXLAC.png)

### Flexbox
也可以直接用class來做到css中的flexbox設定：
![](https://i.imgur.com/556C7WI.png)

### Spacing
也有關於空間的class可以設定，這裡的m就是margin，p就是padding，t就是top，r就是right，x就是x軸(left與right一起設定)，y就是y軸(top與bottom一起設定)，甚麼都沒加就是上下左右都設定：
![](https://i.imgur.com/dDneSmW.png)

## RWD
bs4也對RWD有近一步的支援，可以針對斷點去做display的設定：
![](https://i.imgur.com/qCRud5u.png)

### Grid
bs4的Grid系統比bs3多了一個斷點，大小也有改變，並且原本的xs直接變成預設值，把原本的xs刪掉，不須另外命名：
![](https://i.imgur.com/XGCe3GX.png)

![](https://i.imgur.com/onzS5pN.png)

### Image
原本在bs3的.img-responsive設定，也就是圖片根據容器的大小作改動，容器多大圖片就多大，縮小圖片也跟著縮小，在bs4中改為.img-fluid：
![](https://i.imgur.com/nVDDC7m.png)

## Components
bs4幾乎把所有的components都做了一些調整：
![](https://i.imgur.com/fxpaTBY.png)

button也多了一個樣式outline，從原本的實色變成線條顏色：
![](https://i.imgur.com/IR2NQsK.png)

## Others
bs4的底層css從原本的LESS改為SASS，如需客製化需要特別留意。

## Class的變化
有網站整理了所有Class的變化 -> http://upgrade-bootstrap.bootply.com/

## Grid
在bs4中，class只下col後面不帶數字的話，系統會自動幫你算：
![](https://i.imgur.com/mODHbnj.png)
以這個案例來說，col就等於col-2，這個機制其實是透過flex system裡的flex-grow:1做到的。

這邊要特別注意，col假如有帶數字的話，除了css會設定flex以外，還會多設定一個max-width，這樣雙重設定的原因是因為只設定flex的話，如果內容爆掉，他不一定會堅守設定值(會動態調節)，所以要多設定一個最大寬度來額外限制：
![](https://i.imgur.com/WTzOzqt.png)

![](https://i.imgur.com/GGQ2QEW.png)

如果都用col不帶參數命名，但又要換行，則可以使用class = w-100：
![](https://i.imgur.com/lGgEBGa.png)

對齊上方、中間、下面：
![](https://i.imgur.com/bvPCjD9.png)
![](https://i.imgur.com/W8tYZDF.png)

上方是針對全部的items，也可以個別設定：
![](https://i.imgur.com/3xT3vxX.png)

之前用offset去留空位，現在也可以用margin做到一樣效果，ml=margin-left：
![](https://i.imgur.com/09uttAI.png)


## Container
bs4的container主要分為.container與.container-fluid，前者是置中，後者是會隨者容器的大小動態調整：
![](https://i.imgur.com/JEDo3Xx.png)

## Media

## List
如果要讓ul橫排，要下list-inline class，裡面的li則是要下list-inline-item：
![](https://i.imgur.com/Fv8v14y.png)

## Table
如果table很大，會超出畫面，可以加入responsive class，可以為table加一個scrollbar在底部：
![](https://i.imgur.com/EJSaIp1.png)
也可以加入斷點(代表 過了某個斷點之後就取消responsive效果)

## Figure
在圖片下方加入說明文字：
![](https://i.imgur.com/7agl2Ls.png)

## 一些好用的Utilities
### Border
![](https://i.imgur.com/Brv22Xm.png)

![](https://i.imgur.com/wMmZxlH.png)

![](https://i.imgur.com/1wzdZQC.png)

### Clearfix
![](https://i.imgur.com/BTZFgA4.png)

### Close icon
![](https://i.imgur.com/YPFhi0f.png)

### Embed
![](https://i.imgur.com/hlc03qX.png)
加入responsive可以不用自己針對斷點手動設定，16by9是尺寸比例，至於iframe的class可加可不加。

## float
bs4用float取代pull：
![](https://i.imgur.com/C7hhQxX.png)

## image replacement
透過text-hide來增加搜尋引擎的搜尋機會(SEO)，通常搜尋引擎最喜歡H1，所以我們可以把關鍵字藏在圖片裡面，但是又不讓它顯示出來：
![](https://i.imgur.com/drffVyt.png)

## Position
![](https://i.imgur.com/GmaLKPQ.png)

還有fixed可以設定固定在畫面上：
![](https://i.imgur.com/mvQR64f.png)

sticky跟fixed效果差不多，但是會預留一行，並且為，要滾到他所在的位置才開始有固定的效果：
![](https://i.imgur.com/lzto3Xg.png)

## Shadows
![](https://i.imgur.com/TvCRZBJ.png)

## Text
若text超出block範圍，而且又是nowrap的時候，可以設定text-truncate，在文字超出邊界時，用省略符號(...)代替：
![](https://i.imgur.com/pbg6Bbh.png)

![](https://i.imgur.com/1BXqeXB.png)

![](https://i.imgur.com/SAMfH9j.png)

等寬字：
![](https://i.imgur.com/38bMQMN.png)

## Vertical alignment
![](https://i.imgur.com/yck2hkY.png)

![](https://i.imgur.com/Digdbib.png)

## Visibility
![](https://i.imgur.com/rwROFI5.png)
