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. whereis---定位指令的二进制程序、源代码文件和man手册页等相关文件的路径。

    whereis命令用来定位指令的二进制程序.源代码文件和man手册页等相关文件的路径. whereis命令只能用于程序名的搜索,而且只搜索二进制文件(参数-b).man说明文件(参数-m)和源代码文件 ...

  2. 紫书 习题 10-25 UVa 1575 (有重复元素的全排列+暴搜）

    我一开始以为有什么很牛逼的方法来做,然后一直没有思路 后来看了https://blog.csdn.net/zju2016/article/details/78562932的博客 竟然是暴搜?????? ...

  3. 小米开源便签Notes-源码研究(1)-导出功能整体思路

    NotesListActivity是入口Activity. 响应菜单事件,我的手机是"左键菜单".如果菜单项的ID是"R.id.menu_export_text" ...

  4. 洛谷 P1683 入门

    P1683 入门 题目描述 不是任何人都可以进入桃花岛的,黄药师最讨厌象郭靖一样呆头呆脑的人.所以,他在桃花岛的唯一入口处修了一条小路,这条小路全部用正方形瓷砖铺设而成.有的瓷砖可以踩,我们认为是安全 ...

  5. [Python] Wikipedia Crawler

    import time import urllib import bs4 import requests start_url = "https://en.wikipedia.org/wiki ...

  6. Reuse Is About People and Education, Not Just Architecture

     Reuse Is About People and Education, Not Just Architecture Jeremy Meyer you MigHT AdopT THE AppRoA ...

  7. 《从0到1》读书笔记第2章&quot;像1999 年那样狂欢&quot;第1记:小结及词汇解析

    小结 本章的目的应该是通过90年代末的互联网泡沫的背景,成因.影响,以及教训来教诫人们,在全部人都疯狂的抛身于洪流热潮之中时,我们要冷静的思考辨识出那些不切实际的大众观点,找到隐藏在这些观点后面的反主 ...

  8. linearlayout-weight 属性作用

    今天用到了weight的属性,现在就把这个属性的具体意义记录一下.也是参考网上的讲解,只不过自己验证了一下而已 参考自 http://blog.csdn.net/jincf2011/article/d ...

  9. 76.Nodejs Express目录结构

    转自:https://blog.csdn.net/xiaoxiaoqiye/article/details/51160262 Express是一个基于Node.js平台的极简.灵活的web应用开发框架 ...

  10. CSS盒子模型图

    下面这张图,是W3C标准的CSS盒子模型: 由上图可以清楚的看出各个部分的CSS属性.