溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“bootstrap的柵格系統有哪些作用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“bootstrap的柵格系統有哪些作用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
在bootstrap中，柵格系統的作用是讓同一套頁面可以適應不同分辨率的設備；該系統將每一行平均分為12個格子，然后指定同一個元素在不同設備上占用的格子數目不同，從而實現不同設備的頁面布局。
本教程操作環境：Windows10系統、bootstrap3.3.7版、DELL G3電腦
1.bootstrap柵格系統：作用就是使得同一套頁面可以適應不同的分辨率的設備
2.柵格系統的實現：將每一行平均分為12個格子，然后指定同一個元素在手機設備和pc設備上占用的格子數目不同，例如：一個div占用電腦4個格子，在手機上占用12個格子
3.步驟
1.定義容器：相當于table 表格
*容器分類：
1.container：固定寬度隨著不同設備而不同（留白）
2.container-fluid：100%
2.定義行：相當于tr 樣式：row
3.定義元素：指定該元素在不同的設備上，所占的格子數目。樣式：col-設備代號-格子數目
*設備代號：
1.xs：超小屏幕 手機（768px）：col-xs-12
2.sm：小屏幕 平板（>=768px）
3.md：中等屏幕 桌面顯示器（>=992px）
4.lg：大屏幕 大桌面顯示器（>=1200px）
**注意：一行中如果格子的數目超過12個，超出的部分自動換行
**注意：定義的類屬性可以向上兼容，而向下不兼容，如果設備的寬度小于你設置的柵格類屬性的設備的代號的最小值，默認會一個元素占滿一整行。
讀到這里，這篇“bootstrap的柵格系統有哪些作用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
