Bootstrap4響應(yīng)式布局之柵格系統(tǒng)

Donald 發(fā)布于2019-04-23 13:11 / 2041人閱讀

摘要：前面說(shuō)了的下載和簡(jiǎn)單使用，現(xiàn)在我們接著往下學(xué)習(xí)，的響應(yīng)式布局主要依靠柵格系統(tǒng)來(lái)實(shí)現(xiàn)的。好了，柵格系統(tǒng)暫時(shí)先介紹到這了，有什么不懂的可以給老留言哦。

前面說(shuō)了Bootstrap4的下載和簡(jiǎn)單使用，現(xiàn)在我們接著往下學(xué)習(xí)，Bootstrap4的響應(yīng)式布局主要依靠柵格系統(tǒng)來(lái)實(shí)現(xiàn)的。面老K先來(lái)講解一下Bootstrap4的柵格系統(tǒng)，讓你能夠更快的了解Bootstrap4.（PS：更詳細(xì)的介紹請(qǐng)?jiān)L問原K先生的博客）

Bootstrap4柵格系統(tǒng)

柵格系統(tǒng)是基于一個(gè)12列、有5種響應(yīng)尺寸(對(duì)應(yīng)不同的屏幕）的布局。Bootstrap4柵格系統(tǒng)共有五個(gè)類：

.col- 針對(duì)所有設(shè)備?

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

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

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

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

這些類的意思通俗點(diǎn)說(shuō)就是，當(dāng)你同時(shí)使用這些類的時(shí)候，它會(huì)根據(jù)你的屏幕大小來(lái)使相應(yīng)的類生效。

下面我們?cè)賮?lái)看一下，這些類是怎么使用的?

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

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

最后在補(bǔ)充一點(diǎn)，柵格系統(tǒng)必須放在container容器類下，也就是說(shuō)上面的代碼外面還要再嵌套一層

，就是

<div class="container">div>

接下來(lái)我們來(lái)看Bootstrap4柵格系統(tǒng)另一種使用方法：??

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

下面是屏幕分辨率符合.col-sm- 平板 - 屏幕寬度等于或大于 576px時(shí)的布局。這時(shí)我們可以看到電影列表從一行6個(gè)變?yōu)榱艘恍?個(gè)，也就是說(shuō)它根據(jù)屏幕大小自動(dòng)排列變化了這就是響應(yīng)式。?

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

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

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