# BootsTrap 4
###### tags: `BootStrap`
bootstrap4的優點為使用更具有彈性的flexbox、更精簡的html結構、更明確的CSS class命名：

可以不用照著傳統的HTML架構，例如ul、li，就算是改為div，只要class名稱是對的，效果就一樣：

## Utilities
bs4相比bs3多了很多小工具：
### Display
可以直接用class來做到css中display的效果：

### Flexbox
也可以直接用class來做到css中的flexbox設定：

### Spacing
也有關於空間的class可以設定，這裡的m就是margin，p就是padding，t就是top，r就是right，x就是x軸(left與right一起設定)，y就是y軸(top與bottom一起設定)，甚麼都沒加就是上下左右都設定：

## RWD
bs4也對RWD有近一步的支援，可以針對斷點去做display的設定：

### Grid
bs4的Grid系統比bs3多了一個斷點，大小也有改變，並且原本的xs直接變成預設值，把原本的xs刪掉，不須另外命名：


### Image
原本在bs3的.img-responsive設定，也就是圖片根據容器的大小作改動，容器多大圖片就多大，縮小圖片也跟著縮小，在bs4中改為.img-fluid：

## Components
bs4幾乎把所有的components都做了一些調整：

button也多了一個樣式outline，從原本的實色變成線條顏色：

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

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

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

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


如果都用col不帶參數命名，但又要換行，則可以使用class = w-100：

對齊上方、中間、下面：

上方是針對全部的items，也可以個別設定：

之前用offset去留空位，現在也可以用margin做到一樣效果，ml=margin-left：

## Container
bs4的container主要分為.container與.container-fluid，前者是置中，後者是會隨者容器的大小動態調整：

## Media

## List
如果要讓ul橫排，要下list-inline class，裡面的li則是要下list-inline-item：

## Table
如果table很大，會超出畫面，可以加入responsive class，可以為table加一個scrollbar在底部：
也可以加入斷點(代表 過了某個斷點之後就取消responsive效果)

## Figure
在圖片下方加入說明文字：

## 一些好用的Utilities
### Border



### Clearfix

### Close icon

### Embed
加入responsive可以不用自己針對斷點手動設定，16by9是尺寸比例，至於iframe的class可加可不加。

## float
bs4用float取代pull：

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

## Position

還有fixed可以設定固定在畫面上：

sticky跟fixed效果差不多，但是會預留一行，並且為，要滾到他所在的位置才開始有固定的效果：

## Shadows

## Text
若text超出block範圍，而且又是nowrap的時候，可以設定text-truncate，在文字超出邊界時，用省略符號(...)代替：



等寬字：

## Vertical alignment


## Visibility