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. 【VC++学习笔记五】SDI|MDI的全屏显示

    一.Mainframe中添加一个记录是否全屏状态的变量BOOL m_bFullScreen. 二.工具栏添加一个按钮,进行全屏的操作,响应事件函数写在Mainframe中. 三.在响应函数中,添加如下 ...

  2. Java 学习（13）：抽象类& 抽象方法& 封装

    目录 --- 抽象类 --- 封装 抽象类: 在面向对象的概念中,所有的对象都是通过类来描绘的,但是反过来,并不是所有的类都是用来描绘对象的,如果一个类中没有包含足够的信息来描绘一个具体的对象,这样的 ...

  3. from disk cache 与 from memory cache

    webkit资源的分类 webkit的资源分类主要分为两大类:主资源和派生资 http状态码 200 from memory cache 不访问服务器,直接读缓存,从内存中读取缓存.此时的数据时缓存到 ...

  4. 开创学习的四核时代-iTOP-4412开发板开源硬件平台

    iTOP-4412开发板如今比較热门的开发板.笔者最近入了一套. 也推荐给初学ARM的朋友学习,4412开发板搭载三星Exynos四核处理器,配备1GB内存,4GB固态硬盘EMMC存储,兼具高速读取与 ...

  5. SSL通关之代码演示样例（四）

    实际开发过程中,server端是不须要多加代码处理的,由于ssl验证过程是由server(tomcat.nginx等)完毕的. 这段代码也是參考了网上的: 新建一个web项目,项目结构和须要引入的ja ...

  6. 用C#调用Lua脚本

    用C#调用Lua脚本 一.引言 学习Redis也有一段时间了,感触还是颇多的,但是自己很清楚,路还很长,还要继续.上一篇文章简要的介绍了如何在Linux环境下安装Lua,并介绍了在Linux环境下如何 ...

  7. 84.friend友元类

    #include <iostream> using namespace std; //友元函数的主要作用就是访问私有变量 class myclass { public: friend cl ...

  8. Android开发之经常使用开源库直接拿来用

    1.from  代码家 整理比較好的源代码连接 **************************************************************************** ...

  9. 怎样利用ash监控会话

    ash是很有效的监控工具之中的一个.1秒抓一次 select max(sample_time)over(),min(sample_time)over() from dba_hist_active_se ...

  10. cocos2dx-js学习笔记（一）环境搭建

    本人眼下的学习方向是cocos2dx+js的开发方式,开发调试使用webstrom和火狐浏览器,调试完毕的项目使用cocos2dx+jsb的方式编译到PC或android设备执行.主要时间用在学习,所 ...