amaze ui各个模块简单说明

amaze ui各个模块简单说明

导航添加依据 http://amazeui.org/css/  下面内容属学习笔记，如有理解偏差和错误请留言相告，感谢！* =（官网这块写的很详细）

一、基本样式

1.统一样式

    说明了为什么使用Normalize，而不是Rest。

2.基础设置

  a.css和模型

    讲了一个CSS3的新属性：box-sizing。作为一个技术不到位的人，真没看懂。自己查了下如下：

     box-sizing的3种属性取一即可

     box-sizing:content-box | padding-box | border-box

     box-sizing:content-box;   /*宽度里面只包含内容*/

     box-sizing:padding-box;  /*宽度里面不包含padding*/

     box-sizing:border-box;    /*宽度里面不包含padding和border*/

  b.字号及单位

     讲的em和rem和用法及注意事项。

     rem 永远基于根

     em  继承

     比如

     html{font-size:75%; /* 12÷16=75% */} /*这里定义了字体为12px*/

     body{font-size:12px;font-size:1rem ; /* 12÷12=1 */} /*基于跟也就是html 只需要写1rem即可，作用同12px。这里加上12px是为了兼容IE系列浏览器*/

 3.文字排版*

   a.字体

   b.元素基本样式

 4.打印样式

   a.显示URL连接  通过content把链接加在元素之后 类似：after

   b.辅助Class      可以理解为打印机hack开关 ~~

   c.参考链接        没看

 

二、布局相关

 1.网格

　　Amaze UI 使用了 12 列的响应式网格系统。并提供了3种响应区间

      am-u-sm-*　　0-640px

      am-u-md-*　　640px-1024px    

      am-u-lg-*　　  1025px+

    a.流式布局

      .am-g 未限定宽度可以通过.am-g-fixed 来自由限定

      .am-container至于它，我也不知道它是用来搞毛的~

    b.基本使用*

    c.列边距*

    d.不足12列的网格

　　 实际使用中，如果行的网格数不足 12，需要在最后一列上添加 .am-u-end。

    e.居中的列

　　添加 .am-u-xx-centered 实现列居中：

• 如果始终的设为居中，只需要添加 .am-u-sm-centered（移动优先，继承）；
• 某些区间不居中添加， .am-u-xx-uncentered。

    f.列排序*

 2.等分网格

　　am-avg-sm-*　　0-640px

      am-avg-md-*　　640px-1024px    

      am-avg-lg-*　　  1025px+

　　与布局网格不同的是，这里的数字表示几等分，而不是占 12 等分中的几列，比如 .am-avg-sm-2 会将子元素 

 的宽度设置为 50%。

　 a.基本使用*

　 b.响应式*　

 3.辅助类*

　 a.布局相关

　 b.文本工具

　 c.响应式辅助

 

三、HTML元素

  1.按钮* 只要添加对应的class就好啦！

　 a.基本使用

      默认按钮样式 .am-btn

　　圆角按钮样式 .am-radius

　　椭圆按钮样式 .am-round

　 b.按钮状态

　　 激活状态：在按钮上添加 .am-active class。

　　 禁用状态：在按钮上设置 disabled 属性或者添加 .am-disabled class。

    c.按钮尺寸　逐级变小

• .am-btn-xl
• .am-btn-lg
• .am-btn-default
• .am-btn-sm
• .am-btn-xs

　 d.块级显示 添加 .am-btn-block class。

　 e.按钮Icon 使用 Icon 之前需先引入 Icon 组件

  2.代码*

　　a.行内代码 使用标签实现代码高亮。

　　b.代码片段 使用

原格式输出。
 
   
　　c.代码高度 添加 .am-pre-scrollable 限制代码块高度，默认为 24rem。
 
   
  3.表单
 
   
