免費AI編程助手
網(wǎng)格布局
MDUI 提供了一套響應(yīng)式、移動設(shè)備優(yōu)先的 12 列網(wǎng)格布局系統(tǒng)。
相關(guān)資源
Material Design 響應(yīng)式 UI 設(shè)計規(guī)范
布局容器
MDUI 需要為頁面內(nèi)容和網(wǎng)格布局系統(tǒng)包裹一個 .mdui-container 容器。我們提供了兩個此作用的類。
.mdui-container 類占據(jù) 92% - 96% 的屏幕寬度，且最大寬度 1280px。
<body>
<div class="mdui-container">
...
</div>
</body>.mdui-container-fluid 類將始終占據(jù) 100% 的屏幕寬度。
<body>
<div class="mdui-container-fluid">
...
</div>
</body>基礎(chǔ)網(wǎng)格
.mdui-row 必須包含在 .mdui-container 或 .mdui-container-fluid 中，以便為其賦予合適的排列（aligment）和內(nèi)補（padding）。
在 .mdui-row 中包含若干個 .mdui-col-xs-[1-12] 類，其中 .mdui-col-xs-[1-12] 中的數(shù)字表示該元素占據(jù)多少列。
如果一行中包含的列大于 12，則多余的列將另起一行排列。
響應(yīng)式網(wǎng)格
- .mdui-col-xs-[1-12] 所有屏幕設(shè)備上都會生效，如手機、電腦等。
- .mdui-col-sm-[1-12] 在小屏幕及以上的設(shè)備上生效，如平板電腦。
- .mdui-col-md-[1-12] 在中等屏幕及以上的設(shè)備上生效，如筆記本電腦。
- .mdui-col-lg-[1-12] 在大屏幕及以上的設(shè)備上生效，如臺式電腦。
- .mdui-col-xl-[1-12] 在特大屏幕設(shè)備上生效，如電視。
混用這些類，可以達(dá)到響應(yīng)式的效果。
響應(yīng)式斷點如下：
| class | 區(qū)間 | 槽寬 |
| .mdui-col-xs-[1-12] | > 0 | 16px（每列左右均有 8px） |
| .mdui-col-sm-[1-12] | > 600px | 16px（每列左右均有 8px） |
| .mdui-col-md-[1-12] | > 1024px | 16px（每列左右均有 8px） |
| .mdui-col-lg-[1-12] | > 1440px | 16px（每列左右均有 8px） |
| .mdui-col-xl-[1-12] | > 1920px | 16px（每列左右均有 8px） |
列間距
默認(rèn)在列之間會有 16px 的間距，只需在 .mdui-row 上添加類 .mdui-row-gapless 即可消除列間距。
列偏移
使用 .mdui-col-offset-xs-[1-12]、.mdui-col-offset-sm-[1-12] 、 .mdui-col-offset-md-[1-12] 、 .mdui-col-offset-lg-[1-12] 和 .mdui-col-offset-xl-[1-12] 可以將列向右偏移，類名中的數(shù)字表示向右偏移多少列。
嵌套列
通過在已有的列中再添加新的 .mdui-row 和 .mdui-col-[*] 元素實現(xiàn)列的嵌套。被嵌套的行所包含的列不能超過 12 個。
等分列
在 .mdui-row-xs-[1-12] 中包含若干個含 .mdui-col 類的元素，這些元素會被等分。例如：.mdui-row-xs-5 中的每一個 .mdui-col 元素均占據(jù) 20% 的寬度。
混用 .mdui-row-xs-[1-12]、.mdui-row-sm-[1-12]、.mdui-row-md-[1-12]、.mdui-row-lg-[1-12]、.mdui-row-xl-[1-12] 可以實現(xiàn)響應(yīng)式布局。
CSS 類名列表
| 類名 | 效果 |
| .mdui-container | 有寬度限制的布局容器 |
| .mdui-container-fluid | 100% 寬度的布局容器 |
| .mdui-row | 定義行 |
| .mdui-col-[xs|sm|md|lg|xl]-[1-12] | 定義列 |
| .mdui-row-gapless | 消除列間距 |
| .mdui-col-offset-[xs|sm|md|lg|xl]-[1-12] | 列偏移 |
| .mdui-row-[xs|sm|md|lg|xl]-[1-12] | 等分列 |
更多建議：