小編給大家分享一下Bootstrap有幾種柵格類可以使用,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
站在用戶的角度思考問題,與客戶深入溝通,找到信豐網(wǎng)站設計與信豐網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗,讓設計與互聯(lián)網(wǎng)技術(shù)結(jié)合,創(chuàng)造個性化、用戶體驗好的作品,建站類型包括:網(wǎng)站設計制作、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、主機域名、虛擬主機、企業(yè)郵箱。業(yè)務覆蓋信豐地區(qū)。什么是柵格系統(tǒng)
柵格系統(tǒng)是指,將頁面布局劃分為等寬的列,然后通過列數(shù)的定義來模塊化頁面布局。Bootstrap的柵格系統(tǒng)采用了1-12列的模式,并且通過比例計算來設置你定義的列寬。例如你這一行想要采用兩列的布局模式,那么每列的寬度都為外容器的50%,不管你用什么設備瀏覽,它都會采用這樣的比例進行展示。不過如果當設備寬度小于你設定的最小寬度,那么這兩列就會并排成為一列。
Bootstrap的柵格系統(tǒng)
在Bootstrap中使用柵格系統(tǒng)非常簡單方便,只需要在你的div中引入它們已經(jīng)定義好的類即可。
我們先看看Bootstrap有幾種柵格類可以使用:
1、.col-xs-* 這是超小屏幕類(<768px),類似手機等設備。
2、.col-sm-* 這是小屏幕設備類(≥768px且<992px),類似平板設備。
3、 .col-md-* 這是中型設備類(≥992px且<1200px)。
4、 .col-lg-* 這是大型設備類(≥1200px)。
如何使用Bootstrap柵格系統(tǒng)
你可以通過使用這些對應設備的柵格類來決定自己應用在不同設備上的布局樣式。例如:
這種編碼的結(jié)果就是,這兩個div在pc端瀏覽起來是兩行(每行都占據(jù)12列柵格),而在手機端瀏覽器來是一行兩列(每列占據(jù)6列柵格)。通過這種形式,就能很方便地使用柵格系統(tǒng)定制自己的應用布局了。其他信息
除了以上的使用方法之外,還能使用“列偏移類”來快速對自己的柵格進行定位,使用方法類似
按照這樣的寫法,這個div就會在pc端向右偏移 3列。看完了這篇文章,相信你對Bootstrap有幾種柵格類可以使用有了一定的了解,想了解更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道,感謝各位的閱讀!