什么是Bootstrap
Bootstrap是目前最流行的一套前端開發框架，集成了HTML、CSS和JavaScript技術，為網頁快速開發提供了包括布局、網格、表格、按鈕、表單、導航、提示、分頁等組件。
它的構成模塊從大的方面可以分為頁面布局、頁面排版、通用樣式、基本組件和jQuery插件等各部分。
布局基礎
布局容器
容器時Bootstrap中最基本的布局元素，在使用默認網格系統時時必需的。Bootstrap中定義了兩個容器類，分別是.container和.container-fluid。它們的區別在於寬度的設定。
container容器根據屏幕寬度不同，利用媒體查詢設定固定的寬度，當改變瀏覽器大小時，頁面會呈現階段性變化。
.container{
width:100%;
padding-right:15px;
padding-left:15px;
margin-right:auto;
margin-left:auto;
}
在不同的設備屏幕寬度下container的最大可寬度也會變化：
| @media(min-width: ) | .container{max-width: } |
|---|---|
| 576px | 540px |
| 768px | 720px |
| 992px | 960px |
| 1200px | 1140px |
container-fluid容器則保持全屏大小，當需要一個元素橫跨視口的整個寬度時可以采用。
.container-fluid{
width:100%;
padding-right:15px;
padding-left:15px;
margin-right:auto;
margin-right:auto;
}
雖然容器可以嵌套，但大多數布局不需要嵌套容器。
相應斷點
Bootstrap使用媒體查詢為布局和接口創建合理的斷點。這些斷點主要基於最小的視口寬度，並且允許隨着視口的變化而擴展元素。
/*默認不寫為對一切尺寸有效*/
/*小型設備sm*/
@media (min-width:576px){}
/*中型設備md*/
@media (min-width:768px){}
/*大型設備lg*/
@media (min-width:992px){}
/*超大型設備xl*/
@media (min-width:1200px){}
z-index
z-index屬性設置一個定位元素沿z軸的位置，正數例用戶更近，負數離用戶更遠。Bootstrap中定義了相應工具的層級，不推薦自定義。
網格系統
Bootstrap 包含了一個響應式的、移動設備優先的、不固定的網格系統，可以隨着設備或視口大小的增加而適當地擴展到 12 列。它包含了用於簡單的布局選項的預定義類，也包含了用於生成更多語義布局的功能強大的混合類。
12柵格
響應式網格系統隨着屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。響應式變化使用.col-+sm/md/lg/xl+n，其中n為在分成12列的基礎上所占列數，默認為1，它的分布請看下圖：（如不接n而接auto，則代表按照內容自動調整寬度）
例：
<div class="col-md-4 col-sm-6 col-xs-12">
上述代碼意思為中型設備時占4列，小型設備時占6列，特小型設備占12列。如果有許多同樣的元素結構，則可以呈現不同的排列方式，非常靈活。
還可以混合搭配，如：
<div class="row">
<div class="col-12 col-md-8"></div>
<div class="col-6 col-md-4"></div>
</div>
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
建議實際操作一下。
注：
1.可以使用.no-gutters類來刪除邊距。
2.如果在一行中放置超過12列，則超出的那一組將作為新的一行，后續的列沿着新行繼續排列。
重排序
使用.order-n類選擇符，可以對空間進行可視化排序，n可以是1~12，沒有定義該類的元素將默認排在前面。數字越大排得越靠右。n還可以用first/last代替。
列偏移
- 使用響應式的
.offset-n類偏移方法，使列向右偏移n列 - 使用邊距通用樣式處理，內置諸如
.ml-*、.p-n、.pt-n等，如.ml-auto、.mr-auto水平隔離。
彈性盒子
Flex是Flexible Box的縮寫，意為“彈性布局”，用來為盒裝模型提供最大的靈活性，任何一個容器都可以指定為Flex布局。
采用Flex布局的元素，被稱為Flex容器，簡稱“容器”。其所有子元素自動成為容器成員，稱為Flex項目（Flex item），簡稱“項目”。
.d-flex為彈性伸縮盒子，.d-inline-flex為內聯塊級彈性伸縮盒子。
水平方向排列：.flex-row 左對齊 .flex-row-reverse 右對齊
垂直方向排列：.flex-column 垂直方向顯示 .flex-column-reverse 翻轉后垂直顯示
內容排列：.justify-content-* * 號允許的值有：start (默認), end, center, between 或 around
等寬：.flex-fill 強制設置各個彈性子元素寬度一致
擴展：.flex-grow-1 用於設置子元素使用剩下的空間。
排序：.order 類可以設置彈性子元素的排序，從 .order-1 到 .order-12，數字越低權重越高( .order-1 排在 .order-2 之前)
包裹：彈性容器中包裹子元素可以使用以下三個類： .flex-nowrap (默認), .flex-wrap 或 .flex-wrap-reverse。設置 flex 容器是單行或者多行。（是否換行）
垂直對齊：使用 .align-content-* 來控制在垂直方向上如何去堆疊子元素，包含的值有：.align-content-start (默認), .align-content-end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch。這些類在只有一行的彈性子元素中是無效的。
響應式flex，在對應位置加上設備尺寸即可。