WEB前端響應式布局之BootStarp的使用

　　1.Bootstrap簡介：

　　1. 概念： 一個前端開發(fā)的框架，Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。

　　* 框架:一個半成品軟件，開發(fā)人員可以在框架基礎上，在進行開發(fā)，簡化編碼。

　　* 好處：

　　1. 定義了很多的css樣式和js插件。我們開發(fā)人員直接可以使用這些樣式和插件得到豐富的頁面效果。

　　2. 響應式布局。

　　* 同一套頁面可以兼容不同分辨率的設備。

　　2. 快速入門

　　1. 下載

　　2. 在項目中將這三個文件夾復制{css樣式文件夾、js、fonts字體及圖標文件夾}

　　3. 創(chuàng)建html頁面，引入必要的資源文件。如：jQuery

　　3.演示案例

　　你好，世界!

　　4. 響應式布局

　　同一套頁面可以兼容不同分辨率的設備。

　　* 實現：依賴于柵格系統(tǒng)：將一行平均分成12個格子，可以指定元素占幾個格子

　　* 步驟：

　　1. 定義容器。相當于之前的table、

　　* 容器分類：

　　1. container：兩邊留白

　　2. container-fluid：每一種設備都是100%寬度

　　2. 定義行。相當于之前的tr 樣式：row

　　3. 定義元素。指定該元素在不同的設備上，所占的格子數目。樣式：col-設備代號-格子數目

　　* 設備代號：

　　1. xs：超小屏幕 手機 (<768px)：col-xs-12

　　2. sm：小屏幕 平板 (≥768px)

　　3. md：中等屏幕 桌面顯示器 (≥992px)

　　4. lg：大屏幕 大桌面顯示器 (≥1200px)

　　* 注意：

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

　　2. 柵格類屬性可以向上兼容。柵格類適用于與屏幕寬度大于或等于分界點大小的設備。

　　3. 如果真實設備寬度小于了設置柵格類屬性的設備代碼的最小值，會一個元素沾滿一整行。

　　5. CSS樣式和JS插件

　　1. 全局CSS樣式：

　　* 按鈕：class="btn btn-default"

　　* 圖片：無錫渤海醫(yī)院 https://yyk.familydoctor.com.cn/20612/

　　* class="img-responsive"：圖片在任意尺寸都占100%

　　* 圖片形狀

　　方形

　　圓形

　　*相框

　　* 表格

　　* table

　　* table-bordered

　　* table-hover

　　* 表單

　　* 給表單項添加：class="form-control"

　　2. 組件：

　　* 導航條

　　* 分頁條

　　3. 插件：

　　* 輪播圖

　　演示案例

　　搜索

　　Toggle navigation

　　首頁

　　Link (current)

　　Link

　　Link

　　Link