1、按鈕 .am-btn
圓角按鈕 .am-radius
橢圓形按鈕 .am-round
按鈕激活狀態 .am-active
禁用狀態 .am-disabled
2、按鈕尺寸.am-btn-xl
.am-btn-lg
.am-btn-default
.am-btn-sm
.am-btn-xs
3、塊級顯示按鈕
.am-btn-block
4、按鈕 Icon(使用 Icon 之前需先引入 Icon 組件)
am-icon-{}
5、代碼
使用 <code> 標簽的代碼。
放在 <pre> 里面的代碼片段
添加 .am-pre-scrollable 限制代碼塊高度,默認為 24rem。
6、表單
<select> 是一個比較奇葩的元素,長得丑還不讓人給它打扮。
<input type="file"> 也是 CSS 啃不動的一塊骨頭,如果實在看不慣原生的樣式,一般的做法是把文件選擇域設為透明那個,覆蓋在其他元素。存在的問題是不會顯示已經選擇的文件,對用戶不夠友好,需要配合 JS 使用(文檔)
在容器上添加 .am-form ,容器里的子元素才會應用 Amaze UI 定義的樣式
fieldset表單分塊
針對fieldset表單分塊的<legend>表單標題</legend>
7、表單樣式:am-form-field
表單形狀:am-radius、am-round
給 <input> 添加 disabled 屬性以禁用表單元素。或:<fieldset disabled>
am-form-group 表單分組
<a> 元素設置禁用狀態需要加上 .am-disabled class。
8、表單排列
水平排列:在 <form> 添加 .am-form-horizontal class 並結合網格系統使用。
行內排列:在外圍容器上添加 .am-form-inline。 注意: 行內排列的元素並沒有設置右邊距,默認使用 inline-block 元素的間距,壓縮 HTML 后行內表單元素的右邊距會消失,需要自行處理。
9、表單icon
表單 group 元素上添加 .am-form-icon,依賴 icon 組件。
<div class="am-form-group am-form-icon">
<i class="am-icon-calendar"></i>
<input type="text" class="am-form-field" placeholder="日期">
10、單個域的大小 適用於沒有 <label> 的表單
am-input-lg
am-input-sm
在 .am-form-group 的基礎上添加以下 class,也可以實現對表單大小的設置
.am-form-group-sm
.am-form-group-lg
可輸入類型的 input 元素上需要添加 .am-form-field,不需要再添加 .am-input-sm 此類的 class。
11、輸入框組
使用 .am-form-set 嵌套一系列 <input> 元素
12、圖片
基礎樣式中取消了圖片最大寬度設置,新增了 .am-img-responsive class。
為<img>元素設置不同的 class,增強其樣式。.am-radius 圓角 .am-round 橢圓 .am-circle 圓形
.am-img-thumbnail 邊框
