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