成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

Donald / 2108人閱讀

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

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

Bootstrap4柵格系統(tǒng)

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

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

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

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

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

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

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

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

<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容器類下，也就是說上面的代碼外面還要再嵌套一層

，就是

<div class="container">div>

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

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

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

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

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

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

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

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

相關(guān)文章

  • bootstrap4源碼閱讀體會

    摘要：通過閱讀發(fā)現(xiàn)了不少知識的盲點(diǎn)和誤解，對有了更深入的理解?？偨Y(jié)幾點(diǎn)印象較深的體會，分享給大家。但是通過閱讀源碼改變了這種認(rèn)識模塊化很簡單靈活，這是其優(yōu)點(diǎn)，同時(shí)也是一個(gè)缺點(diǎn)。 歡迎到個(gè)人博客參觀: 點(diǎn)擊這里 bootstrap已經(jīng)使用了很長時(shí)間，但是從來沒有好好研究過其設(shè)計(jì)結(jié)構(gòu)，春節(jié)期間閑來無事就閱讀了源碼。通過閱讀發(fā)現(xiàn)了不少知識的盲點(diǎn)和誤解，對css有了更深入的理解。總結(jié)幾點(diǎn)印象較深的體...

    incredible 評論0 收藏0

  • 有關(guān)css柵格系統(tǒng)的故事

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

    legendaryedu 評論0 收藏0

  • css - 收藏集 - 掘金

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

    phpmatt 評論0 收藏0

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

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

    evin2016 評論0 收藏0

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

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

    silencezwm 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<