1、什麼是Bootstrap網格系統（Grid System）？

Bootstrap 包含了一個響應式的、移動裝置優先的、不固定的網格系統，可以隨著裝置或視口大小的增加而適當地擴充套件到 12 列。它包含了用於簡單的佈局選項的預定義類，也包含了用於生成更多語義佈局的功能強大的混合類。

響應式網格系統隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。

2、Bootstrap 網格系統（Grid System）的工作原理？

（1）行必須放置在 .container class 內，以便獲得適當的對齊（alignment）和內邊距（padding）。

（2）使用行來建立列的水平組。

（3）內容應該放置在列內，且唯有列可以是行的直接子元素。

（4）預定義的網格類，比如 .row 和 .col-xs-4，可用於快速建立網格佈局。LESS 混合類可用於更多語義佈局。

（5）列通過內邊距（padding）來建立列內容之間的間隙。該內邊距是通過 .rows 上的外邊距（margin）取負，表示第一列和最後一列的行偏移。

（6）網格系統是通過指定您想要橫跨的十二個可用的列來建立的。例如，要建立三個相等的列，則使用三個 .col-xs-4。

3、對於各類尺寸的裝置，Bootstrap設定的class字首分別是什麼？

超小裝置手機（<768px）：.col-xs-

小型裝置平板電腦（>=768px）：.col-sm-

中型裝置臺式電腦（>=992px）：.col-md-

大型裝置臺式電腦（>=1200px）：.col-lg-

4、使用Bootstrap建立垂直表單的基本步驟？

（1）向父元素新增role=“form”；

（2）把標籤和控制元件放在一個帶有class="form-group"的中，這是獲取最佳間距所必需的；

（3）向所有的文字元素、、新增class=“form-control”。

5、使用Bootstrap建立水平表單的基本步驟？

（1）向父元素新增class=“form-horizontal”；

（2）把標籤和控制元件放在一個帶有class="form-group"的中；

（3）向標籤新增class=“control-label”。

6、Bootstrap有哪些關於圖片的class？

（1）.img-rounded 為圖片新增圓角

（2）.img-circle 將圖片變為圓形

（3）.img-thumbnail 縮圖功能

（4）.img-responsive 圖片響應式 (將很好地擴充套件到父元素)

7、Bootstrap如何製作下拉選單？

（1）將下拉選單包裹在class="dropdown"的中；
（2）在觸發下拉選單的按鈕中新增：class=“btn dropdown-toggle” id=“dropdownMenu1” data-toggle=“dropdown”

（3）在包裹下拉選單的ul中新增：class=“dropdown-menu” role=“menu” aria-labelledby=“dropdownMenu1”

（4）在下拉選單的列表項中新增：role=“presentation”。其中，下拉選單的標題要新增class=“dropdown-header”，選項部分要新增tabindex="-1"。

8、Bootstrap中設定分頁的class？

預設的分頁：class=“pagination”

預設的翻頁：class=“pager”