Bootstrap 柵格系統

一、簡介

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

二、柵格選項
bootstrap3.x使用了四種柵格選項來造成柵格系統，這四種選項在官網上的介紹以下圖，不少人不理解，這裏跟你們詳解一下四種柵格選項之間的區別，其實區別只有一條就是適合不一樣尺寸的屏幕設備。咱們看class前綴這一項，咱們姑且之前綴命名這四種柵格選項，他們分別是col-xs、col-sm、col-md、col-lg，咱們懂英文的就知道，lg是large的縮寫，md是mid的縮寫，sm是small的縮寫，xs是***的縮寫。這樣命名就體現了這幾種class適應的屏幕寬度不一樣。下面咱們分別介紹這幾種class的特色。

經過下表能夠詳細查看Bootstrap的柵格系統如何在多種屏幕設備上工做的。

三、列偏移
使用.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-*就能夠很容易的改變列的順序。