1、簡介
Bootstrap內(nèi)置了一套響應(yīng)式博投、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)绸贡,隨著屏幕設(shè)備或視口(viewport)尺寸的增加,系統(tǒng)會自動分為最多12列。它包含了易于使用的預(yù)定義classe听怕,還有強大的mixin用于生成更具語義的布局捧挺。
2、柵格選項
bootstrap3.x使用了四種柵格選項來形成柵格系統(tǒng)尿瞭,這四種選項在官網(wǎng)上的介紹如下圖闽烙,很多人不理解,這里跟大家詳解一下四種柵格選項之間的區(qū)別声搁,其實區(qū)別只有一條就是適合不同尺寸的屏幕設(shè)備黑竞。我們看class前綴這一項,我們姑且以前綴命名這四種柵格選項疏旨,他們分別是col-xs很魂、col-sm、col-md檐涝、col-lg遏匆,我們懂英文的就知道,lg是large的縮寫骤铃,md是mid的縮寫拉岁,sm是small的縮寫,xs是***的縮寫惰爬。這樣命名就體現(xiàn)了這幾種class適應(yīng)的屏幕寬度不同喊暖。下面我們分別介紹這幾種class的特點。
通過下表可以詳細查看Bootstrap的柵格系統(tǒng)如何在多種屏幕設(shè)備上工作的撕瞧。
3陵叽、列偏移
使用.col-md-offset-*可以將列偏移到右側(cè)。這些class通過使用*選擇器將所有列增加了列的左側(cè)margin丛版。例如巩掺,.col-md-offset-4將.col-md-4向右移動了4個列的寬度。
4页畦、嵌套列
為了使用內(nèi)置的柵格將內(nèi)容嵌套胖替,通過添加一個新的.row和一系列.col-md-*列到已經(jīng)存在的.col-md-*列內(nèi)即可實現(xiàn)。嵌套row所包含的列加起來應(yīng)該等于12豫缨。
5独令、列排序
通過使用.col-md-push-* 和 .col-md-pull-*就可以很容易的改變列的順序。