Bootstrap-CL:面包屑导航
| ylbtech-Bootstrap-CL:面包屑导航 |
| 1.返回顶部 |
Bootstrap 面包屑导航(Breadcrumbs)
面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式。以博客为例,面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。
Bootstrap 中的面包屑导航(Breadcrumbs)是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS(bootstrap.min.css)中下面所示的 class 自动被添加:
.breadcrumb > li + li:before {
color: #CCCCCC;
content: "/ ";
padding: 0 5px;
}
下面的实例演示了面包屑导航:
实例
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">2013</a></li>
<li class="active">十一月</li>
</ol>
结果如下所示:

| 2.返回顶部 |
| 3.返回顶部 |
| 4.返回顶部 |
| 5.返回顶部 |
| 11.返回顶部 |
![]() |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
Bootstrap-CL:面包屑导航的更多相关文章
- 【bootstrap】面包屑导航(Breadcrumbs)
.breadcrumb > li + li:before { color: #CCCCCC; content: "/ "; padding: 0 5px; } <ol ...
- Bootstrap <基础十八>面包屑导航(Breadcrumbs)
面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...
- Bootstrap (导航、标签、面包屑导航)
导航 Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分.改变修饰类可以改变样式. <!DOCTYPE html> <html> <head& ...
- Bootstrap面包屑导航
Bootstrap中提供了面包屑导航的实现方法: 只需要引入bootstrap.css文件即可. 主要引用的样式有: .span6 .breadcrumb 实例代码如下: <!DOCTYPE h ...
- Bootstrap——面包屑导航(Breadcrumbs)
面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式. Bootstrap 中的面包屑导航(Breadcrumbs)是一个简单的带有 .breadcrumb 类的无序列表. <o ...
- Bootsrtap 面包屑导航(Breadcrums)
Bootstrap面包屑导航是一种基于网站层次信息显示的方式.以博客为例,面包屑导航可以显示发布日期,类别或标签,它们表示当前页面在导航层次结构内的位置. Bootstrap面包屑导航其实是一个简单的 ...
- 学习使用 CSS3 制作网站面包屑导航效果
作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...
- NEC学习 ---- 模块 -多行式面包屑导航
如上面形式面包屑的写法: HTML如下, <div class="m-crumb"> <ul class="f-cb"> <li& ...
- WordPress 添加面包屑导航
所谓面包屑,就是类似这种:首页 > 公司简介 > 发展历史 展示网站树型结构,并让网站访问者随时知道自己所处的位置,方便返回上几级. 将下面的代码添加到主题的 functions.php ...
随机推荐
- luogu P1029 最大公约数和最小公倍数问题
https://www.luogu.org/problem/show?pid=1029 输入二个正整数x0,y0(2<=x0<100000,2<=y0<=1000000),求出 ...
- 初探动态规划(DP)
学习qzz的命名,来写一篇关于动态规划(dp)的入门博客. 动态规划应该算是一个入门oier的坑,动态规划的抽象即神奇之处,让很多萌新 萌比. 写这篇博客的目标,就是想要用一些容易理解的方式,讲解入门 ...
- 一年25个里程碑!免疫疗法“战胜”癌症,靠的是实力(5篇Science、6篇Nature )--转载
近几年,免疫疗法的成功使癌症治疗进入了新的时代.无论是科研界,还是商业界,都丝毫没有掩饰对这一领域的热情.2016年,Cell杂志公布的年度十大最佳论文中,免疫疗法占两席.事实上,这两项成果只是去年癌 ...
- Java如何将字符串中的敏感词替换为相等数量的星号*
Java如何将字符串中的敏感词替换为相等数量的星号* Java如何将字符串中的敏感词替换为相等数量的星号*,这也是我工作中遇到的问题,尝试了很多种方式最后采用这一种,在这里分享一下我的解决方式,代码效 ...
- shell 变量赋值运算
.变量赋值: name=lbg 等号前后不能有空格 name="Lebron James" 变量值中有空格要用双引号 echo ${name} 用${}更保险 shopt -s - ...
- 前端 crypto-js aes 加解密
下载:npm install crypto-js --save 需要定义两个方法 ,分别是用于加密和解密,这里我将它放在了 utils 文件夹下,命名为 secret.js ,其具体代码如下: con ...
- CF 272E Dima and Horses 染色,dfs 难度:2
http://codeforces.com/problemset/problem/272/E 把仇恨关系想象为边, 因为度只能为0,1,2,3,所以有以下几种 0,1 直接放即可 2: 有(1,1), ...
- ansible入门02
1.常用模块 1.1 group模块 添加或删除组 name= state=:present(添加),absent(删除) sy ...
- Sqlserver:datetime类型的精度(不确定性)问题
转自http://www.xuebuyuan.com/212359.html 背景:近日进行大型数据表的迁移处理,遭遇创建 主键时 索引键值重复的错误.仔细检查原始表,并未有任何问题.分析后发现是迁移 ...
- java日常知识点积累
java类型中的普通非static方法 示例代码: package com.lvzhi; /** * Created by lvzhi on 2017/9/3 */ public class MyTh ...
