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

Bootstrap 中的面包屑导航(Breadcrumbs)是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS(bootstrap.min.css)中下面所示的 class 自动被添加:

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

下面的实例演示了面包屑导航:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 面包屑导航</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body> <ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">2013</a></li>
<li class="active">十一月</li>
</ol> </body>
</html>

结果如下所示:

 

Bootstrap <基础十八>面包屑导航(Breadcrumbs)的更多相关文章

  1. Bootstrap&lt;基础十六&gt; 导航元素

    Bootstrap 提供的用于定义导航元素的一些选项.它们使用相同的标记和基类 .nav.Bootstrap 也提供了一个用于共享标记和状态的帮助器类.改变修饰的 class,可以在不同的样式间进行切 ...

  2. Bootstrap &lt;基础十九&gt;分页

    Bootstrap 支持的分页特性.分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页. 分页(Pagination) 下表列出了 Bootstrap 提 ...

  3. Bootstrap&lt;基础十五&gt; 输入框组

    Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输 ...

  4. Bootstrap&lt;基础十四&gt; 按钮下拉菜单

    使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...

  5. Bootstrap &lt;基础十二&gt;下拉菜单(Dropdowns)

    Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 ...

  6. Bootstrap&lt;基础十&gt; 响应式实用工具

    Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发.这些可以通过媒体查询结合大型.小型和中型设备,实现内容对设备的显示和隐藏. 需要谨慎使用这些工具,避免在同一个站点创建完全不同 ...

  7. Bootstrap面包屑导航

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

  8. Bootsrtap 面包屑导航(Breadcrums)

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

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

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

随机推荐

  1. Sql--列操作

    Oracle的列操作(增加列,修改列,删除列),包括操作多列增加一列:   alter table emp4 add test varchar2(10);修改一列:   alter table emp ...

  2. (转)面向移动设备的HTML5开发框架

    (原)http://www.cnblogs.com/itech/archive/2013/07/27/3220352.html 面向移动设备的HTML5开发框架   转自:http://blogrea ...

  3. html5视频小站

    本文目的 练习HTML5 学习css3新特性 学习和熟悉移动html基础开发,如触摸知识 网站特点 界面设计仿360影视移动网站 支持主流现代浏览器(注:IE9,chrome,firefox.safa ...

  4. Hibernate工作原理及为什么要用?(转http://www.cnblogs.com/javaNewegg/archive/2011/08/28/2156521.html)

    原理:1.通过Configuration().configure();读取并解析hibernate.cfg.xml配置文件2.由hibernate.cfg.xml中的<mapping resou ...

  5. CMake入门(二)

    CMake入门(二) 最后更新日期:2014-04-25 by kagula 阅读前提:<CMake入门(一)>.Linux的基本操作 环境: Windows 8.1 64bit英文版.V ...

  6. sqrt()平方根计算函数的实现1——二分法

    C语言标准库: http://www.cplusplus.com/reference/cmath/ 在一个区间中,每次拿中间数的平方来试验,如果大了,就再试左区间的中间数:如果小了,就再拿右区间的中间 ...

  7. OSI七层网络模型

    概述: OSI是一个开放性的通信系统互连参考模型,他是一个定义得非常好的协议规范.OSI模型有7层结构,每层都可以有几个子层. OSI的7层从上到下分别是 7 应用层 6 表示层 5 会话层 4 传输 ...

  8. mysql 在 win 安装 最全攻略(附转载的乱码终极解决方案)以及解决data too long for column &#39;name&#39; at row 1, 一种可能就是因为编码一致性问题.

    [博客园cnblogs笔者m-yb原创,转载请加链接,公众号aandb7, github.com/mayangbo666,QQ群927113708] https://www.cnblogs.com/m ...

  9. FreeMarker内建函数

    内建函数 内建函数语法格式: 变量+?+函数名称 获取集合大小 我们通常要得到某个集合的大小,如下图: 我们使用size函数来实现,代码如下: 共  ${goodsList?size}  条记录 转换 ...

  10. 杂项:Juice UI

    ylbtech-杂项:Juice UI Juice UI是开源的 WebForms 控件集,是一个功能强大的框架,它可以给ASP .NET开发人员带来丰富的.可以作为易于使用的控件的jQuery UI ...