amaze UI 笔记 - CSS

导航添加依据 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 会将子元素 <li> 的宽度设置为 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.行内代码 使用<code>标签实现代码高亮。

　　b.代码片段 使用<pre>原格式输出。

　　c.代码高度 添加 .am-pre-scrollable 限制代码块高度，默认为 24rem。

3.表单

　　在容器上添加 .am-form class，容器里的子元素才会应用 Amaze UI 定义的样式。

　　a.基本使用  　

　  　checkbox、radio 类型的 <input> 与其他元素稍有区别：

• 块级显示时在容器上添加 .am-checkbox、.am-radio class；
• 行内显示时在容器上添加 .am-checkbox-inline、.am-radio-inline class。

　　b.表单域状态 只讲了表单元素和a标签的禁用

　  　表单标签内部添加disabled属性

　　  <a> 元素设置禁用状态需要加上 .am-disabled class。

　　c.表单排列

　 　 在 <form> 添加 .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 嵌套一系列 <input> 元素。

4.图片

　  a.基础样式

　　

img {
  box-sizing: border-box;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: 0;
}

　  b.宽度自适应 如果要让图片始终和容器一样宽，需要设置 width: 100%。

　  c.增强样式　 为<img>元素设置不同的 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 到 <div> 或者 <span> 元素。

　　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 让按钮组里的按钮平均分布，填满容器宽度。

　　 注意： 只适用 <a> 元素，<button> 不能应用 display: table-cell 样式。

　　 使用 flexbox 实现，只兼容 IE 10+ 及其他现代浏览器。

4.关闭按钮

　  关闭按钮样式，可以结合其他不同组件使用。对 <a> 或者 <button> 添加 .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.基本样式

　　链接列表：使用 <ul> 结构嵌套链接列表，添加 .am-list。

　　纯文字列表:在 .am-list 的基础上添加 .am-list-static。

　　b.样式变换

　　列表边框：在容器上添加 .am-list-border class。

　　斑马纹：添加 .am-list-striped class。

　　c.组合使用

　　添加 Badge与 Panel 组合 见 Panel 组件。

9.导航

　   a.基本样式 <ul> 添加 .am-nav class 以后就是一个基本的垂直导航。默认样式中并没有限定导航的宽度，可以结合网格使用。

　　b.水平导航   在 .am-nav 的基础上再添加 .am-nav-pills，形成一个水平导航。

　　c.标签式导航 在 .am-nav 的基础上添加 .am-nav-tabs，形成一个标签式的导航。激活的标签在 <li> 上添加 .am-active。

　　d.宽度自适应　　

　　在水平导航或标签式导航上添加 .am-nav-justify 让 <li> 平均分配宽度（通过display: table-cell 实现）。

　　平均分配只在 media-up (> 640px) 有效，<= 640px 时菜单会垂直堆叠（缩小浏览器窗口效果可以查看效果）。

　　e.导航状态　　导航状态 class 添加在 <li> 上。

• .am-disabled - 禁用
• .am-active - 激活

　　f.导航标题及分割线 导航标题及分隔线目前仅适用于垂直菜单。

• .am-nav-header 导航标题，直接放在 <li> 中。
• .am-nav-divider 导航分隔线，添加到空的 <li> 上。

　　g.下拉菜单 需结合 JS Dropdown 组件使用。