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