Button
目录
基本使用
默认样式
在要应用按钮样式的元素上添加 .am-btn
,再设置相应的颜色。
.am-btn-default
- 默认,灰色按钮.am-btn-primary
- 蓝色按钮.am-btn-secondary
- 浅蓝色按钮.am-btn-success
- 绿色按钮.am-btn-warning
- 橙色按钮.am-btn-danger
- 红色按钮.am-btn-link
Copy
默认样式 主色按钮 次色按钮 绿色按钮 橙色按钮 红色按钮 链接 应用按钮样式的链接
<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.
Copy
默认样式 主色按钮 次色按钮 绿色按钮 橙色按钮 红色按钮
<button type="button" class="am-btn am-btn-default am-radius">默认样式</button>
椭圆形按钮
在默认样式的基础上添加 .am-round
class.
Copy
默认样式 主色按钮 次色按钮 绿色按钮 橙色按钮 红色按钮
<button type="button" class="am-btn am-btn-default am-round">默认样式</button>
按钮状态
激活状态
在按钮上添加 .am-active
class。
Copy
<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。
Copy
<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>
IE9 会把设置了 disabled
属性的 button
元素文字渲染成灰色并加上白色阴影,CSS 无法控制这个默认样式。
按钮尺寸
.am-btn-xl
.am-btn-lg
.am-btn-default
.am-btn-sm
.am-btn-xs
Copy
按钮 - xl 按钮 - lg 按钮默认大小 按钮 - sm 按钮 - xs
按钮 - xl 按钮 - lg 按钮默认大小 按钮 - sm 按钮 - 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。
Copy
块级显示的按钮块级显示的按钮
<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 组件。
Copy
设置 结账 加载中 下载片片
<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>