建站
咨詢
售后
建站咨詢
新聞中心
本文小編為大家詳細介紹“bootstrap的柵格系統(tǒng)有哪些作用”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“bootstrap的柵格系統(tǒng)有哪些作用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
成都創(chuàng)新互聯(lián)公司專注于江寧企業(yè)網(wǎng)站建設,響應式網(wǎng)站,商城網(wǎng)站定制開發(fā)。江寧網(wǎng)站建設公司,為江寧等地區(qū)提供建站服務。全流程按需網(wǎng)站開發(fā)，專業(yè)設計，全程項目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務
在bootstrap中，柵格系統(tǒng)的作用是讓同一套頁面可以適應不同分辨率的設備；該系統(tǒng)將每一行平均分為12個格子，然后指定同一個元素在不同設備上占用的格子數(shù)目不同，從而實現(xiàn)不同設備的頁面布局。
本教程操作環(huán)境：Windows10系統(tǒng)、bootstrap3.3.7版、DELL G3電腦
bootstrap的柵格系統(tǒng)有什么用
1.bootstrap柵格系統(tǒng)：作用就是使得同一套頁面可以適應不同的分辨率的設備
2.柵格系統(tǒng)的實現(xiàn)：將每一行平均分為12個格子，然后指定同一個元素在手機設備和pc設備上占用的格子數(shù)目不同，例如：一個div占用電腦4個格子，在手機上占用12個格子
3.步驟
1.定義容器：相當于table 表格
*容器分類：
1.container：固定寬度隨著不同設備而不同（留白）
2.container-fluid：100%
2.定義行：相當于tr 樣式：row
3.定義元素：指定該元素在不同的設備上，所占的格子數(shù)目。樣式：col-設備代號-格子數(shù)目
*設備代號：
1.xs：超小屏幕 手機（768px）：col-xs-12
2.sm：小屏幕 平板（>=768px）
3.md：中等屏幕 桌面顯示器（>=992px）
4.lg：大屏幕 大桌面顯示器（>=1200px）
**注意：一行中如果格子的數(shù)目超過12個，超出的部分自動換行
**注意：定義的類屬性可以向上兼容，而向下不兼容，如果設備的寬度小于你設置的柵格類屬性的設備的代號的最小值，默認會一個元素占滿一整行。
讀到這里，這篇“bootstrap的柵格系統(tǒng)有哪些作用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內(nèi)容的文章，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
新聞標題：bootstrap的柵格系統(tǒng)有哪些作用
本文路徑：http://fisionsoft.com.cn/article/jpseci.html
