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
会将子元素 <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.基础样式
1
2
3
4
5
6
7
|
img { box-sizing: border-box; max- 100%; height: auto; vertical-align: middle; border: 0; } |
b.宽度自适应 如果要让图片始终和容器一样宽,需要设置 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 组件使用。
参考:
amaze UI 笔记 - CSS - 匠人 - 博客园
https://www.cnblogs.com/crafts/p/4152921.html