Bootstrap學習——柵格系統

Bootstrap內置了一套響應式、移動設備優先的流式柵格系統，隨着屏幕設備或視口（viewport）尺寸的增長，系統會自動分爲最多12列。它包含了易於使用的預約義classe，還有強大的mixin用於生成更具語義的佈局。

簡介

柵格系統用於經過一系列的行（row）與列（column）的組合建立頁面佈局，你的內容就能夠放入建立好的佈局中。下面就介紹如下Bootstrap柵格系統的工做原理：

• 「行（row）」必須包含在.container中，以便爲其賦予合適的排列（aligment）和內補（padding）。
• 使用「行（row）」在水平方向建立一組「列（column）」。
• 你的內容應當放置於「列（column）」內，並且，只有「列（column）」能夠做爲行（row）」的直接子元素。
• 相似Predefined grid classes like .row and .col-xs-4 這些預約義的柵格class能夠用來快速建立柵格佈局。Bootstrap源碼中定義的mixin也能夠用來建立語義化的佈局。
• 經過設置padding從而建立「列（column）」之間的間隔（gutter）。而後經過爲第一和最後同樣設置負值的margin從而抵消掉padding的影響。
• 柵格系統中的列是經過指定1到12的值來表示其跨越的範圍。例如，三個等寬的列能夠使用三個.col-xs-4來建立。

Responsive column resets

即使有上面給出的四組柵格class，你也難免會碰到一些問題，例如，在某些閾值時，某些列可能會出現比別的列高的狀況。爲了克服這一問題，建議聯合使用.clearfix和響應式工具classe。

 <div class="row">
      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3(經過調整瀏覽器的寬度或在手機上便可查看這些案例的實際效果。)</div>
      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
      <div class="clearfix visible-xs"></div>
      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    </div>

 

列偏移

使用.col-md-offset-*能夠將列偏移到右側。這些class經過使用*選擇器將全部列增長了列的左側margin。例如，.col-md-offset-4將.col-md-4向右移動了4個列的寬度。

嵌套列

爲了使用內置的柵格將內容嵌套，經過添加一個新的.row和一系列.col-md-*列到已經存在的.col-md-*列內便可實現。嵌套row所包含的列加起來應該等於12。

列排序

經過使用.col-md-push-* 和 .col-md-pull-*就能夠很容易的改變列的順序。