amazeui学习笔记--css（常用组件2）--面包屑导航Breadcrumb

amazeui学习笔记--css（常用组件2）--面包屑导航Breadcrumb

一、总结

1、am-breadcrumb：用am-breadcrumb来声明面包屑导航控件，.am-breadcrumb 面包屑导航。

2、breadcrumb形式：形式是ol里面内嵌li的形式

3、斜杠分隔符：默认分隔符是两个小大于号，斜杠分隔符的话要在ol中添加  am-breadcrumb-slash  <ol class="am-breadcrumb am-breadcrumb-slash">

4、添加icon：icon只用写在li的class里面就好 <li><a href="#" class="am-icon-home">首页</a></li>

 

二、面包屑导航Breadcrumb

Breadcrumb

---

目录

• 基本形式
  • 默认分隔符
  • 斜杆分隔符
• 结合 Icon

.am-breadcrumb 面包屑导航。

基本形式

默认分隔符

 Copy

1. 首页
2. 分类
3. 内容

<ol class="am-breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">分类</a></li>
  <li class="am-active">内容</li>
</ol>

斜杆分隔符

 Copy

1. 首页
2. 分类
3. 内容

<ol class="am-breadcrumb am-breadcrumb-slash">
  ...
</ol>

结合 Icon

添加图标相应 class 即可。

 Copy

1. 首页
2. 分类
3. 内容

<ol class="am-breadcrumb">
  <li><a href="#" class="am-icon-home">首页</a></li>
  <li><a href="#">分类</a></li>
  <li class="am-active">内容</li>
</ol>