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. SDOI2018划水记

    DAY -1 明天就要走了,今天就怎么也提不起兴趣来做题了.花了一个上午研究如何搞背景动画结果华丽丽失败了,为什么我自己设置的时候动画会在最上层啊(呜呜~~.下午随便打了板子又开始颓废了,然后看生蚝还 ...

  2. UVa 11609 组队(快速幂)

    https://vjudge.net/problem/UVA-11609 题意: 有n个人,选一个或多个人参加比赛,其中一名当队长,有多少种方案?如果参赛者完全相同,但队长不同,算作不同的方案. 思路 ...

  3. 代理模式:利用JDK原生动态实现AOP

    代理模式:利用JDK原生动态实现AOP http://www.cnblogs.com/qiuyong/p/6412870.html 1.概述 含义:控制对对象的访问. 作用:详细控制某个(某类)某对象 ...

  4. 理解flex布局

    我们传统的布局方式是基于在盒子模型下的,依赖于display属性的,position属性的或者是float属性的,但是在传统的布局上面并不好布局; 比如我们想让某个元素垂直居中的话,我们常见的会让其元 ...

  5. 重塑 data.table

    在前面的章节中,我们已经学习了如何使用 reshape2 扩展包对 data.frame 进行塑形.其实,data.table 扩展包为 data.table 对象提供了更快更强的 dcast( ) ...

  6. linux下给cpu加压

    计算pi: time (echo "scale=500;4*a(1)"|bc -l -q) #!/bin/bashfor i in `seq 1 1000`do    (time ...

  7. URAL 1106 Two Teams (DFS)

    题意 小组里有N个人,每个人都有一个或多个朋友在小组里.将小组分成两个队伍,每个队伍的任意一个成员都有至少一个朋友在另一个队伍. 思路 一开始觉得和前几天做过的一道2-sat(每个队伍任意两个成员都必 ...

  8. gdb调试libtool封装的可执行文件

    http://www.gnu.org/software/libtool/manual/html_node/Debugging-executables.html 3.4 Debugging execut ...

  9. FZU 2150 Fire Game 广度优先搜索,暴力 难度:0

    http://acm.fzu.edu.cn/problem.php?pid=2150 注意这道题可以任选两个点作为起点,但是时间仍足以穷举两个点的所有可能 #include <cstdio> ...

  10. python3高阶函数:map(),reduce(),filter()的区别

    转载请注明出处:https://www.cnblogs.com/shapeL/p/9057152.html 1.map():遍历序列,对序列中每个元素进行操作,最终获取新的序列 print(list( ...