国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

bootstrap解析-柵格系統

singerye / 3395人閱讀

.container(布局容器)
屏幕寬1200px以上（col-lg）
1. 默認width為1170px
2. padding,lefet和right各為15px,所以內容width為1140px;
屏幕寬992px以上(col-md)
1. 默認width為970px
2. padding,lefet和right各為15px,所以內容width為940px;
屏幕寬768px以上(col-sm)
1. 默認width為750px
2. padding,lefet和right各為15px,所以內容width為720px;
屏幕寬768px以下(col-xs)
1. 默認width為100%
2. padding,lefet和right各為15px,所以內容width為100%-30px;
.container-fluid(流式布局容器) 
1. width為100%
2. 其他和.container一樣
.row(行) 
1. 默認margin-left和margin-right為-15px;
2. 這樣就抵消掉了.container的padding,row的顯示區域width就為.container的width了
3. 利用::after清楚浮動
.col-(列) 
1. 用@media來設置width對應百分比
2. padding,lefet和right各為15px
3. float:left
4. position:relative
5. min-height:1px
.col-*-offset-(移動) 
1. 利用@media來設置margin-left相應的百分比
.col--push-和.col--pull-(列排序) 
1. 由于col-設置了posistion:relative所以通過設置left(push)和righ(pull)來改變節點的位置。
其他情況 列的高度不同時
解決 .clearfix(清除浮動)
1. 由于列都浮動了，所以閾值時會產生一些問題，所需要配合清除相應位置的浮動來解決
列大于12時 
1. 由于列浮動了，所以超出的列會自動換行排列
嵌套 
1. 由于以上屬性設置，所以嵌套寫.row和.col-就可以

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50859.html

相關文章

  • bootstrap解析-柵格系統

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

    BothEyes1993 評論0 收藏0

  • 深入新版BS4源碼 探索flex和工程化sass奧秘

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

    evin2016 評論0 收藏0

  • 深入新版BS4源碼 探索flex和工程化sass奧秘

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

    silencezwm 評論0 收藏0

  • 深入新版BS4源碼 探索flex和工程化sass奧秘

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

    Enlightenment 評論0 收藏0

  • Bootstrap網格系統

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

    ISherry 評論0 收藏0

發表評論

0條評論

singerye

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<