Bootstrap <基础十八>面包屑导航（Breadcrumbs）

面包屑导航（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 <基础一> css 概览

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

Bootstrap<基础十一>字体图标(Glyphicons)

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

Bootstrap<基础十三> 按钮组

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

Bootstrap<基础十五> 输入框组

Bootstrap<基础十六> 导航元素

Bootstrap<基础十七>导航栏

Bootstrap <基础十八>面包屑导航（Breadcrumbs）

Bootstrap <基础十九>分页

Bootstrap<基础二十> 标签

Bootstrap <基础二十一>徽章（Badges）

Bootstrap <基础二十二>超大屏幕（Jumbotron）

Bootstrap <基础二十三>页面标题（Page Header）

Bootstrap<基础二十四> 缩略图

Bootstrap <基础二十五>警告（Alerts）

Bootstrap <基础二十六>进度条

时间： 2024-12-31 23:09:25

Bootstrap <基础十八>面包屑导航（Breadcrumbs）的相关文章

Bootstrap<基础十六> 导航元素

原文:Bootstrap<基础十六> 导航元素 Bootstrap 提供的用于定义导航元素的一些选项.它们使用相同的标记和基类 .nav.Bootstrap 也提供了一个用于共享标记和状态的帮助器类.改变修饰的 class,可以在不同的样式间进行切换. 表格导航或标签创建一个标签式的导航菜单: 以一个带有 class .nav 的无序列表开始. 添加 class .nav-tabs. 下面的实例演示了这点: <!DOCTYPE html> <html> <hea

Bootstrap<基础十五> 输入框组

原文:Bootstrap<基础十五> 输入框组 Bootstrap 支持的另一个特性,输入框组.输入框组扩展自表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输入添加公共的元素.例如,可以添加美元符号,或者在 Twitter 用户名前添加 @,或者应用程序接口所需要的其他公共的元素. 向 .form-control 添加前缀或后缀元素的步骤如下: 把前缀后后缀元素放在一个带有 class .input-gr

Bootstrap <基础十九>分页

原文:Bootstrap <基础十九>分页 Bootstrap 支持的分页特性.分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页. 分页(Pagination) 下表列出了 Bootstrap 提供的处理分页的 class. Class 描述示例代码 .pagination 添加该 class 来在页面上显示分页. <ul class="pagination"> <li><a href=&quo

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

原文:Bootstrap<基础十> 响应式实用工具 Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发.这些可以通过媒体查询结合大型.小型和中型设备,实现内容对设备的显示和隐藏. 需要谨慎使用这些工具,避免在同一个站点创建完全不同的版本.响应式实用工具目前只适用于块和表切换. 超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面 (≥992px) 大屏幕桌面 (≥1200px) .visible-xs-* 可见隐藏隐藏隐藏 .visi

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

原文:Bootstrap <基础十二>下拉菜单(Dropdowns) Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与下拉菜单(Dropdown) JavaScript 插件的互动来实现. 如需使用下列菜单,只需要在 class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <html> <head> <title>Bootstrap

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

原文:Bootstrap<基础十四> 按钮下拉菜单使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class="caret"></span> 来指示按钮作为下拉菜单. 下面的实例演示了一个基本的简单的按钮下拉菜单: <!DOCTYPE html> <html> <head> <ti

Bootstrap组件学习之导航、标签、面包屑导航(精品)_javascript技巧

导航 Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分.改变修饰类可以改变样式. <!DOCTYPE html> <html> <head> <meta charset="utf-8">  <link rel="stylesheet" href="css/bootst

实例图说面包屑导航如何帮你简化站点的导航结构

导航是web产品中应用最广泛的基础组成之一,其主要功能是引导访客了解到站点的内容结构进而找到目标信息.作为基础组成之一,导航看起来简单,但却页面设计中最复杂繁琐的工序之一.因为作为站长我们想要网站结构更简洁明了.更快速的为我们的用户提供信息.但是问题出现了,简化了导航栏,访客可能无法快速了解到站点结构以及自己的位置,产生困惑;复杂了,导航臃肿不堪,层峦叠嶂,既不美观也不好用.那么我们应该如何处理呢?我们可以使用面包屑导航来让导航更方便,同时简化我们的导航结构. 面包屑导航通常会安放在出现在页面顶

php可应用于面包屑导航的递归寻找家谱树实现方法_php技巧

本文实例讲述了php可应用于面包屑导航的递归寻找家谱树实现方法.分享给大家供大家参考.具体实现方法如下: <?php echo "<pre>"; $area = array( array('id'=>1,'area'=>'北京','pid'=>0), array('id'=>2,'area'=>'广西','pid'=>0), array('id'=>3,'area'=>'广东','pid'=>0), array('