柵格系統(tǒng)

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-*就可以很容易的改變列的順序。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末好芭,一起剝皮案震驚了整個濱河市燃箭,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌舍败,老刑警劉巖招狸,帶你破解...
    沈念sama閱讀 206,126評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件敬拓,死亡現(xiàn)場離奇詭異,居然都是意外死亡裙戏,警方通過查閱死者的電腦和手機乘凸,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來挽懦,“玉大人翰意,你說我怎么就攤上這事木人⌒攀粒” “怎么了?”我有些...
    開封第一講書人閱讀 152,445評論 0 341
  • 文/不壞的土叔 我叫張陵醒第,是天一觀的道長渔嚷。 經(jīng)常有香客問我,道長稠曼,這世上最難降的妖魔是什么形病? 我笑而不...
    開封第一講書人閱讀 55,185評論 1 278
  • 正文 為了忘掉前任,我火速辦了婚禮霞幅,結(jié)果婚禮上漠吻,老公的妹妹穿的比我還像新娘。我一直安慰自己司恳,他們只是感情好途乃,可當(dāng)我...
    茶點故事閱讀 64,178評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著扔傅,像睡著了一般耍共。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上猎塞,一...
    開封第一講書人閱讀 48,970評論 1 284
  • 那天试读,我揣著相機與錄音,去河邊找鬼荠耽。 笑死钩骇,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的铝量。 我是一名探鬼主播倘屹,決...
    沈念sama閱讀 38,276評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼款违!你這毒婦竟也來了唐瀑?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,927評論 0 259
  • 序言:老撾萬榮一對情侶失蹤插爹,失蹤者是張志新(化名)和其女友劉穎哄辣,沒想到半個月后请梢,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,400評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡力穗,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,883評論 2 323
  • 正文 我和宋清朗相戀三年毅弧,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片当窗。...
    茶點故事閱讀 37,997評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡够坐,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出崖面,到底是詐尸還是另有隱情元咙,我是刑警寧澤,帶...
    沈念sama閱讀 33,646評論 4 322
  • 正文 年R本政府宣布巫员,位于F島的核電站庶香,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏简识。R本人自食惡果不足惜赶掖,卻給世界環(huán)境...
    茶點故事閱讀 39,213評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望七扰。 院中可真熱鬧奢赂,春花似錦、人聲如沸颈走。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,204評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽疫鹊。三九已至袖瞻,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間拆吆,已是汗流浹背聋迎。 一陣腳步聲響...
    開封第一講書人閱讀 31,423評論 1 260
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留枣耀,地道東北人霉晕。 一個月前我還...
    沈念sama閱讀 45,423評論 2 352
  • 正文 我出身青樓,卻偏偏與公主長得像捞奕,于是被迫代替她去往敵國和親牺堰。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,722評論 2 345

推薦閱讀更多精彩內(nèi)容