知識點(diǎn)
務(wù)必使用 <nav> 元素晨雳，或者名党，如果使用的是通用的 <div> 元素的話，務(wù)必為導(dǎo)航條設(shè)置
role="navigation"屬性帝际，這樣能夠讓使用輔助設(shè)備的用戶明確知道這是一個(gè)導(dǎo)航區(qū)域。
導(dǎo)航條的默認(rèn)高度是 50px饶辙。
創(chuàng)建一個(gè)默認(rèn)的導(dǎo)航欄的步驟如下：
- 向 <nav> 標(biāo)簽添加 class
.navbar蹲诀、.navbar-default。 - 向上面的元素添加
role="navigation"弃揽，有助于增加可訪問性脯爪。 - 向 <div> 元素添加一個(gè)標(biāo)題 class
.navbar-header，內(nèi)部包含了帶有 class.navbar-brand的<a>元素矿微。這會(huì)讓文本看起來更大一號痕慢。 - 為了向?qū)Ш綑谔砑渔溄樱恍枰唵蔚靥砑訋в?class
.nav冷冗、.navbar-nav的無序列表即可守屉。
表單
.navbar-form
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
按鈕、文本蒿辙、鏈接
- 按鈕：對于不包含在
<form>中的<button>元素，加上.navbar-btn后滨巴，可以讓它在導(dǎo)航條里垂直居中思灌。 - 文本：把文本包裹在
.navbar-text中時(shí)，會(huì)正確的行距和顏色恭取，通常使用<p>標(biāo)簽泰偿。 - 鏈接：在導(dǎo)航組件之外的鏈接，使用
.navbar-link類可以讓鏈接有正確的默認(rèn)顏色和反色設(shè)置
組件排列
通過添加 .navbar-left 和 .navbar-right 工具類讓導(dǎo)航鏈接蜈垮、表單耗跛、按鈕或文本對齊。兩個(gè)類都會(huì)通過 CSS 設(shè)置特定方向的浮動(dòng)樣式攒发。
這些類是 .pull-left 和 .pull-right 的 mixin 版本调塌，但是他們被限定在了媒體查詢（media query）中，這樣可以更容易的在各種尺寸的屏幕上處理導(dǎo)航條組件惠猿。
固定在頂部/底部羔砾、靜止在頂部
- 固定在頂部：
.navbar-fixed-top類；還可包含一個(gè) .container 或 .container-fluid 容器偶妖，從而讓導(dǎo)航條居中姜凄，并在兩側(cè)添加內(nèi)補(bǔ)（padding）。 - 固定在底部：
.navbar-fixed-bottom - 靜止在頂部：
.navbar-static-top
反色的導(dǎo)航條
.navbar-inverse
路徑導(dǎo)航
.active標(biāo)明當(dāng)前頁面的位置趾访；
各路徑間的分隔符已經(jīng)自動(dòng)通過 CSS 的 :before 和 content 屬性添加了态秧。
響應(yīng)式導(dǎo)航
使用三個(gè)帶有 class .icon-bar 的 <span> 創(chuàng)建所謂的漢堡按鈕。
面包屑導(dǎo)航
Bootstrap 中的面包屑導(dǎo)航（Breadcrumbs）是一個(gè)簡單的帶有 .breadcrumb class 的無序列表扼鞋。
.breadcrumb > li + li:before {
color: #CCCCCC;
content: "/ ";
padding: 0 5px;}
實(shí)踐
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Resource-type" content="Document"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>組件-導(dǎo)航欄</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<style>
<!--
.line{border-top:1px solid #afd9ee;margin:20px 0;}
-->
</style>
</head>
<body style="padding:100px 0;">
<div class="container">
<!--默認(rèn)導(dǎo)航欄-->
<nav class="navbar navbar-default" role="navigation"><!--默認(rèn)的父級類名-->
<div class="navbar-header">
<a href="#" class="navbar-brand">導(dǎo)航標(biāo)題</a>
</div>
<div class="collapse navbar-collapse"><!--這個(gè)要記得加上申鱼，否則導(dǎo)航呈現(xiàn)出來是沒有邊距的-->
<ul class="nav navbar-nav">
<li class="active"><a href="#">導(dǎo)航一</a></li><!--active 表明當(dāng)前頁面的位置-->
<li><a href="#">導(dǎo)航二</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜單導(dǎo)航
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">下拉1</a></li>
<li><a href="#">下拉2</a></li>
<li><a href="#">下拉3</a></li>
</ul>
</li>
<li><a href="#">導(dǎo)航四</a></li>
</ul>
</div>
</nav>
<div class="line"></div>
<!--帶表單的導(dǎo)航欄空扎，按鈕-->
<nav class="navbar navbar-default" role="navigation"><!--默認(rèn)的父級類名-->
<div class="navbar-header">
<a href="#" class="navbar-brand">導(dǎo)航標(biāo)題</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">導(dǎo)航一</a></li>
<li><a href="#">導(dǎo)航二</a></li>
<li>
<form class="navbar-form" role="search">
<div class="form-group">
<input type="text" value="" name="" class="form-control"/>
<button type="submit" class="btn btn-default">button</button>
</div>
</form>
</li>
<li><a href="#">導(dǎo)航四</a></li>
<li><p class="navbar-text">導(dǎo)航中包含的文本</p></li>
</ul>
</div>
</nav>
<div class="line"></div>
<!--左對齊，右對齊.navbar-left 和 .navbar-right-->
<nav class="navbar navbar-default" role="navigation"><!--默認(rèn)的父級類名-->
<div class="navbar-header">
<a href="#" class="navbar-brand">導(dǎo)航標(biāo)題</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">navbar-right</a></li>
<li><a href="#">導(dǎo)航二</a></li>
</ul>
</div>
</nav>
<div class="line"></div>
<!--響應(yīng)式導(dǎo)航-->
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切換導(dǎo)航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button><!--這個(gè)button就形成一個(gè)漢堡包形式的按鈕润讥，在小屏的設(shè)備下呈現(xiàn)-->
<a class="navbar-brand" href="#">響應(yīng)式導(dǎo)航</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分離的鏈接</a></li>
<li class="divider"></li>
<li><a href="#">另一個(gè)分離的鏈接</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="line"></div>
<!--面包屑導(dǎo)航-->
<ol class="breadcrumb">
<li><a href="#">首頁</a></li>
<li><a href="#">類別</a></li>
<li class="active">文章標(biāo)題</li>
</ol>
</div>
<div class="line"></div>
<!--固定在頂部/底部转锈、靜止在頂部-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<a href="#" class="navbar-brand">navbar-fixed-top</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">導(dǎo)航一</a></li>
<li><a href="#">導(dǎo)航二</a></li>
</ul>
</div>
</nav>
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="navbar-header">
<a href="#" class="navbar-brand">navbar-fixed-bottom</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">導(dǎo)航一</a></li>
<li><a href="#">導(dǎo)航二</a></li>
</ul>
</div>
</nav>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="navbar-header">
<a href="#" class="navbar-brand">navbar-static-top</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">導(dǎo)航一</a></li>
<li><a href="#">導(dǎo)航二</a></li>
</ul>
</div>
</nav>
</body>
</html>
