这一系列工具类可以为元素添加 margin
和 padding
,默认值都是 8px 的倍数。
类名格式为:.mdui-{属性}-{方向}-{大小}
属性:
m
- 设置 margin
p
- 设置 padding
方向:
t
- 设置 margin-top
或 padding-top
b
- 设置 margin-bottom
或 padding-bottom
l
- 设置 margin-left
或 padding-left
r
- 设置 margin-right
或 padding-right
x
- 设置 margin-left
margin-right
或 padding-left
padding-right
y
- 设置 margin-top
margin-bottom
或 padding-top
padding-bottom
a
- 设置 margin
或 padding
大小:
0
- 0px
1
- 8px
2
- 16px
3
- 24px
4
- 32px
5
- 40px
.mdui-m-t-0 {
margin-top: 0 !important;
}
.mdui-m-l-1 {
margin-left: 8px !important;
}
.mdui-p-x-2 {
padding-left: 16px !important;
padding-right: 16px !important;
}
.mdui-p-a-5 {
padding: 40px !important;
}
快速浮动
.mdui-float-left
使元素向左浮动
.mdui-float-right
使元素向右浮动
Example
<div class="mdui-float-left">float left</div>
<div class="mdui-float-right">float right</div>
水平居中
为任意元素添加类 .mdui-center
即可使其水平居中。
Example
<div class="mdui-center" style="width: 200px">mdui-center</div>
垂直居中
为任意元素添加类 .mdui-valign
,即可使该元素中的子元素垂直居中。
Example
This should be vertically aligned
<div class="mdui-valign">
<p class="mdui-center">This should be vertically aligned</p>
</div>
水平对齐方式
.mdui-text-left
使文本左对齐。
.mdui-text-center
使文本居中对齐。
.mdui-text-right
使文本右对齐。
Example
This should be left aligned
This should be center aligned
This should be right aligned
<div class="mdui-text-left">This should be left aligned</div>
<div class="mdui-text-center">This should be center aligned</div>
<div class="mdui-text-right">This should be right aligned</div>
文本大小写转换
.mdui-text-lowercase
把文本转为小写。
.mdui-text-uppercase
把文本转为大写。
.mdui-text-capitalize
把文本转为单词的首字母大写。
Example
Lowercased text.
Uppercased text.
Capitalized text.
<p class="mdui-text-lowercase">Lowercased text.</p>
<p class="mdui-text-uppercase">Uppercased text.</p>
<p class="mdui-text-capitalize">Capitalized text.</p>
文本自动截断
.mdui-text-truncate
可以在文本长度超出限制时,自动截断,并用省略号代替。
Example
这是一段非常非常非常非常非常非常非常非常非常非常非常非常长的文字。
<p class="mdui-text-truncate" style="max-width: 200px;">这是一段非常非常非常非常非常非常非常非常非常非常非常非常长的文字。</p>
清除浮动
为父元素添加 .mdui-clearfix
类可以清除浮动
Example
mdui-float-left
mdui-float-right
<div class="mdui-clearfix">
<div class="mdui-float-left">mdui-float-left</div>
<div class="mdui-float-right">mdui-float-right</div>
</div>
隐藏内容
.mdui-hidden
类用于隐藏元素,相当于添加样式 display: none;
,隐藏后的元素不占据页面空间。
.mdui-invisible
类用于使元素不可见,但依然会占据页面上的空间,相当于添加样式 visibility: hidden;
。
响应式工具
这些工具类通过媒体查询实现针对不同设备隐藏内容。这些工具类包括:
.mdui-hidden-*
:在指定宽度的设备上隐藏。
.mdui-hidden-*-up
:在指定宽度及以上的设备上隐藏。
.mdui-hidden-*-down
:在指定宽度及以下的设备上隐藏。
|
超小屏幕 <600px |
小屏幕 >=600px - <1024px |
中等屏幕 >=1024px - <1440px |
大屏幕 >=1440px - <1920px |
超大屏幕 >=1920px |
.mdui-hidden-xs |
隐藏 |
可见 |
可见 |
可见 |
可见 |
.mdui-hidden-sm |
可见 |
隐藏 |
可见 |
可见 |
可见 |
.mdui-hidden-md |
可见 |
可见 |
隐藏 |
可见 |
可见 |
.mdui-hidden-lg |
可见 |
可见 |
可见 |
隐藏 |
可见 |
.mdui-hidden-xl |
可见 |
可见 |
可见 |
可见 |
隐藏 |
.mdui-hidden-xs-down |
隐藏 |
可见 |
可见 |
可见 |
可见 |
.mdui-hidden-sm-down |
隐藏 |
隐藏 |
可见 |
可见 |
可见 |
.mdui-hidden-md-down |
隐藏 |
隐藏 |
隐藏 |
可见 |
可见 |
.mdui-hidden-lg-down |
隐藏 |
隐藏 |
隐藏 |
隐藏 |
可见 |
.mdui-hidden-xl-down |
隐藏 |
隐藏 |
隐藏 |
隐藏 |
隐藏 |
.mdui-hidden-xs-up |
隐藏 |
隐藏 |
隐藏 |
隐藏 |
隐藏 |
.mdui-hidden-sm-up |
可见 |
隐藏 |
隐藏 |
隐藏 |
隐藏 |
.mdui-hidden-md-up |
可见 |
可见 |
隐藏 |
隐藏 |
隐藏 |
.mdui-hidden-lg-up |
可见 |
可见 |
可见 |
隐藏 |
隐藏 |
.mdui-hidden-xl-up |
可见 |
可见 |
可见 |
可见 |
隐藏 |
调整浏览器窗口、或在不同设备上查看下面的实例。深色部分表示在当前浏览器窗口中是可见的。
✔ .mdui-hidden-xs
.mdui-hidden-xs
✔ .mdui-hidden-sm
.mdui-hidden-sm
✔ .mdui-hidden-md
.mdui-hidden-md
✔ .mdui-hidden-lg
.mdui-hidden-lg
✔ .mdui-hidden-xl
.mdui-hidden-xl
✔ mdui-hidden-xs-down
mdui-hidden-xs-down
✔ mdui-hidden-sm-down
mdui-hidden-sm-down
✔ mdui-hidden-md-down
mdui-hidden-md-down
✔ mdui-hidden-lg-down
mdui-hidden-lg-down
✔ mdui-hidden-xl-down
mdui-hidden-xl-down
✔ mdui-hidden-xs-up
mdui-hidden-xs-up
✔ mdui-hidden-sm-up
mdui-hidden-sm-up
✔ mdui-hidden-md-up
mdui-hidden-md-up
✔ mdui-hidden-lg-up
mdui-hidden-lg-up
✔ mdui-hidden-xl-up
mdui-hidden-xl-up