Bootstrap 面包屑導(dǎo)航

簡介

使用 Bootstrap，您可以創(chuàng)建面包屑導(dǎo)航。在本教程中，您將學習如何做到這點。

下面是最終創(chuàng)建的輸出結(jié)果：

breadcrumbs demo

通過 Bootstrap 創(chuàng)建面包屑導(dǎo)航的 HTML5 代碼

實例

<!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="utf-8">
????<title>Bootstrap面包屑導(dǎo)航</title>
????<meta name="description" content="Bootstrap breadcrumbs Example">
????<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
????<style type="text/css">
????????body {
????????????padding: 20px;
????????}
????</style>
</head>
<body>
<div class="container">
????<div class="row">
????????<div class="span6">
????????????<ul class="breadcrumb">
????????????????<li>
????????????????????<a href="#">Home</a> <span class="divider">></span>
????????????????</li>
????????????????<li>
????????????????????<a href="#">Tutorials</a> <span class="divider">></span>
????????????????</li>
????????????????<li class="active">HTML5</li>
????????????</ul>
????????</div>
????</div>
</div>
</body>
</html>

在線查看實例

CSS class "breadcrumb" 的樣式位于 bootstrap.css 中的行號 2725 到 2755 （版本 2.0.1）。從行號 2749 到 2752 是 class "divider" 的樣式。

點擊這里，下載本教程中使用到的所有 HTML、CSS、JS 和圖片文件。

其他擴展

上一篇：Bootstrap 進度條下一篇：Bootstrap 分頁