Bootstrap4 面包屑导航（Breadcrumb）

Bootstrap4 教程 · 2019-03-02 08:59:00

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

Bootstrap 中的面包屑导航是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（bootstrap.min.css）中的 ::before 和 content 来添加，下面所示的 class 自动被添加：

.breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  color: #6c757d;
  content: "/";
}

Bootstrap4 面包屑导航实例

<ol class="breadcrumb"> <li class="breadcrumb-item active">Home</li> </ol> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active">Library</li> </ol> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active">Data</li> </ol>

我们也可以不用列表形式：

Bootstrap4 面包屑导航实例

<nav class="breadcrumb"> <a class="breadcrumb-item" href="#">Home</a> <a class="breadcrumb-item" href="#">Library</a> <a class="breadcrumb-item" href="#">Data</a> <span class="breadcrumb-item active">Bootstrap</span> </nav>

点击查看所有 Bootstrap4 教程文章: https://www.codercto.com/courses/l/26.html

查看所有标签

码农书籍

图论算法理论、实现及应用

王桂平//王衍//任嘉辰 / 北京大学 / 2011-1 / 54.00元

《图论算法理论、实现及应用》系统地介绍了图论算法理论，并选取经典的ACM／ICPC竞赛题目为例题阐述图论算法思想，侧重于图论算法的程序实现及应用。《图论算法理论、实现及应用》第1章介绍图的基本概念和图的两种存储表示方法：邻接矩阵和邻接表，第2～9章分别讨论图的遍历与活动网络问题，树与图的生成树，最短路径问题，可行遍性问题，网络流问题，支配集、覆盖集、独立集与匹配，图的连通性问题，平面图及图的着色问......一起来看看《图论算法理论、实现及应用》这本书的介绍吧!

码农工具