ylbtech-Bootstrap-CL:面包屑导航
1.返回顶部
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、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
11.返回顶部
 
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

Bootstrap-CL:面包屑导航的更多相关文章

  1. 【bootstrap】面包屑导航(Breadcrumbs)

    .breadcrumb > li + li:before { color: #CCCCCC; content: "/ "; padding: 0 5px; } <ol ...

  2. Bootstrap <基础十八>面包屑导航(Breadcrumbs)

    面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...

  3. Bootstrap (导航、标签、面包屑导航)

    导航 Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分.改变修饰类可以改变样式. <!DOCTYPE html> <html> <head& ...

  4. Bootstrap面包屑导航

    Bootstrap中提供了面包屑导航的实现方法: 只需要引入bootstrap.css文件即可. 主要引用的样式有: .span6 .breadcrumb 实例代码如下: <!DOCTYPE h ...

  5. Bootstrap——面包屑导航(Breadcrumbs)

    面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式. Bootstrap 中的面包屑导航(Breadcrumbs)是一个简单的带有 .breadcrumb 类的无序列表. <o ...

  6. Bootsrtap 面包屑导航(Breadcrums)

    Bootstrap面包屑导航是一种基于网站层次信息显示的方式.以博客为例,面包屑导航可以显示发布日期,类别或标签,它们表示当前页面在导航层次结构内的位置. Bootstrap面包屑导航其实是一个简单的 ...

  7. 学习使用 CSS3 制作网站面包屑导航效果

    作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...

  8. NEC学习 ---- 模块 -多行式面包屑导航

    如上面形式面包屑的写法: HTML如下, <div class="m-crumb"> <ul class="f-cb"> <li& ...

  9. WordPress 添加面包屑导航

    所谓面包屑,就是类似这种:首页 > 公司简介 > 发展历史 展示网站树型结构,并让网站访问者随时知道自己所处的位置,方便返回上几级. 将下面的代码添加到主题的 functions.php ...

随机推荐

  1. 使用 for 循环

    for 循环通过迭代一个给定向量或列表,重复执行某个表达式.for 循环的语法是这样的:for (var in vector) {expr}var 遍历 vector 中的各个元素值,expr 被反复 ...

  2. Android ViewGroup等容器控件的使用

    在Android中,可以自定义类,继承ViewGroup等容器类,以实现自己需要的布局显示.如果你在ViewGroup中增加了控件,却无法显示出 来,那么下面这个例子,就可以用来参考了.(主要是要实现 ...

  3. Java回顾之网络通信

    在这篇文章里,我们主要讨论如何使用Java实现网络通信,包括TCP通信.UDP通信.多播以及NIO. TCP连接 TCP的基础是Socket,在TCP连接中,我们会使用ServerSocket和Soc ...

  4. 递归--练习5--noi1751分解因数

    递归--练习5--noi1751分解因数 一.心得 想清楚子问题 想清楚递推表达式 没有全部AC说明还有自己没有想到的位置,试边界情况和查看题目要求 二.题目 1751:分解因数 总时间限制:  10 ...

  5. 解决mysql安装报错:无法启动此程序,因为计算机丢失MSVCP120.dll

    问题一: 因为装的是新系统,所以遇到mysql启动报错:无法启动此程序,因为计算机丢失MSVCP120.dll 后来参考这篇文章https://blog.csdn.net/huacode/articl ...

  6. bzoj2049: [Sdoi2008]Cave 洞穴勘测 lct裸题

    题意:三种操作一种摧毁一条边,一种链接一条边,一种查询两个点是否联通 题解:lct的link和cut即可 /********************************************** ...

  7. Invalid bound statement (not found)错误的可能原因

    其他原因导致此问题解决参考: 1.检查xml文件所在package名称是否和Mapper interface所在的包名 <mapper namespace="me.tspace.pm. ...

  8. offsetParent.scrollTop IE下一直报错,说“缺少对象”

    <div style="position:fiexd; top:135px;_position: absolute; right: 0pt; _top:expression_r(off ...

  9. HDU 1069 Monkey and Banana 基础DP

    题目链接:Monkey and Banana 大意:给出n种箱子的长宽高.每种不限个数.可以堆叠.询问可以达到的最高高度是多少. 要求两个箱子堆叠的时候叠加的面.上面的面的两维长度都严格小于下面的. ...

  10. CF 160D Edges in MST 最小生成树的性质,寻桥,缩点,批量处理 难度:3

    http://codeforces.com/problemset/problem/160/D 这道题要求哪条边存在于某个最小生成树中,哪条边不存在于最小生成树中,哪条边绝对存在于最小生成树中 明显桥边 ...