Bootstrap4響應式布局之柵格系統

Donald 發布于2019-04-23 13:11 / 2046人閱讀

摘要：前面說了的下載和簡單使用，現在我們接著往下學習，的響應式布局主要依靠柵格系統來實現的。好了，柵格系統暫時先介紹到這了，有什么不懂的可以給老留言哦。

前面說了Bootstrap4的下載和簡單使用，現在我們接著往下學習，Bootstrap4的響應式布局主要依靠柵格系統來實現的。面老K先來講解一下Bootstrap4的柵格系統，讓你能夠更快的了解Bootstrap4.（PS：更詳細的介紹請訪問原K先生的博客）

Bootstrap4柵格系統

柵格系統是基于一個12列、有5種響應尺寸(對應不同的屏幕）的布局。Bootstrap4柵格系統共有五個類：

.col- 針對所有設備?

.col-sm- 平板 - 屏幕寬度等于或大于 576px

.col-md- 桌面顯示器 - 屏幕寬度等于或大于 768px)

.col-lg- 大桌面顯示器 - 屏幕寬度等于或大于 992px)

.col-xl- 超大桌面顯示器 - 屏幕寬度等于或大于 1200px)

這些類的意思通俗點說就是，當你同時使用這些類的時候，它會根據你的屏幕大小來使相應的類生效。

下面我們再來看一下，這些類是怎么使用的?

<div class="row">
    <div class="col-9">這個div中放置輪播圖片，并且它占9列div>
    <div class="col-3">這個div中放置排行榜，并且它占3列div>
div>

我們需要把col類放到row類下，并且同一行中的數字相加為12，也就是上面代碼中的col類，下面是大致效果圖

最后在補充一點，柵格系統必須放在container容器類下，也就是說上面的代碼外面還要再嵌套一層

，就是

<div class="container">div>

接下來我們來看Bootstrap4柵格系統另一種使用方法：??

下面這也是用柵格系統做的響應式布局，這是屏幕分辨率符合.col-md- 桌面顯示器 - 屏幕寬度等于或大于 768px)時的布局情況??

下面是屏幕分辨率符合.col-sm- 平板 - 屏幕寬度等于或大于 576px時的布局。這時我們可以看到電影列表從一行6個變為了一行4個，也就是說它根據屏幕大小自動排列變化了這就是響應式。?

下面我們看一下大致的布局代碼

class="container">
  class="row">
    class="col-md-2 col-sm-3">這個div中放置要顯示的各個電影

相信大家都能從這簡單的代碼中抓到重點。沒錯那就是col-md-2和col-sm-3類，我們前面說過柵格系統分為12列，也就是說一行會有12列，col-md-2的意思時每個電影圖占據2個列，也就是說要滿足一行12列，就需要一行出現6個電影圖，如上圖確實是出現了六個電影圖；col-sm-3類同理，4個電影圖，3*4=12。好了，柵格系統暫時先介紹到這了，有什么不懂的可以給老K留言哦。

云服務器 GPU云服務器響應式布局 asp如何響應式布局 html響應式導布局響應式

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

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

bootstrap4源碼閱讀體會

摘要：通過閱讀發現了不少知識的盲點和誤解，對有了更深入的理解。總結幾點印象較深的體會，分享給大家。但是通過閱讀源碼改變了這種認識模塊化很簡單靈活，這是其優點，同時也是一個缺點。歡迎到個人博客參觀: 點擊這里 bootstrap已經使用了很長時間，但是從來沒有好好研究過其設計結構，春節期間閑來無事就閱讀了源碼。通過閱讀發現了不少知識的盲點和誤解，對css有了更深入的理解。總結幾點印象較深的體...

incredible 2019-08-30 12:45 評論0 收藏0
有關css柵格系統的故事

摘要：下面，本文將介紹幾個比較有代表性的柵格樣式庫，講述它們的簡要原理和用法正確的打開方式。雖然柵格樣式庫很棒，但它們并不是響應式設計的全部。但在這個過程中，理解各類柵格樣式庫的工作原理，正確使用它們，才能做出穩定可靠的頁面結構。說到柵格系統（grid system），你也許見過這樣的概念： showImg(https://segmentfault.com/img/bVmQnO); 像這樣...

legendaryedu 2019-08-28 18:12 評論0 收藏0
css - 收藏集 - 掘金

摘要：絕對底部前端掘金來自國外的設計達人，純，可以實現當正文內容很少時，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設計達人，純CSS，可以實現: 當正文內容很少時，底部位于窗口最下面。當改變窗口高度時，不會出現重疊問題。甚至，創造該CSS的人還專門成立一個網站介紹這個CSS底部布局方案...

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

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

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

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

silencezwm 2019-08-30 15:52 評論0 收藏0