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. 构建基于Javascript的移动CMS——加入滑动

    在和几个有兴趣做移动CMS的小伙伴讨论了一番之后,我们认为当前比較重要的便是统一一下RESTful API.然而近期持续断网中,又遭遇了一次停电,暂停了对API的思考.在周末无聊的时光了看了<人 ...

  2. region实现大纲效果

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. HDU 1716 排列2

    排列2 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  4. ifup&&ifdown --- 激活/关闭指定的网络接口。

    ifup命令用于激活指定的网络接口. ifup eth0 #激活eth0 ifdown命令用于禁用指定的网络接口. ifdown eth0 #禁用eth0

  5. 【例题 8-11 UVA-10954】Add All

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 就是合并果子.. 每次都合并最小的就可以啦. 别忘了初始化 [代码] /* 1.Shoud it use long long ? 2 ...

  6. 【Uva 10641】 Barisal Stadium

    [Link]: [Description] 输入一个凸n(3≤n≤30)边形体育馆和多边形外的m(1≤m≤1000)个点光源,每个点光 源都有一个费用值.选择一组点光源,照亮整个多边形,使得费用值总和 ...

  7. C++怎么访问私有变量和函数

    用指针呀,了解C++内存结构的话. 1. 对于私有成员变量,可以用指针来访问. 2. 对于虚函数,也可以用指针来访问. 3. 另外,对于私有成员,如果摸不准地址构造,可以先构造一个结构相似的类,然后增 ...

  8. [leetcode] Palindrome Number（不使用额外空间）

    本来推断回文串是一件非常easy的事情,仅仅须要反转字符串后在与原字符串相比較就可以.这道题目明白说明不能使用额外的空间.那么使用将其分解连接成字符串的方法便不是可行的.仅仅好採用数学的方式: 每次取 ...

  9. menu-代码添加以及add方法参数意义

    今天需要给一个menu动态添加一个item,先把方法记录如下 @Override public boolean onCreateOptionsMenu(Menu menu) { menu.add(Me ...

  10. code blocks常用快捷键

    CodeBlocks常用操作快捷键 编辑部分: Ctrl + A:全选 Ctrl + C:复制 Ctrl + X: 剪切 Ctrl + V:粘贴 Ctrl + Z:撤销(后退一步) Ctrl + S: ...