AmazeUI 框架知识点－元素

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