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

.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>

amazeui学习笔记--css（常用组件2）--面包屑导航Breadcrumb的更多相关文章

  1. amazeui学习笔记--css（常用组件16）--文章页Article

    amazeui学习笔记--css(常用组件16)--文章页Article 一.总结 1.基本使用:文章内容页的排版样式,包括标题.文章元信息.分隔线等样式. .am-article 文章内容容器 .a ...

  2. amazeui学习笔记--css（常用组件15）--CSS动画Animation

    amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-anim ...

  3. amazeui学习笔记--css（常用组件14）--缩略图Thumbnail

    amazeui学习笔记--css(常用组件14)--缩略图Thumbnail 一.总结 1.基本样式:在 <img> 添加 .am-thumbnail 类:也可以在 <img> ...

  4. amazeui学习笔记--css（常用组件13）--进度条Progress

    amazeui学习笔记--css(常用组件13)--进度条Progress 一.总结 1.进度条基本使用:进度条组件,.am-progress 为容器,.am-progress-bar 为进度显示信息 ...

  5. amazeui学习笔记--css（常用组件12）--面板Panel

    amazeui学习笔记--css(常用组件12)--面板Panel 一.总结 1.面板基本样式:默认的 .am-panel 提供基本的阴影和边距,默认边框添加 .am-panel-default,内容 ...

  6. amazeui学习笔记--css（常用组件11）--分页Pagination

    amazeui学习笔记--css(常用组件11)--分页Pagination 一.总结 1.分页使用:还是ul包li的形式: 分页组件,<ul> / <ol> 添加 .am-p ...

  7. amazeui学习笔记--css（常用组件10）--导航条Topbar

    amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...

  8. amazeui学习笔记--css（常用组件9）--导航nav

    amazeui学习笔记--css(常用组件9)--导航nav 一.总结 1.导航基本使用:<ul> 添加 .am-nav class 以后就是一个基本的垂直导航.默认样式中并没有限定导航的 ...

  9. amazeui学习笔记--css（常用组件8）--列表list

    amazeui学习笔记--css(常用组件8)--列表list 一.总结 1.链接列表:就是多个链接在一起组成的列表, 使用 <ul> 结构嵌套链接列表,添加 .am-list.还是ui包 ...

随机推荐

  1. Centos6.5 安装lnmp环境

    最近项目要配置在nginx上,所以搜索了下具体nginx的安装,看到这篇文章简洁明了而且测试成功就借用了,作品出处:http://www.cnblogs.com/xiaoit/p/3991037.ht ...

  2. Maven学习总结（20）——Maven pom.xml配置再体会

    Maven的pom.xml配置文件详解 <!--父项目的坐标.如果项目中没有规定某个元素的值,那么父项目中的对应值即为项目的默认值. 坐标包括group ID,artifact ID和 vers ...

  3. AVEVA PDMS to 3ds Max - RvmTranslator6.0beta

    AVEVA PDMS to 3ds Max - RvmTranslator6.0beta eryar@163.com RvmTranslato6.0 translate PDMS RVM to 3ds ...

  4. Hadoop-2.6.0上的C的API訪问HDFS

    在通过Hadoop-2.6.0的C的API訪问HDFS的时候,编译和执行出现了不少问题,花费了几天的时间,上网查了好多的资料,最终还是把问题给攻克了 參考文献:http://m.blog.csdn.n ...

  5. Dynamics CRM 2015/2016 Web API：Unbound Custom Action 和 Bound Custom Action

    今天我们再来看看Bound/Unbound Custom Action吧,什么是Custom Action?不知道的小伙伴们就out了,Dynamics CRM 2013就有了这个功能啦.和WhoAm ...

  6. tensorflow 语法及 api 使用细节

    1. tf.nn.conv2d 的参数 padding='SAME' ⇒ 卷积之前的大小和卷积之后的大小一致,默认使用全 0 填充: padding='VALID' ⇒ 也即仅适用其有效部分,而不使用 ...

  7. 洛谷P2115 [USACO14MAR]破坏Sabotage

    题目描述 Farmer John's arch-nemesis, Farmer Paul, has decided to sabotage Farmer John's milking equipmen ...

  8. Redis学习笔记--Redis客户端（三）

    1.Redis客户端 1.1 Redis自带的客户端 (1)启动 启动客户端命令:[root@kwredis bin]# ./redis-cli -h 127.0.0.1 -p 6379 -h:指定访 ...

  9. sessionStorage的使用方法

    本篇是关于sessionStorage的使用方法的介绍,简单几行代码,实现sessionStorage,请大家查阅 (1)在需要设置sessionStorage的页面写如下代码可以存入sessionS ...

  10. 单调栈+贪心维护LIS

    普通:O(\(N^2\)) 状态:dp[j]表示,以j结尾的最长的上升子序列 转移:dp[j]=dp[i]+1(if a[j]>a[i] ) 初始化:dp[i]=1 优化(nlogn) solu ...