輔助類別

邊距

這一系列工具類別可以為元素添加 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 使元素向右浮動

水平置中

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

垂直置中

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

水平對齊方式

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

文字大小寫轉換

• .mdui-text-lowercase 把文字轉為小寫。
• .mdui-text-uppercase 把文字轉為大寫。
• .mdui-text-capitalize 把文字轉為單字的首字母大寫。

文字自動截斷

.mdui-text-truncate 可以在文字長度超出限制時，自動截斷，並用省略號代替。

清除浮動

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

隱藏內容

• .mdui-hidden 類別用於隱藏元素，相當於添加樣式 display: none;，隱藏後的元素不佔據頁面空間。
• .mdui-invisible 類別用於使元素不可見，但依然會佔據頁面上的空間，相當於添加樣式 visibility: hidden;。

回應式工具

這些工具類別透過媒體查詢實作針對不同裝置隱藏內容。這些工具類別包括：

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

調整瀏覽器視窗，或在不同裝置上查看下面的實例。深色部分表示在目前瀏覽器視窗中是可見的。