1.重點(柵格系統,響應式工具,預製類)
2. 資源
bootstrap 來自 twitter（推特），是目前最受歡迎的前端響應式框架。
**：
框架:顧名思義就是一套架構，它有一套比較完整的網頁功能解決方案，而且控制權在框架本身，有預製樣式庫、元件和外掛程式。(版本2.xx,3.xx,4.xx)
2. 使用過程
index.html 初始化：
你好，世界！h1
>
body
>
html
>
3. 布局容器
版心設定：bootstrap 需要為頁面內容包裹乙個 .container 或者.container-fluid 容器，它提供了兩個作此用處的類。
container：設定不同檔位下的版心的寬度；
container-fluid：百分百寬度；
特點：
4. 預製類
排版
>
h1. bootstrap headingh1
>
>
h2. bootstrap headingh2
>
>
h3. bootstrap headingh3
>
>
h4. bootstrap headingh4
>
>
h5. bootstrap headingh5
>
>
h6. bootstrap headingh6
>
>
...p
>
class
="btn btn-default"
href
="#"
role
="button"
>
linka
>
class
="btn btn-default"
type
="submit"
>
buttonbutton
>
class
="btn btn-default"
type
="button"
value
="input"
>
class
="btn btn-default"
type
="submit"
value
="submit"
>
class
="text-muted"
>
...p
>
class
="caret"
>
span
>
class
="glyphicon glyphicon-search"
aria-hidden
="true"
>
5. 柵格系統
1.介紹
作用：設定子元素在不同檔位下的布局
柵格系統，在各個檔位下，控制子元素布局不同；將版心寬度均分為12份；
柵格系統用於通過一系列的行（row）與列（column）的組合來建立頁面布局，你的內容就可以放入這些建立好的布局中，控制不同的檔位下，列的子元素占有幾份
2. 基本使用
class
="container"
>
class
="row"
>
class
="col-md-6"
>
.col-md-6div
>
class
="col-md-6"
>
.col-md-6div
>
div>
div>
class
="container"
>
class
="row"
>
class
="col-md-6 col-lg-4"
>
1div
>
class
="col-md-6 col-lg-8"
>
2div
>
div>
div>
class
="col-sm-4"
>
class
="col-sm-6"
>
小列div
>
class
="col-sm-6"
>
小列div
>
div>
class
="col-sm-4"
>
class
="row"
>
class
="col-sm-6"
>
小列div
>
class
="col-sm-6"
>
小列div
>
div>
div>
class
="row"
>
class
="col-lg-4"
>
1div
>
class
="col-lg-4 col-lg-offset-4"
>
2div
>
div>
class
="row"
>
class
="col-md-8 col-md-offset-2"
>
中間盒子div
>
div>
class
="row"
>
class
="col-md-4 col-lg-4 col-lg-push-8"
>
div>
class
="col-md-8 col-lg-8 col-lg-pull-4"
>
div>
div>
6. 響應式工具
bootstrap之網格布局
一.實現原理 網格布局是通過容器的大小，平均分為12份 可以修改 再調整內外邊距,和 布局有點類似但是也存在區別。實現步驟如下 1 資料行.row 必須包含在容器.container 中,以便賦予核實的對齊方式和內間距設定 class container class row div div 2 在行...
響應式布局之Bootstrap
1.響應式開發原理 使用 查詢針對不同寬度的裝置進行布局和樣式設定，從而達到適配不同的裝置的目的。2.響應式布局容器 響應式需要乙個父級作為布局容器，來配合子級元素來實現變化效果。原理就是在不同螢幕下，通過 查詢來改變這個布局容器的大小，再改變裡面自級元素的排列方式和大小，從而實現不同螢幕下不同的頁...
CSS之Bootstrap（快速布局）
使用 bootstrap 並不代表不用寫 css 樣式，而是不用寫絕大多數大家都會用到的樣式 en en x ua compatible content ie edge viewport content width device width,initial scale 1 media 判斷條件 針對...