码迷,mamicode.com
首页 > 其他好文 > 详细

AmazeUI 框架知识点-元素

时间:2016-12-01 11:31:23      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:font   图片   string   group   输入   scroll   应用   ace   lin   

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

AmazeUI 框架知识点-元素

标签:font   图片   string   group   输入   scroll   应用   ace   lin   

原文地址:http://www.cnblogs.com/lxh0922/p/6121041.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!