邊距

這一系列工具類可以為元素添加 margin 和 padding，默認(rèn)值都是 8px 的倍數(shù)。

類名格式為：.mdui-{屬性}-{方向}-{大小}

屬性：

• m - 設(shè)置 margin
  
• p - 設(shè)置 padding
  

方向：

• t - 設(shè)置 margin-top 或 padding-top
  
• b - 設(shè)置 margin-bottom 或 padding-bottom
  
• l - 設(shè)置 margin-left 或 padding-left
  
• r - 設(shè)置 margin-right 或 padding-right
  
• x - 設(shè)置 margin-leftmargin-right 或 padding-leftpadding-right
  
• y - 設(shè)置 margin-topmargin-bottom 或 padding-toppadding-bottom
  
• a - 設(shè)置 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;
}

快速浮動(dòng)

• .mdui-float-left 使元素向左浮動(dòng)
  
• .mdui-float-right 使元素向右浮動(dòng)
  

<div class="mdui-float-left">float left</div>
<div class="mdui-float-right">float right</div>

水平居中

為任意元素添加類 .mdui-center 即可使其水平居中。

<div class="mdui-center">mdui-center</div>

垂直居中

為任意元素添加類 .mdui-valign，即可使該元素中的子元素垂直居中。

<div class="mdui-valign">
  <p class="mdui-center">This should be vertically aligned</p>
</div>

水平對(duì)齊方式

• .mdui-text-left 使文本左對(duì)齊。
  
• .mdui-text-center 使文本居中對(duì)齊。
  
• .mdui-text-right 使文本右對(duì)齊。
  

<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>

文本大小寫(xiě)轉(zhuǎn)換

• .mdui-text-lowercase 把文本轉(zhuǎn)為小寫(xiě)。
  
• .mdui-text-uppercase 把文本轉(zhuǎn)為大寫(xiě)。
  
• .mdui-text-capitalize 把文本轉(zhuǎn)為單詞的首字母大寫(xiě)。
  

<p class="mdui-text-lowercase">Lowercased text.</p>
<p class="mdui-text-uppercase">Uppercased text.</p>
<p class="mdui-text-capitalize">Capitalized text.</p>

文本自動(dòng)截?cái)?/h2>

.mdui-text-truncate 可以在文本長(zhǎng)度超出限制時(shí)，自動(dòng)截?cái)?，并用省略?hào)代替。

<p class="mdui-text-truncate" style="max-width: 200px;">這是一段非常非常非常非常非常非常非常非常非常非常非常非常長(zhǎng)的文字。</p>

清除浮動(dòng)

為父元素添加 .mdui-clearfix 類可以清除浮動(dòng)

<div class="mdui-clearfix">
  <div class="mdui-float-left">mdui-float-left</div>
  <div class="mdui-float-right">mdui-float-right</div>
</div>

隱藏內(nèi)容

• .mdui-hidden 類用于隱藏元素，相當(dāng)于添加樣式 display: none;，隱藏后的元素不占據(jù)頁(yè)面空間。
  
• .mdui-invisible 類用于使元素不可見(jiàn)，但依然會(huì)占據(jù)頁(yè)面上的空間，相當(dāng)于添加樣式 visibility: hidden;。
  

響應(yīng)式工具

這些工具類通過(guò)媒體查詢實(shí)現(xiàn)針對(duì)不同設(shè)備隱藏內(nèi)容。這些工具類包括：

• .mdui-hidden-*：在指定寬度的設(shè)備上隱藏。
  
• .mdui-hidden-*-up：在指定寬度及以上的設(shè)備上隱藏。
  
• .mdui-hidden-*-down：在指定寬度及以下的設(shè)備上隱藏。
  

查看這些工具類的使用效果