輔助類

邊距

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

類名格式為：.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-leftmargin-right 或 padding-leftpadding-right
  
• y - 設置 margin-topmargin-bottom 或 padding-toppadding-bottom
  
• a - 設置 margin 或 padding
  

大?。?/p>

• 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 使元素向右浮動
  

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

水平對齊方式

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

<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 把文本轉為單詞的首字母大寫。
  

<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 可以在文本長度超出限制時，自動截斷，并用省略號代替。

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

清除浮動

為父元素添加 .mdui-clearfix 類可以清除浮動

<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;，隱藏后的元素不占據(jù)頁面空間。
  
• .mdui-invisible 類用于使元素不可見，但依然會占據(jù)頁面上的空間，相當于添加樣式 visibility: hidden;。
  

響應式工具

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

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

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