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. 处理某客户p570硬盘故障所思

    p570,硬盘故障. 机器有两个vg,rootvg和datavg,rootvg未做镜像,datavg已做镜像.系统errpt和HMC报硬盘有问题,查看错误代码可能是硬盘有坏道(坏块),在尽量保全用户数 ...

  2. idea中实现类快速重写service方法 快捷键

    1.在实现类中 CTRL+O 快捷键,会弹出所有方法 2.选择service中的方法,会自动重写

  3. Vijos——T1406 拉力赛

    https://vijos.org/p/1460 描述 车展结束后,游乐园决定举办一次盛大的山道拉力赛,平平和韵韵自然也要来参加大赛. 赛场上共有n个连通的计时点,n-1条赛道(构成了一棵树).每个计 ...

  4. 洛谷——P1155 双栈排序

    题目描述 Tom最近在研究一个有趣的排序问题.如图所示,通过2个栈S1和S2,Tom希望借助以下4种操作实现将输入序列升序排序. 操作a 如果输入序列不为空,将第一个元素压入栈S1 操作b 如果栈S1 ...

  5. zoj 2317 Nice Patterns Strike Back(矩阵乘法)

    problemId=1317">http://acm.zju.edu.cn/onlinejudge/showProblem.do? problemId=1317 给出一个n*m的矩阵( ...

  6. KendoUi中KendoDropDownList控件的使用——三级级联模块的实现

    1. 应用需求 在权限系统开发中除了以上数据表关系的设计之外.比較麻烦的地方是级联模块在页面的展示,因为设计中最多是控制到三级,因此三级级联模块的展示.编辑等页面操作是须要解决的问题,这里採用Kend ...

  7. Python 值传递和引用传递

    值传递和引用传递 參考地址:http://www.dataguru.cn/thread-489552-1-1.html python的值传递不会改变传入參数的值,而引用传递传入的是一个地址.有点相似c ...

  8. 一个Java基础练习

    今天在群里又有一个朋友问到了这样一个练习,我索性将代码贴到这里,下次须要的朋友能够来这里看. 用到知识点:数组.集合.IO流 问题描写叙述:在例如以下图所看到的的一个txt文件里读取数据到内存,然后统 ...

  9. 第二天,导出文件sql，查询，视图view,聚合函数，反模式，字符串处理函数

    //把数据库导出到脚本文件mysqldump -uroot -p1234 --databases abc > d:/a/abc.sql CREATE TABLE stud( id INT PRI ...

  10. 76.QT槽的机制

    按钮点击获取文本框输入 void Dialog::on_pushButton_clicked() { //获取文本输入 QString vstr = ui->lineEdit->text( ...