本文關鍵詞：bootstrap，由筆耕文化傳播整理發(fā)布。

bootstrap 柵格系統(tǒng)

目錄
1、簡介
2、柵格選項
3、列偏移
4、嵌套列
5、列排序

1、簡介
bootstrap內(nèi)置了一套響應式、移動設備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕設備或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列。它包含了易于使用的預定義classe，還有強大的mixin用于生成更具語義的布局。

2、柵格選項
bootstrap3.x使用了四種柵格選項來形成柵格系統(tǒng)，這四種選項在官網(wǎng)上的介紹如下圖，很多人不理解，這里跟大家詳解一下四種柵格選項之間的區(qū)別，其實區(qū)別只有一條就是適合不同尺寸的屏幕設備。我們看class前綴這一項，我們姑且以前綴命名這四種柵格選項，他們分別是col-xs、col-sm、col-md、col-lg，我們懂英文的就知道，lg是large的縮寫，md是mid的縮寫，sm是small的縮寫，xs是***的縮寫。這樣命名就體現(xiàn)了這幾種class適應的屏幕寬度不同。下面我們分別介紹這幾種class的特點。

通過下表可以詳細查看bootstrap的柵格系統(tǒng)如何在多種屏幕設備上工作的。

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所包含的列加起來應該等于12。

5、列排序
通過使用.col-md-push-* 和 .col-md-pull-*就可以很容易的改變列的順序。

案例

request.getContextPath(); 柵格 .show-grid [class ^="col-"] { padding-top padding-bottom background-color border background-color border $(function(){ }); col-lg-*用法.col-lg-8.col-lg-4col-md-*用法.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-8.col-md-4col-sm-*用法.col-sm-8.col-sm-4col-xs-*用法.col-xs-8.col-xs-4列偏移: col-md-offset-*.col-md-4.col-md-4 .col-md-offset-4.col-md-3 .col-md-offset-3.col-md-3 .col-md-offset-3.col-md-6 .col-md-offset-3嵌套列: 嵌套row所包含的列加起來應該等于12 Level 1: .col-md-9 Level 2: .col-md-6Level 2: .col-md-6列排序: .col-md-push-*和.col-md-pull-*.col-md-9 .col-md-push-3.col-md-3 .col-md-pull-9

演示效果

如果，您認為閱讀這篇博客讓您有些收獲，不妨點擊一下右下角的【推薦】。
如果，您希望更容易地發(fā)現(xiàn)我的新博客，不妨點擊一下左下角的【關注我】。
如果，您對我的博客所講述的內(nèi)容有興趣，請繼續(xù)關注我的后續(xù)博客，我是【Ruthless】。

本文版權(quán)歸作者和博客園共有，歡迎轉(zhuǎn)載，但未經(jīng)作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權(quán)利。

posted on

  本文關鍵詞：bootstrap，由筆耕文化傳播整理發(fā)布。