　　在容器上添加 .am-form class，容器里的子元素才会应用 Amaze UI 定义的样式。
 
   
　　a.基本使用  　
 
   
　  　checkbox、radio 类型的  与其他元素稍有区别：
 
   
 
    
块级显示时在容器上添加 .am-checkbox、.am-radio class；
 
    
行内显示时在容器上添加 .am-checkbox-inline、.am-radio-inline class。
 
   
 
   
　　b.表单域状态 只讲了表单元素和a标签的禁用
 
   
　  　表单标签内部添加disabled属性 
 
   
　　   元素设置禁用状态需要加上 .am-disabled class。
 
   
　　c.表单排列
 
   
　 　 在 
 添加 .am-form-horizontal class 并结合网格系统使用。
 
   
        在外围容器上添加 .am-form-inline。 注意： 行内排列的元素并没有设置右边距，默认使用 inline-block 元素的间距，压缩 HTML 后行内表单元素的右边距会消失，需要自行处理。
 
   
　　d.表单域Icon
 
   
　　   表单 group 元素上添加 .am-form-icon，依赖 icon 组件。
 
   
　　e.验证状态
 
   
　　　添加 .am-form-icon 和 .am-form-feedback。
 
   
　　  注意：Icon 的样式针对 .am-form-group 单行排列编写，多行的时候会出现位置不对的情况。
 
   
　　f.表单域大小
 
   
　　  .am-input-lg 和 .am-input-sm
 
   
　　g.输入框组件
 
   
　　　使用 .am-form-set 嵌套一系列  元素。
 
   
  4.图片
 
   
　  a.基础样式
 
   
　　
 
   
 
    
 
     
img {
  box-sizing: border-box;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: 0;
}
 
    
 
   
 
   
 
 
   
　  b.宽度自适应 如果要让图片始终和容器一样宽，需要设置 width: 100%。
 
   
　  c.增强样式　 为元素设置不同的 class，增强其样式。
 
   
 
    
.am-img-radius 圆角
 
    
.am-img-round 椭圆
 
    
.am-img-circle 圆形，一般用于正方形的图片(你要觉得椭圆好看，用在长方形上也可以)
 
   
 
   
  5.表格
 
   
　　a.基本样式 添加 .am-table。
 
   
　　b.基本边框 添加 .am-table-bordered 类。
 
   
　　c.圆角边框 同时添加 .am-table-bordered 、 .am-table-radius，外层圆角边框通过 box-shadow 实现。
 
   
　　e.单元格状态 表示表格状态的 class 添加到 tr 整行整行，添加到 td 高亮单元格。
 
   
 
    
.am-active 激活；
 
    
.am-disabled 禁用；
 
    
.am-primary 蓝色高亮；
 
    
.am-success 绿色高亮；
 
    
.am-warning 橙色高亮；
 
    
.am-danger 红色高亮。
 
   
 
   
　　f.其它效果
 
   
 
    
.am-table-striped 斑马纹效果
 
    
.am-table-hover hover 状态
 
   
 
   
　　g.所有样式叠加 *
 
   
　　h.参考资源 表格排序 jQuery Table Sort
 
   
 
 
   
四、常用组件
 
   
  1.小徽章
 
   
　　a.默认样式 添加 .am-badge class 到 
 或者  元素。
 
   
　　b.圆角样式 在默认样式的基础上添加 .am-radius class。
 
   
　　c.椭圆样式 在默认样式的基础上添加 .am-round class。
 
   
　　d.大小 　　结合辅助类中的字号 class，改变徽章大小.
 
   
  2.面包屑导航 .am-breadcrumb 面包屑导航。　
 
   
  3.按钮组　
 
   
　　a.把一系列要使用的 .am-btn 按钮放入 .am-btn-group
 
   
　　b.将 .am-btn-group 放进 .am-btn-toolbar，实现工具栏效果。　
 
   
　　c.给 .am-btn-group 增加 class .am-btn-group-lg 或 .am-btn-group-sm 或 .am-btn-group-xs 改变按钮大小。
 
   
 　  d.使用 .am-btn-group-stacked 使按钮垂直排列显示。
 
   
