amazeui學習筆記--css（HTML元素1）--按鈕Button
一、總結
1、button的基本使用：a、am-btn 在要應用按鈕樣式的元素上添加 .am-btn，b、顏色 再設置相應的顏色（例如：<button type="button" class="am-btn am-btn-danger">紅色按鈕</button>）。
2、a標簽做button：各種元素都可以做button，<a class="am-btn am-btn-danger" href="http://www.bing.com" target="_blank">應用按鈕樣式的鏈接</a>
3、按鈕顏色：btn+顏色
.am-btn-default- 默認，灰色按鈕.am-btn-primary- 藍色按鈕.am-btn-secondary- 淺藍色按鈕.am-btn-success- 綠色按鈕.am-btn-warning- 橙色按鈕.am-btn-danger- 紅色按鈕.am-btn-link
<button type="button" class="am-btn am-btn-default am-radius">默認樣式</button>
5、橢圓形按鈕： 在默認樣式的基礎上添加 .am-round class. <button type="button" class="am-btn am-btn-default am-round">默認樣式</button>
6、按鈕激活狀態：在按鈕上添加 .am-active class。 <a href="#" class="am-btn am-btn-primary am-active" role="button">鏈接按鈕激活狀態</a>
7、按鈕禁用狀態：在按鈕上設置 disabled 屬性或者添加 .am-disabled class。 <a href="#" class="am-btn am-btn-default am-disabled">鏈接按鈕禁用狀態</a>
8、按鈕尺寸：
.am-btn-xl.am-btn-lg.am-btn-default.am-btn-sm.am-btn-xs
9、塊級顯示：占一行：<button type="button" class="am-btn am-btn-primary am-btn-block">塊級顯示的按鈕</button>
10、按鈕icon：使用 Icon 之前需先引入 Icon 組件（如果沒猜錯，就是那個字體文件）。 i標簽是在button里面的，i標簽用來顯示圖標。以am-icon開頭
1 <button class="am-btn am-btn-default"> 2 <i class="am-icon-cog"></i> 3 設置 4 </button> 5 6 <a class="am-btn am-btn-warning" href="#"> 7 <i class="am-icon-shopping-cart"></i> 8 結賬 9 </a> 10 11 <button class="am-btn am-btn-default"> 12 <i class="am-icon-spinner am-icon-spin"></i> 13 加載中 14 </button> 15 16 <button class="am-btn am-btn-primary"> 17 下載片片 18 <i class="am-icon-cloud-download"></i> 19 </button>
二、按鈕Button
基本使用
默認樣式
在要應用按鈕樣式的元素上添加 .am-btn，再設置相應的顏色。
.am-btn-default- 默認，灰色按鈕.am-btn-primary- 藍色按鈕.am-btn-secondary- 淺藍色按鈕.am-btn-success- 綠色按鈕.am-btn-warning- 橙色按鈕.am-btn-danger- 紅色按鈕.am-btn-link
<button type="button" class="am-btn am-btn-default">默認樣式</button> <button type="button" class="am-btn am-btn-primary">主色按鈕</button> <button type="button" class="am-btn am-btn-secondary">次色按鈕</button> <button type="button" class="am-btn am-btn-success">綠色按鈕</button> <button type="button" class="am-btn am-btn-warning">橙色按鈕</button> <button type="button" class="am-btn am-btn-danger">紅色按鈕</button> <a class="am-btn am-btn-link">鏈接</a> <a class="am-btn am-btn-danger" href="http://www.bing.com" target="_blank">應用按鈕樣式的鏈接</a>圓角按鈕
在默認樣式的基礎上添加 .am-radius class.
<button type="button" class="am-btn am-btn-default am-radius">默認樣式</button>橢圓形按鈕
在默認樣式的基礎上添加 .am-round class.
<button type="button" class="am-btn am-btn-default am-round">默認樣式</button>按鈕狀態
激活狀態
在按鈕上添加 .am-active class。
<button type="button" class="am-btn am-btn-primary am-active">激活狀態</button> <button type="button" class="am-btn am-btn-default am-active">激活狀態</button> <br > <br > <a href="#" class="am-btn am-btn-primary am-active" role="button">鏈接按鈕激活狀態</a> <a href="#" class="am-btn am-btn-default am-active" role="button">鏈接按鈕激活狀態</a>禁用狀態
在按鈕上設置 disabled 屬性或者添加 .am-disabled class。
<button type="button" class="am-btn am-btn-primary" disabled="disabled">禁用狀態</button> <button type="button" class="am-btn am-btn-default" disabled="disabled">禁用狀態</button> <a href="#" class="am-btn am-btn-primary am-disabled">鏈接按鈕禁用狀態</a> <a href="#" class="am-btn am-btn-default am-disabled">鏈接按鈕禁用狀態</a>disabled 屬性的
button 元素文字渲染成灰色並加上白色陰影，CSS 無法控制這個默認樣式。
按鈕尺寸
.am-btn-xl.am-btn-lg.am-btn-default.am-btn-sm.am-btn-xs
<button class="am-btn am-btn-default am-btn-xl">按鈕 - xl</button> <button class="am-btn am-btn-default am-btn-lg">按鈕 - lg</button> <button class="am-btn am-btn-default">按鈕默認大小</button> <button class="am-btn am-btn-default am-btn-sm">按鈕 - sm</button> <button class="am-btn am-btn-default am-btn-xs">按鈕 - xs</button> <button class="am-btn am-btn-primary am-btn-xl">按鈕 - xl</button> <button class="am-btn am-btn-primary am-btn-lg">按鈕 - lg</button> <button class="am-btn am-btn-primary">按鈕默認大小</button> <button class="am-btn am-btn-primary am-btn-sm">按鈕 - sm</button> <button class="am-btn am-btn-primary am-btn-xs">按鈕 - xs</button>塊級顯示
添加 .am-btn-block class。
<button type="button" class="am-btn am-btn-primary am-btn-block">塊級顯示的按鈕</button> <button type="button" class="am-btn am-btn-default am-btn-block">塊級顯示的按鈕</button>按鈕 Icon
使用 Icon 之前需先引入 Icon 組件。
<button class="am-btn am-btn-default"> <i class="am-icon-cog"></i> 設置 </button> <a class="am-btn am-btn-warning" href="#"> <i class="am-icon-shopping-cart"></i> 結賬 </a> <button class="am-btn am-btn-default"> <i class="am-icon-spinner am-icon-spin"></i> 加載中 </button> <button class="am-btn am-btn-primary"> 下載片片 <i class="am-icon-cloud-download"></i> </button>