1、Badge
默认:添加 .am-badge
class 到 <div>
或者 <span>
元素。
圆角:在默认样式的基础上添加 .am-radius
class。
椭圆:在默认样式的基础上添加 .am-round
class。
大小:结合辅助类中的字号 class,改变徽章大小。am-text-sm
2、面包屑导航:
.am-breadcrumb 默认分隔符 写在父级 ol\ul
am-breadcrumb am-breadcrumb-slash 斜杠分割
结合icon <li><a href="#" class="am-icon-home">首页</a></li>
3、按钮
4、关闭按钮
在元素上添加 .am-close 形状是
×
带边框是:添加 .am-close-alt
使用 Icon Font class="am-close am-close-alt am-icon-times"
hover 旋转 .am-close-spin
5、评论列表 am-comment (文档)
6、icon图标
在 HTML 上添加添加 am-icon-{图标名称}
class。
.am-icon-sm放大 150%。。。。
.am-icon-btn 可以是一个图标按钮
.am-icon-spin icon旋转
添加 .am-icon-fw
将图标设置为固定的宽度,解决宽度不一致问题
7、链接列表:
链接列表:使用 <ul>
结构嵌套链接列表,添加 .am-list
。
截断列表:在 <a>
上添加 .am-text-truncate
class 可以实现文字超出一行时截断为 ...
纯文字列表:在 .am-list
的基础上添加 .am-list-static
。
列表边框:在容器上添加 .am-list-border
class。
斑马纹:添加 .am-list-striped
class。
添加 Badge class="am-badge am-badge-success"
添加 ICON <i class="am-icon-home am-icon-fw"></i>
8、导航
导航样式组件,在 <ul>
链接列表中添加 .am-nav
class
<ul>
添加 .am-nav
class 以后就是一个基本的垂直导航。默认样式中并没有限定导航的宽度,可以结合网格使用。
在 .am-nav
的基础上再添加 .am-nav-pills
,形成一个水平导航。
在 .am-nav
的基础上添加 .am-nav-tabs
,形成一个标签式的导航。激活的标签在 <li>
上添加.am-active
。
宽度自适应:在水平导航或标签式导航上添加 .am-nav-justify
让 <li>
平均分配宽度(通过display: table-cell
实现)。
.am-nav-header
导航标题,直接放在 <li>
中。
.am-nav-divider
导航分隔线,添加到空的 <li>
上。
9、导航条
在容器上添加 .am-topbar
class,然后按照示例组织所需内容
在容器上添加 .am-topbar-inverse
,调整为背景色为主色调的样式,内部结构同上。
在 .am-topbar
上添加 .am-topbar-fixed-top
class,实现顶部固定。
在 .am-topbar
上添加 .am-topbar-fixed-bottom
class,实现底部固定
10、分页
分页组件,<ul>
/ <ol>
添加 .am-pagination
class, 包含一系列 <li>
。在 <li>
上添加状态 class:
.am-disabled
- 禁用(不可用)
.am-active
- 激活
居中:在默认样式的基础上添加 .am-pagination-centered
class。
靠右:在默认样式的基础上添加 .am-pagination-right
class。
左右对齐:添加 .am-pagination-prev
及 .am-pagination-next
到 <li>
,创建一个仅包含 上一页
和 下一页
的分页组件。
11、进度条:
进度条组件,.am-progress
为容器,.am-progress-bar
为进度显示信息。
<div class="am-progress">
<div class="am-progress-bar" style="width: 40%">40%</div>
进度条高度:在 .am-progress
添加 .am-progress-xs
.am-progress-sm
可以设置进度条高度。
进度条条纹:在进度条容器上添加 .am-progress-striped
显示条纹效果,可结合进度条颜色 class 使用。
进度条动画:进度条容器上添加 .am-active
激活进度条动画(CSS Animation)。
12、缩略图
在 <img>
添加 .am-thumbnail
类;也可以在 <img>
外面添加一个容器,如 <div>
、<figure>
、<a>
等,再将 class 添加到容器上。
图片标题:am-thumbnail-caption
在am-thumbnail
内加入.am-caption
可以添加任何类型的HTML内容标题、段落、或按钮。
13、css3动画
14、文章