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. (转载)ubuntu卸载opencv并重装opencv3.0.0

    ubuntu卸载opencv并重装opencv3.0.0 一. 卸载opencv2.4.9: Going to the "build" folder directory of op ...

  2. USB.资料

    1.百度搜索 “usb java” 1.1.基于usb4java实现的java下的usb通信 - tomi_mint - 博客园.html(https://www.cnblogs.com/sowhat ...

  3. javaScript 真经 小感 this 指向

    编程世界只存在两种基本元素:一个是数据.一个是代码. (能写代码算入门,能处理复杂场景或者数据算合格,能不变应万变是不朽) 最流行的编程思想莫过于面向对象编程,因为面向对象编程思想把数据和代码结合成统 ...

  4. Android:你好,androidX!再见,android.support

    1.AndroidX简介 点击查看Android文档中对androidx的简介 按照官方文档说明 androidx 是对 android.support.xxx 包的整理后产物.由于之前的suppor ...

  5. 【原创】遇到:Invalid layout of java.lang.String at value 这样的问题,该怎么办呢?

    Invalid layout of java.lang.String at value## A fatal error has been detected by the Java Runtime En ...

  6. vs警告 当前源代码跟内置的版本不一致解决办法

    本文转载于:http://blog.csdn.net/bull521/article/details/51334464 vs警告 当前源代码跟内置的版本不一致解决办法 1.删除掉 我的文档/visua ...

  7. HTML字符转码

    以下是HTML特殊字符的编码表: 标记 编码 实际名称 ™ ™ € € Space   ! ! " " " # # $ $ % % & & & ' ...

  8. 自定义jQuery的animate动画

    //擦除效果 jQuery.extend(jQuery.easing, { easeOutBack : function(x, t, b, c, d, s) { s = s || 1.3; retur ...

  9. 2018.12.4 王二的经济学故事 DYNASTIES

    1从王二卖粮食:外汇储备缩水 2王二兑酒:固定汇率与变动汇率 3苹果换梨子:固定汇率的代价 4跨港购物:一价定律,汇率的价格传递效应 5富人吃透,春运火车票涨价:供需问题,弱者保护,让富人多消费,给穷 ...

  10. python print 控制台输出中文

    在pycharm里面的控制台用print输出信息,  本意想输出中文, 但是实际上是u\xxxx. 可以用这种方式: print("%s " % cn_string)