面包屑导航（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<基础十六> 导航元素

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

  2. Bootstrap <基础十九>分页

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

  3. Bootstrap<基础十五> 输入框组

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

  4. Bootstrap<基础十四> 按钮下拉菜单

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

  5. Bootstrap <基础十二>下拉菜单（Dropdowns）

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

  6. Bootstrap<基础十> 响应式实用工具

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

  7. Bootstrap面包屑导航

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

  8. Bootsrtap 面包屑导航(Breadcrums)

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

  9. Bootstrap——面包屑导航（Breadcrumbs）

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

随机推荐

  1. 。U盘安装CentOS6.5

    最近着手自学Linux,网上有很多CentOS的各种版本,但查阅到的教程基本都是关于CentOS6的,本着最新的版本并不一定是最适合的版本的原则,我选择安装CentOS6.5.安装系统稍微不注意就会出 ...

  2. h5移动端让文字不可选中复制

    可以用css属性来控制 -moz-user-select:none; -webkit-user-select:none;

  3. srand()以及rand()函数用法

    srand()就是给rand()提供种子seed 如果srand每次输入的数值是一样的,那么每次运行产生的随机数也是一样的, srand(n) for(10) rand()也就是说,以一个固定的数值作 ...

  4. phprpc的简单使用

    PHPRPC 是一个轻型的.安全的.跨网际的.跨语言的.跨平台的.跨环境的.跨域的.支持复杂对象传输的.支持引用参数传递的.支持内容输出重定向的.支持分级错误处理的.支持会话的.面向服务的高性能远程过 ...

  5. &和&&

    int j = 5,k = 3; if(!(j==k) && (j == 1 + k++ )) { } System.out.println(j); System.out.printl ...

  6. js巧用apply方法实现数组最值以及合并

    尽管js的apply方法在平常的使用中并不多见,但是在某些地方使用的还是很有帮助性的,这里就和大家说两个比较实用的例子:1.数组最大最小值 求数组中的最大最小值,js有相应的方法:Math.min() ...

  7. Openstack+Kubernetes+Docker微服务实践之路--RPC

    重点来了,本文全面阐述一下我们的RPC是怎么实现并如何使用的,跟Kubernetes和Openstack怎么结合.  在选型一文中说到我们选定的RPC框架是Apache Thrift,它的用法是在Ma ...

  8. LINQ之路 6：延迟执行(Deferred Execution)

    LINQ中大部分查询运算符都有一个非常重要的特性:延迟执行.这意味着,他们不是在查询创建的时候执行,而是在遍历的时候执行(换句话说,当enumerator的MoveNext方法被调用时).让我们考虑下 ...

  9. SublimeText2 快捷键一览表

    SublimeText2 快捷键一览表 Sublime Text比起Notepad++,UltraEdit之类Code编辑器来说,其功能有过之而无不及,配合着各种插件使用,Sublime Text在实 ...

  10. Seo标签权重

    最近接手凤凰焦点的业务,首先做的现有线上业务梳理,接着是拆分模块. 页头部分有些争议.假设把页头做成一个组件,pc端因为不能页面加载的差不多了页头才突兀的出来一是体验不好,还有不利于seo,最终决定还 ...