Bootstrap 是一個老少皆宜、前後通用、遠近馳名、輕鬆上手的一套 Framework ，到了第 4 版採用了新的 CSS 屬性之後，讓 RWD 網頁更加容易就能製作完成，這次 Amos 會把 Bootstrap 的原始碼掀開讓各位了解他的原始概念跟應用，讓大家可以輕鬆了解到 Bootstrap 4 的強大功能。

1. 最大的改變？
- 開始有了初始值的概念(如：.col / .col-12)
- 增加一個裝置尺寸區間 576px ~ 767px
- 將原本的float改成使用flex
- 因為採用了flex之後增加更多的對齊方式(如：.justify-content-start)
- 針對小型區塊的排版增加了可直接套用的class（如：.col）
- 細化了各裝置上的控制項目（如：.text-sm-left）
- 將原本在購買現成樣版才有的class直接內建（如：.mt / .mb / .ml / .mr）
- 顯示與隱藏區塊更加的符合使用情境（.hidden-md-up / .hidden-md-down）
- 簡化了CSS class名稱，更加直覺了(?)
- 大量使用 rem 單位，只要修改html文字尺寸，就能改變整體字級。
- 添加了更多的色彩可供運用。
- CSS僅增加30kb的大小
col-裝置尺寸代號-寬度
解決了什麼？
- 解決了排版上的死板與不彈性(因為flex對版面的強大控制)
- 解決了各式的對齊問題
- 解決了各式的區塊排序問題(還是有一些瑕疵)
- 解決了需要手寫細節的問題(寬度、高度、尺寸)
- 解決了各裝置之間受限於float屬性的排版問題
- 解決了各區間細節控制問題
學習上會遇到什麼問題？
- flex的特性的不熟悉
- 各個class name之間屬性衝突與優先權的問題
- 不支援 IE10 以下
BS4 尺寸＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝xs 576以下（預設）sm 576以上(手機躺平) md
768以上(平板) lg 992以上(平板躺平) xl 1200以上(桌機)
格線系統＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝.container xs 576以下(width: auto) sm 576以上
(width: 540px) md 768以上(width: 720px) lg 992以上(width: 960px) xl 1200以上(width: 1140px)
.row
display: flex;
flex-wrap: wrap;
預設子物件換行排列，跟bootstrap3版一樣，不同的是採用了flex的屬性。
.no-gutters
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"]
padding-right: 0;

2. padding-left: 0;
消除row自身margin以及其下一層欄(col)的padding為0，目的是為了製作滿版無欄距的版面
.col
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
寬度自動等分，若搭配「.col-數字」的話，可能會導致寬度不一，要注意。當版面不需要特定寬度時，使用此class是非常省事的做法
.col-auto
flex: 0 0 auto;
width: auto;
寬度自動，內容文字自動變成不換行，適合用於小組件區塊的資料，不適合頁面大板塊。且預設沒有左右各15px的內距，故需要搭配
.col-裝置尺寸代號-auto
flex: 0 0 auto;
.col-裝置尺寸代號
flex-grow: 1;
flex-basis: 0;
在特定裝置下，寬度自動等分。
.col-數字
flex: 0 0 8.333333%;
max-width: 8.333333%;
使用限制最大寬度來控制欄寬，基本上等同於bootstrap3版的格線。
欄偏移控制＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝舊版名稱.col-sm-push-1
.push-數字
left: 8.333333%;
.push-尺寸代號-數字
left: 8.333333%;
.pull-數字
right: 8.333333%;
.pull-尺寸代號-數字
right: 8.333333%;
.offset-數字
margin-left: 8.333333%;
.offset-尺寸代號-數字
margin-left: 0%;
格線排序控制＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝.flex-first order: -1; 讓欄位變到第一
欄，但當多個欄都有設定時，則會依原始順序排列。
.flex-尺寸代號-first
order: -1;
.flex-last
order: 1;

