MDUI 提供了一套响应式、移动设备优先的 12 列网格布局系统。
MDUI 需要为页面内容和网格布局系统包裹一个 .mdui-container
容器。我们提供了两个此作用的类。
.mdui-container
类占据 92% - 96% 的屏幕宽度,且最大宽度 1280px。
<body>
<div class="mdui-container">
...
</div>
</body>
.mdui-container-fluid
类将始终占据 100% 的屏幕宽度。
<body>
<div class="mdui-container-fluid">
...
</div>
</body>
.mdui-row
必须包含在 .mdui-container
或 .mdui-container-fluid
中,以便为其赋予合适的排列(aligment)和内补(padding)。
在 .mdui-row
中包含若干个 .mdui-col-xs-[1-12]
类,其中 .mdui-col-xs-[1-12]
中的数字表示该元素占据多少列。
如果一行中包含的列大于 12,则多余的列将另起一行排列。
<div class="mdui-row">
<div class="mdui-col-xs-3">.mdui-col-xs-3</div>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-6">.mdui-col-xs-6</div>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-9">.mdui-col-xs-9</div>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-12">.mdui-col-xs-12</div>
</div>
.mdui-col-xs-[1-12]
所有屏幕设备上都会生效,如手机、电脑等。 .mdui-col-sm-[1-12]
在小屏幕及以上的设备上生效,如平板电脑。 .mdui-col-md-[1-12]
在中等屏幕及以上的设备上生效,如笔记本电脑。 .mdui-col-lg-[1-12]
在大屏幕及以上的设备上生效,如台式电脑。 .mdui-col-xl-[1-12]
在特大屏幕设备上生效,如电视。混用这些类,可以达到响应式的效果。
响应式断点如下:
class | 区间 | 槽宽 |
---|---|---|
.mdui-col-xs-[1-12] | > 0 | 16px(每列左右均有 8px) |
.mdui-col-sm-[1-12] | > 600px | |
.mdui-col-md-[1-12] | > 1024px | |
.mdui-col-lg-[1-12] | > 1440px | |
.mdui-col-xl-[1-12] | > 1920px |
<!-- 在超小屏幕设备上,第一列 100% 宽度,第二列 50% 宽度。在小屏幕及以上设备上,第一列为 66.6% 宽度,第二列为 33.3% 宽度。 -->
<div class="mdui-row">
<div class="mdui-col-xs-12 mdui-col-sm-8">.mdui-col-xs-12<br/>.mdui-col-sm-8</div>
<div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
</div>
<!-- 在超小屏幕设备上每列都是 50% 宽度,在小屏幕及以上设备上每列 33.3% 宽度。 -->
<div class="mdui-row">
<div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
<div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
<div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
</div>
<!-- 在所有设备上,每列都是 50% 宽度。 -->
<div class="mdui-row">
<div class="mdui-col-xs-6">.mdui-col-xs-6</div>
<div class="mdui-col-xs-6">.mdui-col-xs-6</div>
</div>
<div class="mdui-row mdui-row-gapless">
<div class="mdui-col-xs-4">mdui-col-xs-4</div>
<div class="mdui-col-xs-4">mdui-col-xs-4</div>
<div class="mdui-col-xs-4">mdui-col-xs-4</div>
</div>
使用 .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]
可以将列向右偏移,类名中的数字表示向右偏移多少列。
<div class="mdui-row">
<div class="mdui-col-md-4">.mdui-col-md-4</div>
<div class="mdui-col-md-4 mdui-col-offset-md-4">.mdui-col-md-4 .mdui-col-offset-md-4</div>
</div>
<div class="mdui-row">
<div class="mdui-col-md-3 mdui-col-offset-md-3">.mdui-col-md-3<br/>.mdui-col-offset-md-3</div>
<div class="mdui-col-md-3 mdui-col-offset-md-3">.mdui-col-md-3<br/>.mdui-col-offset-md-3</div>
</div>
<div class="mdui-row">
<div class="mdui-col-md-6 mdui-col-offset-md-3">.mdui-col-md-6<br/>.mdui-col-offset-md-3</div>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-9">
Level 1: .col-xs-9
<div class="mdui-row">
<div class="mdui-col-xs-8 mdui-col-sm-6">Level 2: .col-xs-8 .col-sm-6</div>
<div class="mdui-col-xs-4 mdui-col-sm-6">Level 2: .col-xs-4 .col-sm-6</div>
</div>
</div>
</div>
在 .mdui-row-xs-[1-12]
中包含若干个含 .mdui-col
类的元素,这些元素会被等分。例如:.mdui-row-xs-5
中的每一个 .mdui-col
元素均占据 20% 的宽度。
<div class="mdui-row-xs-5">
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
</div>
混用 .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]
可以实现响应式布局。