網格系統，也叫柵格系統，是bs中最常用也是最核心的布局方式。大家知道，乙個前端介面是由多個塊級元素組建而成，而我們常用到的塊級元素就是div，網格系統就是將乙個div劃為等分12列。為了使網格系統能支援不同的解析度，網格的列定義也分為了4種型別，分別是.col-xs、.col-sm、.col-md、.col-lg，它們與解析度寬度的對應關係如下：
超小裝置手機（<768px）用.col-xs-表示
小型裝置平板電腦（≥768px）用.col-sm-表示
中型裝置台式電腦（≥992px）用.col-md-表示
大型裝置台式電腦（≥1200px）用.col-lg-表示
舉個例子，我們建立乙個包含3列的div塊級元素，列的比例為4:1:1，當螢幕寬度小於768px時，列比例變為1:1:1
col-xs-4 col-sm-8
col-xs-4 col-sm-2
col-xs-4 col-sm-2
解析度大於或等於
768px時，
解析度小於
768px時，
由例子可以看到，當螢幕寬度畫素變化時，樣式為row的塊級div元素顯示的內部布局也會自動變化，這就是網格系統的強大之處。注意一點， 當沒有更大屏寬度畫素的約定時，元素將自動繼承較小的螢幕寬度畫素的約定。如上例中並沒有設定.col-md和.col-lg的約定，該元素自動繼承.col-sm的約定。
（注）樣式為row的塊級div元素允許設定具體的寬度畫素。
網格系統還有兩個很常用的api，它們是列偏移和列排序功能。
偏列移是乙個用於更專業的布局的有用功能，它可用來給列騰出更多的空間。網格系統的列布局類似於流式布局，一列挨著一列。當中間列隱藏時，其它列會按流式布局的方式自動補充上來。比如要實現當不需要中間列，但又不想其它列自動補充上來的效果，**如下：
col-xs-8
col-xs-2 col-sm-offset-2
列偏移通過新增樣式.col-md-offset-*實現，它會把乙個列的左外邊距（margin）增加 * 列，其中 * 範圍是從 1 到 11。
列排序，就是把div看做成包含12個插槽的一橫，push就是把列往後推，pull就是把列往前拉。如.col-md-pull-1就是把該列在原來插槽的位置上往前拉至前乙個插槽。演示原始碼如下：
排序前
col-md-1
col-md-2
col-md-9
排序後col-md-1
col-md-2
col-md-9
.col-md-push-*和.col-md-pull-*，其中 * 範圍也是從 1 到 11。
響應式的前端框架 Groundwork
前面我們介紹過了很多響應式的前端框架，例如，responsive boilerplate，centurion等等，在這篇文章中我們將再介紹乙個響應式的前端框架 groundwork。groundwork是另外乙個超棒的響應式前端框架，使用sass和compass並且提供了乙個高階的響應式布局。擁有了...
響應式前端框架Bootstrap系列（13）進度條
進度條使用 css3 過渡和動畫來獲得該效果。internet explorer 9 及之前的版本和舊版的 firefox 不支援該特性，opera 12 不支援動畫。進度條的顏色樣式有以下幾種 progress bar success progress bar info progress bar ...
前端響應式原理
響應式布局指的是同一頁面在不同螢幕尺寸下有不同的布局 響應式設計與自適應設計的區別 響應式開發一套介面，通過檢測視口解析度，針對不同客戶端在客戶端做 處理，來展現不同的布局和內容 自適應需要開發多套介面，通過檢測視口解析度，來判斷當前訪問的裝置是pc端 平板 手機，從而請求服務層，返回不同的頁面 方...