　　e.添加 .am-btn-group-justify class 让按钮组里的按钮平均分布，填满容器宽度。
 
   
　　 注意： 只适用  元素， 不能应用 display: table-cell 样式。
 
   
　　 使用 flexbox 实现，只兼容 IE 10+ 及其他现代浏览器。
 
   
  4.关闭按钮
 
   
　  关闭按钮样式，可以结合其他不同组件使用。对  或者  添加 .am-close class。
 
   
　  a.在元素上添加 .am-close class。
 
   
　  b.添加 .am-close-alt class。
 
   
　  c.添加 .am-close-spin class（需支持 CSS3 transform）。
 
   
  5.评论列表
 
   
　　
 
   
  6.图标
 
   
　　a.使用方法 在 HTML 上添加添加 am-icon-{图标名称} class。
 
   
　　b.图标大小
 
   
 
    
.am-icon-sm，放大 150%
 
    
.am-icon-md，放大 200%
 
    
.am-icon-lg，放大 250%
 
   
 
   
　　c.button Icon 在 Icon 上添加 .am-btn-icon class。
 
   
　　d.旋转动画 　　注意：Chrome 和 Firefox 下， display: inline-block; 或 display: block; 的元素才会应用旋转动画。
 
   
　　e.复制图标
 
   
　　f.存在问题
 
   
　　g.所有图标列表
 
   
  7.输入框组　Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。
 
   
　　在容器上添加 .am-input-group，在标签文字上添加 .am-input-group-label，具体请查看示例代码。
 
   
　　a.基本使用
 
   
　　复选/单选框与输入框 ：将单选框与复选框放入 .am-input-group-label 内。
 
   
　　输入框结合 Button:需要用 .am-input-group-btn 包住按钮，而不是 .am-input-group-label。
 
   
　　b.样式变换
 
   
　　在 .am-input-group 添加标明尺寸的 class 即可。
 
   
　　包含 .am-input-group-lg、.am-input-group-sm。
 
   
  8.列表
 
   
　　a.基本样式
 
   
　　链接列表：使用 
 结构嵌套链接列表，添加 .am-list。
 
   
　　纯文字列表:在 .am-list 的基础上添加 .am-list-static。
 
   
　　b.样式变换
 
   
　　列表边框：在容器上添加 .am-list-border class。
 
   
　　斑马纹：添加 .am-list-striped class。
 
   
　　c.组合使用
 
   
　　添加 Badge与 Panel 组合 见 Panel 组件。
 
   
  9.导航
 
   
　   a.基本样式 
 添加 .am-nav class 以后就是一个基本的垂直导航。默认样式中并没有限定导航的宽度，可以结合网格使用。
 
   
　　b.水平导航   在 .am-nav 的基础上再添加 .am-nav-pills，形成一个水平导航。
 
   
　　c.标签式导航 在 .am-nav 的基础上添加 .am-nav-tabs，形成一个标签式的导航。激活的标签在 
 上添加 .am-active。
 
   
　　d.宽度自适应　　
 
   
　　在水平导航或标签式导航上添加 .am-nav-justify 让 
 平均分配宽度（通过display: table-cell 实现）。
 
   
　　平均分配只在 media-up (> 640px) 有效，<= 640px 时菜单会垂直堆叠（缩小浏览器窗口效果可以查看效果）。
 
   
　　e.导航状态　　导航状态 class 添加在 
 上。
 
   
 
    
.am-disabled - 禁用
 
    
.am-active - 激活
 
   
 
   
　　f.导航标题及分割线 导航标题及分隔线目前仅适用于垂直菜单。
 
   
 
    
.am-nav-header 导航标题，直接放在 
 中。
 
    
.am-nav-divider 导航分隔线，添加到空的 
 上。
 
   
 
   
　　g.下拉菜单 需结合 JS Dropdown 组件使用。
 
   
 
 
   
参考：
 
   
amaze UI 笔记 - CSS - 匠人 - 博客园
https://www.cnblogs.com/crafts/p/4152921.html