BootStrap響應式布局

概念：是目前很受歡迎的前端架構，來自 Twitter。Bootstrap 是基于 HTML、CSS、JavaScript 的，它簡潔靈活，使得 Web 開發更加快捷。

優點：定義了很多的css樣式和js插件。我們開發人員直接可以使用這些樣式和插件得到豐富的頁面效果。是響應式布局，可以相容不同分辨率的裝置。

快速入門：

下載下傳BootStrap

在項目中導入檔案夾

建立html頁面，引入必要的資源檔案

模闆

同一套html文檔可以相容不同分辨率的裝置。依賴于栅格系統：将一行平均分成12個格子，可以指定元素占幾個格子

實作：

定義容器，相當于之前的table

容器分類：container:固定寬度，兩邊留白。container-fluid:100%寬度

定義行：樣式：row

定義元素：指定元素在不同的裝置所占的格子數目。樣式：col-裝置代号-格子數目

裝置代号

xs：超小螢幕 手機 (<768px)：col-xs-12

sm：小螢幕 平闆 (≥768px)

md：中等螢幕 桌面顯示器 (≥992px)

lg：大螢幕 大桌面顯示器 (≥1200px)

注意：

一行中如果格子數目超過12，則超出部分自動換行。

栅格類适用于與螢幕寬度大于或等于分界點大小的裝置。

如果真實裝置寬度小于設定栅格類屬性的裝置代碼的最小值，會一個元素占滿一整行。

全局css樣式：

按鈕：class="btn btn-default"

圖檔：class="img-responsive"：在任意裝置圖檔都100%顯示

圖檔形狀：

class="img-rounded" 方形

class="img-circle" 圓形

class="img-thumbnail" 相框

表格：class="table table-bordered table-hover"

表單：class="form-control"

元件

導覽列

分頁條

JS插件

輪播圖