bootstrap解析-柵格系統(tǒng)

singerye 發(fā)布于2019-08-01 16:57 / 3399人閱讀

.container(布局容器)

屏幕寬1200px以上（col-lg）

1. 默認(rèn)width為1170px
2. padding,lefet和right各為15px,所以內(nèi)容width為1140px;

屏幕寬992px以上(col-md)

1. 默認(rèn)width為970px
2. padding,lefet和right各為15px,所以內(nèi)容width為940px;

屏幕寬768px以上(col-sm)

1. 默認(rèn)width為750px
2. padding,lefet和right各為15px,所以內(nèi)容width為720px;

屏幕寬768px以下(col-xs)

1. 默認(rèn)width為100%
2. padding,lefet和right各為15px,所以內(nèi)容width為100%-30px;

.container-fluid(流式布局容器)

1. width為100%
2. 其他和.container一樣

.row(行)

1. 默認(rèn)margin-left和margin-right為-15px;
2. 這樣就抵消掉了.container的padding,row的顯示區(qū)域width就為.container的width了
3. 利用::after清楚浮動

.col-(列)

1. 用@media來設(shè)置width對應(yīng)百分比
2. padding,lefet和right各為15px
3. float:left
4. position:relative
5. min-height:1px

.col-*-offset-(移動)

1. 利用@media來設(shè)置margin-left相應(yīng)的百分比

.col--push-和.col--pull-(列排序)

1. 由于col-設(shè)置了posistion:relative所以通過設(shè)置left(push)和righ(pull)來改變節(jié)點的位置。

其他情況 列的高度不同時

解決 .clearfix(清除浮動)

1. 由于列都浮動了，所以閾值時會產(chǎn)生一些問題，所需要配合清除相應(yīng)位置的浮動來解決

列大于12時

1. 由于列浮動了，所以超出的列會自動換行排列

嵌套

1. 由于以上屬性設(shè)置，所以嵌套寫.row和.col-就可以

bootstrap的柵格系統(tǒng)基本就是這些，所以也沒什么神秘的，你自己也完全可以寫出自己的柵格系統(tǒng)來。
本篇博文首發(fā)于本人個人博客，查看更多點這里

云服務(wù)器 GPU云服務(wù)器 bootstrap柵格系統(tǒng) bootstrap柵格柵格系統(tǒng)原理 bootstrap3網(wǎng)格系統(tǒng)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/50859.html

相關(guān)文章

bootstrap解析-柵格系統(tǒng)

.container(布局容器) 屏幕寬1200px以上（col-lg） 1. 默認(rèn)width為1170px 2. padding,lefet和right各為15px,所以內(nèi)容width為1140px; 屏幕寬992px以上(col-md) 1. 默認(rèn)width為970px 2. padding,lefet和right各為15px,所以內(nèi)容width為940px; 屏幕寬768px以上(col...

BothEyes1993 2019-08-29 12:42 評論0 收藏0
深入新版BS4源碼探索flex和工程化sass奧秘

摘要：這個接受三個參數(shù)表示柵格數(shù)目默認(rèn)為默認(rèn)為表示斷點設(shè)置，這是一個全局變量，為類型。你可能已經(jīng)聽說了一個大新聞：Bootstrap4 合并了代號為#21389的PR，宣布放棄支持IE9，并默認(rèn)使用flexbox彈性盒模型。這標(biāo)志著：1）前端開發(fā)全面步入現(xiàn)代瀏覽器的時代進(jìn)一步來臨；2）樣式處理也再一次面向未來，擁抱更加靈活的彈性盒模型－Flex布局。這篇文章會帶你深入Bootstrap最...

evin2016 2019-08-21 11:30 評論0 收藏0
深入新版BS4源碼探索flex和工程化sass奧秘

摘要：這個接受三個參數(shù)表示柵格數(shù)目默認(rèn)為默認(rèn)為表示斷點設(shè)置，這是一個全局變量，為類型。你可能已經(jīng)聽說了一個大新聞：Bootstrap4 合并了代號為#21389的PR，宣布放棄支持IE9，并默認(rèn)使用flexbox彈性盒模型。這標(biāo)志著：1）前端開發(fā)全面步入現(xiàn)代瀏覽器的時代進(jìn)一步來臨；2）樣式處理也再一次面向未來，擁抱更加靈活的彈性盒模型－Flex布局。這篇文章會帶你深入Bootstrap最...

silencezwm 2019-08-30 15:52 評論0 收藏0
深入新版BS4源碼探索flex和工程化sass奧秘

摘要：這個接受三個參數(shù)表示柵格數(shù)目默認(rèn)為默認(rèn)為表示斷點設(shè)置，這是一個全局變量，為類型。你可能已經(jīng)聽說了一個大新聞：Bootstrap4 合并了代號為#21389的PR，宣布放棄支持IE9，并默認(rèn)使用flexbox彈性盒模型。這標(biāo)志著：1）前端開發(fā)全面步入現(xiàn)代瀏覽器的時代進(jìn)一步來臨；2）樣式處理也再一次面向未來，擁抱更加靈活的彈性盒模型－Flex布局。這篇文章會帶你深入Bootstrap最...

Enlightenment 2019-08-01 16:16 評論0 收藏0
Bootstrap網(wǎng)格系統(tǒng)

摘要：柵格系統(tǒng)中的列是通過指定到的值來表示其跨越的范圍。實例下圖是一個柵格系統(tǒng)，共有四行。然后在根目錄中，使用命令，可以自動將源代碼編譯成，放在目錄中。什么是Bootstrap Bootstrap是一個用于快速開發(fā)Web應(yīng)用程序和網(wǎng)站的前端框架，它包括HTML,CSS,JS等。它是由Twitter開發(fā)，現(xiàn)在成為Github上最為流行的前端開發(fā)框架。它提供了一套響應(yīng)式，移動設(shè)備優(yōu)先的流式柵格...

ISherry 2019-08-30 13:07 評論0 收藏0