Bootstrap 基础教程

Bootstrap 插件

Pagination Bootstrap Barre de navigation Bootstrap

Navigation de poudre de beurre Bootstrap

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

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

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

以下示例演示了导航路径：

在线示例

示例

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap 示例　-　导航路径</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="breadcrumb">
	<li><a href="#">Accueil</a></li>
	<li><a href="#">2012</a></li>
	<li class="active">Decembre</li>
</ul>
</body>
</html>

Essayons de voir ‹/›

Les résultats sont affichés comme suit :

Pagination Bootstrap Barre de navigation Bootstrap