bootstrap根據不同螢幕尺寸，選擇不同的柵格選項。一共有四種柵格選項，超小屏（手機）、小屏（平板）、中屏（桌面）、大屏（超大桌面）。柵格系統分為12列，即每行最多可容納12列。若里，乙個.row內包含的列（column）大於12個（即，一行中的柵格單元超過12個單元），則會自動排版，總之，一行只能最多12列，具體分析往後閱讀。
使用柵格系統時，需要在1. 為了確保適當的繪製和觸屏縮放，需要在
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
上圖的**實現1. 超小屏(手機 col-xs-* ) 與 中屏(桌面 col-md-*)之間有3:2的換算關係
2. 在中屏以上螢幕(>=992px)中，才會顯示上圖效果；
若<=992px或是<=768px (在手機或者平板上)，有的一行 ( .row ) 已經超過12列，則分兩行顯示。
如果乙個.row內包含的列大於12個，包含多餘列的元素將作為乙個整體單元被另起一行排列
9+4>12，所以.col-xs-4另起一行
.col-xs-8
4+8<=12，所以.col-xs-8仍在該行中顯示
響應式布局一
所謂響應式布局就是針對不同解析度的裝置，可以呈現出不同的布局效果。如乙個 在pc上呈現一種布局效果，在pad上呈現的是一種布局效果，而在手機上所呈現的又是另一種布局效果。這種不同分別率裝置上呈現不同效果的布局方式就是響應式布局。css3為響應式布局提供了良好的支援，下面通過乙個簡單的例子來簡單學習一...
響應式布局（一）
meta name viewport content width device width,initial scale 1,maximum scale 1,user scalable no user scalable no 屬性能夠解決 ipad 切換橫屏之後觸控才能回到具體尺寸的問題 假如乙個終端...
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...