3. 讓欄位變成最後一欄，但當多個欄都有設定時，則會依原始順序排列。
.flex-尺寸代號-last
order: 1;
.flex-unordered {
order: 0;
讓欄位恢復原始排列順序，由於撰寫位置放在 flex-first 與 flex-last 的後方，所以同時設定時，會依此設定為優先。
.flex-尺寸代號-unordered
order: 0;
格線走向控制＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝.flex-row flex-direction: row
!important; 設定排列方向為橫向。
.flex-裝置尺寸代號-row
flex-direction: row !important;
.flex-column
flex-direction: column !important;
設定排列方向為直向，由於撰寫位置是在 flex-row 的後方，所以當兩個同時設定時，會依此設定為優先。
.flex-裝置尺寸代號-column
flex-direction: column !important;
.flex-row-reverse
flex-direction: row-reverse !important;
設定排列方向為列反向。
.flex-sm-row-reverse
flex-direction: row-reverse !important;
.flex-裝置尺寸代號-column-reverse
flex-direction: column-reverse !important;
格線換行控制＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝.flex-wrap flex-wrap: wrap
!important;
.flex-裝置尺寸代號-wrap
flex-wrap: wrap !important;
.flex-nowrap
flex-wrap: nowrap !important;
設定格線不換行， .row 預設就是換行，添加此設定即可不換行。
.flex-裝置尺寸代號-nowrap
flex-wrap: nowrap !important;
格線換行走向控制＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝.flex-wrap-reverse flex-wrap:
wrap-reverse !important; 反向換列。

4. .flex-裝置尺寸代號-wrap-reverse
flex-wrap: wrap-reverse !important;
格線主軸對齊控制＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝.justify-content-start justify-
content: flex-start !important;
.justify-content-end
justify-content: flex-end !important;
.justify-content-center
justify-content: center !important;
.justify-content-between
justify-content: space-between !important;
.justify-content-around
justify-content: space-around !important;
.justify-content-裝置尺寸代號-start
justify-content: flex-start !important;
.justify-content-裝置尺寸代號-end
justify-content: flex-end !important;
.justify-content-裝置尺寸代號-center
justify-content: center !important;
.justify-content-裝置尺寸代號-between
justify-content: space-between !important;
.justify-content-裝置尺寸代號-aroun
justify-content: space-around !important;
格線次軸對齊控制＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝.align-items-start align-items:
flex-start !important;
.align-items-裝置尺寸代號-start
align-items: flex-start !important;
.align-items-end
align-items: flex-end !important;
.align-items-裝置尺寸代號-end
align-items: flex-end !important;
.align-items-center
align-items: center !important;
.align-items-裝置尺寸代號-center
align-items: center !important;
.align-items-baseline
align-items: baseline !important;

5. .align-items-裝置尺寸代號-baseline
align-items: baseline !important;
.align-items-stretch
align-items: stretch !important;
.align-items-裝置尺寸代號-stretch
align-items: stretch !important;
----------------------------------------
.align-content-start
align-content: flex-start !important;
.align-content-裝置尺寸代號-start
align-content: flex-start !important;
.align-content-end
align-content: flex-end !important;
.align-content-裝置尺寸代號-end
align-content: flex-end !important;
.align-content-center
align-content: center !important;
.align-content-裝置尺寸代號-center
align-content: center !important;
.align-content-between
align-content: space-between !important;
.align-content-裝置尺寸代號-between
align-content: space-between !important;
.align-content-around
align-content: space-around !important;
.align-content-裝置尺寸代號-around
align-content: space-around !important;
.align-content-stretch
align-content: stretch !important;
.align-content-裝置尺寸代號-stretch
align-content: stretch !important;
格線自身self對齊控制＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝.align-self-auto align-self: auto
!important;
.align-self-裝置尺寸代號-auto
align-self: auto !important;
.align-self-start
align-self: flex-start !important;
.align-self-裝置尺寸代號-start
align-self: flex-start !important;

6. .align-self-end
align-self: flex-end !important;
.align-self-裝置尺寸代號-end
align-self: flex-end !important;
.align-self-center
align-self: center !important;
.align-self-裝置尺寸代號-center
align-self: center !important;
.align-self-baseline
align-self: baseline !important;
.align-self-裝置尺寸代號-baseline
align-self: baseline !important;
.align-self-stretch
align-self: stretch !important;
.align-self-裝置尺寸代號-stretch
align-self: stretch !important;
定位fixed控制＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝.fixed-top position: fixed; top: 0;
right: 0; left: 0;
.fixed-bottom
position: fixed;
right: 0;
bottom: 0;
left: 0;
.sticky-top（新）
position: -webkit-sticky;
position: sticky;
top: 0;
浮動控制＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝舊版名稱.pull-left
.float-left
float: left !important;
.float-right
float: right !important;
.float-none
float: none !important;
.float-裝置尺寸代號-左右
float: left !important;
表格＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝.table .table td padding: 0.75rem;

7. .table-sm td
padding: 0.3rem;
表格色彩＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝舊版名稱.warning
.table-warning,
.table-warning > th,
.table-warning > td
background-color: #fcf8e3;
顯示屬性控制＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝.d-inline display: inline !important;
.d-裝置尺寸代號-inline
display: inline !important;
------------------------------------
.d-inline-block
display: inline-block !important;
.d-裝置尺寸代號-inline-block
display: inline-block !important;
------------------------------------
.d-block
display: block !important;
.d-裝置尺寸代號-block
display: block !important;
------------------------------------
.d-table
display: table !important;
.d-裝置尺寸代號-table
display: table !important;
------------------------------------
.d-table-cell
display: table-cell !important;
.d-裝置尺寸代號-table-cell
display: table-cell !important;
------------------------------------
.d-flex
display: flex !important;
.d-裝置尺寸代號-flex
display: flex !important;
------------------------------------
.d-inline-flex
display: inline-flex !important;
.d-裝置尺寸代號-inline-flex
display: inline-flex !important;
隱藏控制＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝.d-none display: none !important;

8. .d-裝置尺寸代號-none
display: none !important;
此控制將會控制該裝置以上所有的尺寸都受到影響
----------------------------------
.text-hide {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.invisible {
visibility: hidden !important;
}
----------------------------------
.hidden-裝置尺寸代號-up
display: none !important;
於該裝置代號以上尺寸做隱藏
.hidden-裝置尺寸代號-down {
display: none !important;
於該裝置代號以下尺寸做隱藏
列印控制＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝.visible-print-block display: block
!important; 僅在列印時顯示
.visible-print-inline
display: inline !important;
僅在列印時顯示
.visible-print-inline-block
display: inline-block !important;
僅在列印時顯示
.hidden-print
display: none !important;
容器尺寸控制(新) ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝.w-25 width: 25% 共四種尺寸
25/50/75/100
.h-25
height: 25%
共四種尺寸25/50/75/100
.mw-25
max-width: 25%
共四種尺寸25/50/75/100
.mh-25
max-height: 25%
共四種尺寸25/50/75/100

9. 外距控制＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝.m-數字margin: 0.25rem 0.25rem; 數字
共有0~5共6個級距，由0開始，每個級距分別是0: 0rem 1: 0.25rem 2: 0.5rem 3: 1rem 4: 1.5rem 5: 3rem
.mt-數字
margin-top: 0
共四個方向，mt/mr/mb/ml
數字共有0~5共6個級距，由0開始，每個級距分別是
0: 0rem
1: 0.25rem
2: 0.5rem
3: 1rem
4: 1.5rem
5: 3rem
.mx-數字
margin-left: 0;
margin-right: 0;
設定X軸的margin尺寸
.mx-裝置尺寸代號-數字
margin-left: 0;
margin-right: 0;
設定X軸的margin尺寸
.my-數字
margin-top: 0;
margin-bottom: 0;
設定Y軸的margin尺寸
.my-裝置尺寸代號-數字
margin-top: 0;
margin-bottom: 0;
設定Y軸的margin尺寸
.mt-數字
margin-top: 0.25rem;
共有四個方向，top/right/bottom/left。
.mt-裝置尺寸代號-數字
margin-top: 0.25rem;
共有四個方向，top/right/bottom/left。
.m-auto
margin: auto;
設定margin為auto，因為撰寫位置在其他margin設定的下方，所以優先權會比固定數值設定要來得高。
.m-裝置尺寸代號-auto
margin: auto;
設定margin為auto，因為撰寫位置在其他margin設定的下方，所以優先權會比固定數值設定要來得高。
.mx-auto
margin-left: auto;
margin-right: auto;
.mx-裝置尺寸代號-auto
margin-left: auto;
margin-right: auto;
設定margin為auto，因為撰寫位置在其他margin設定的下方，所以優先權會比固定數值設定要來得高。

10. .my-auto
margin-top: auto;
margin-bottom: auto;
.my-裝置尺寸代號-auto
margin-top: auto;
margin-bottom: auto;
設定margin為auto，因為撰寫位置在其他margin設定的下方，所以優先權會比固定數值設定要來得高。
內距控制＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝.p-數字padding: 0 0 !important; 數字共
有0~5共6個級距，由0開始，每個級距分別是0: 0rem 1: 0.25rem 2: 0.5rem 3: 1rem 4: 1.5rem 5: 3rem
.p-裝置尺寸代號-數字
padding: 0.25rem;
共有四個方向，top/right/bottom/left。
.pt-數字
padding-top: 0 !important;
共有四個方向，top/right/bottom/left。
.pt-裝置尺寸代號-數字
padding-top: 0.25rem;
共有四個方向，top/right/bottom/left。
.px-數字
padding: 0 0 !important;
設定X軸的padding尺寸
.px-裝置尺寸代號-數字
padding: 0 0 !important;
設定X軸的padding尺寸
.py-數字
padding: 0 0 !important;
設定Y軸的padding尺寸
.py-裝置尺寸代號-數字
padding: 0 0 !important;
設定Y軸的padding尺寸
文字對齊＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝.text-left text-align: left;
.text-right
text-align: right;
.text-center
text-align: center;
.text-裝置尺寸代號-left
text-align: left;
.text-裝置尺寸代號-right
text-align: right;
.text-裝置尺寸代號-center
text-align: center;

11. 文字色彩（多了兩個）＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝.text-white (新) .text-muted .text-
primary .text-success .text-info .text-warning .text-danger .text-gray-dark (新)
文字控制＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝.text-hide font: 0/0 a; color: transparent;
text-shadow: none; background-color: transparent;
.text-nowrap
white-space: nowrap !important;
.text-truncate (新)
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
文字變體(多了粗細/斜體控制) ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝.text-lowercase text-transform:
lowercase !important;
.text-uppercase
text-transform: uppercase !important;
.text-capitalize
text-transform: capitalize !important;
.font-weight-normal
font-weight: normal;
.font-weight-bold
font-weight: bold;
.font-italic
font-style: italic;
移除邊框(新)＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝.border-0 border: 0 !important;
.border-top-0
border-top: 0 !important;
.border-right-0
border-right: 0 !important;
.border-bottom-0
border-bottom: 0 !important;
.border-left-0
border-left: 0 !important;
圓角控制(新) ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝.rounded border-radius: 0.25rem;

12. .rounded-top
border-top-right-radius: 0.25rem;
border-top-left-radius: 0.25rem;
.rounded-right
border-bottom-right-radius: 0.25rem;
border-top-right-radius: 0.25rem;
.rounded-bottom
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
.rounded-left
border-bottom-left-radius: 0.25rem;
border-top-left-radius: 0.25rem;
----------------------------------------
.rounded-circle
border-radius: 50%;
.rounded-0
border-radius: 0;
按鈕＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝.btn .btn.active .btn.disabled .btn-primary
.btn-info .btn-success .btn-warning
.btn-danger
-------------------------------------
.btn-secondary(新)
.btn-outline-primary (新)
.btn-outline-secondary (新)
.btn-outline-info (新)
.btn-outline-success (新)
.btn-outline-warning (新)
.btn-outline-danger (新)