开发者学堂课程【前端开发框架Bootstrap使用教程：Bootstrap组件_导航】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/360/detail/4244
Bootstrap组件_导航
目录：
一、导航
二、标签页
三、胶襄式标签页
四、两端对齐的标签页
五、禁用的链接
六、添加下拉菜单
一、导航
Bootstrap 中的导航组件都依赖同一个 .nav 类,状态类也是共用的。改变修饰类可以改变样式。
在标签页上使用导航需要依赖 JavaScript 标签页插件
由于标签页需要控制内容区的展示,因此,你必须使用标签页组件的 JavaScript 插件。另外还要添加 role 和
ARIA 属性-详细信息请参考该插件的 实例。
确保导航组件的可访问性
如果你在使用导航组件实现导航条功能,务必在<ul> 的最外侧的逻辑父元素上添加 role=" navigation"属性，或者用一个 <nav> 元素包裹整个导航组件。不要将 role 属性添加到<ul> 上，因为这样可以被辅助设备(残疾人用的)，上被识别为一个真正的列表。
二、标签页
注意 .nav-tabs 类依赖 .nav 基类。
实例:
<ul class="nav nav-tabs" 》
<li role="presentation" class="active"><a href="#" >Home</a></li>
<li role="presentation"><a href="#">Profile</a></1i>
<li role-"presentation"><a href="#" >Messages</a></li>
</u1>
新建nav.html文件，编辑：
1 <! DOCTYPE html>
2 <html lang= "en">
3 <head>
4 <meta charset="UTF-8">
5 <title>导航</title>
6 <link href="bootstrap.min.css" rel="stylesheet"/>
7 < /head>
8 <body>
9 <div class= "container">
10 <ul class="nav nav- tabs ">
11 <li role="presentation">
12 <a href="#">home</a>
13 </li>
14 <li role="presentation">
15 <a href="'#">1</a>
16 </li>
17 <li role= "presentation">
18 <a href="'#">2</a>
19 </li>
20 <li role= "presentation">
21 <a href="#">3</a>
22 </li>
23 <li role="presentation">
24 <a href="#">4</a>
25 </li>
26 </ul>
27 </div>
28 <body>
29 < /head>
30 < /html>
打开浏览器可以看到结果为一个home的导航栏组件效果。
正常情况下，第一个home效果应该是默认选中的。
在第11行也就是第一个类标签添加class="active"类，刷新结果看他们的效果区别。
此时看到第一个是默认选中状态，当然后边几个也应该是默认选中状态。依赖于引用JS。
继续编辑上程序：
……
8 <body>
9 <div class= "container">
10 <ul class="nav nav-tabs ”id="mytab">
11 <li role="presentation" class="active">
……
27 </div>
28 <script src="jquery-2.2.1.min.js"></script>
29 <script src="bootstrap.min.js"></script>
30 <script>
31 $("#mytab a") .click(function(e) {
32 $(this) . tab("show") ;
33 })
34 </script>
35 < /body>
36 < /html>
刷新浏览器看结果效果。
三、胶囊式标签页
1、HTML 标记相同，但使用.nav-pills 类
实例：
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#" >Home</a></1i>
<li role="presentation"><a href="#" >Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
继续打开 nav.html 文件编辑：
将 <ul class="nav nav-tabs ”id="mytab">
改为<ul class="nav nav-pills ”id="mytab">
刷新浏览器看结果。Home被添加了颜色。
2、胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked 类。
实例：
<ul classu"nav nav-pills nav-stacked">
</ul>
继续打开nav.html文件编辑：
将10 <ul class="nav nav-pills ”id="mytab">
改为<ul class="nav nav-pills nav-stacked”id="mytab">
刷新浏览器看结果。
四、两端对齐的标签页
在大于768px的屏幕上，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。
两端对齐的导航条导航链接已经被弃用了。
1.Safari和响应式两端对齐导航
从v8.0版本开始, Safari 有一个bug :对于两端对齐的导航,水平改变浏览器大小将引起绘制错误。此bug可以在两端对齐的导航实例中得到重现。
实例：
<ul class="nav nav-tabs nav-justified">
…
</ul>
<ul class="nav nav-pills nav-justified">
…
</ul>
继续打开nav.html文件编辑：
将10 <ul class="nav nav-pills nav-stacked”id="mytab">
改为<ul class="nav nav-tabs nav-stacked nav-justified”id="mytab">
刷新浏览器看结果效果。
五、禁用的链接
对任何导航组件(标签页、胶囊式标签页) ,都可以添加.disabled类，从而实现链接为灰色且没有鼠标悬停效果。
链接功能不受到影响
这个类只改变<a> 的外观,不改变功能。可以自己写JavaScript禁用这里的链接。
实例：
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></1i>
...
</ul>
继续打开nav.html文件编辑：
修改：<li role= "presentation">
<a href="#">2</a>
为：
<li role= "presentation" class="disabled">
<a href="#">2</a>
刷新浏览器看结果效果。
六、添加下拉菜单
用一点额外HTML代码并加入下拉菜单插件的JavaScript插件即可。
带下拉菜单的标签页
<ul class="nav nav-tabs">
…
<li role="presentation" class="dropdown" >
<a class="dropdown-toggle" data- toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-
expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
…
</ul>
</li>
…
</ul>
继续打开nav.html文件编辑：
修改：<li role= "presentation">
<a href="#">4</a>
为：
<li role="presentation">
<a href="#" class= "dropdown- toggle" data- toggle="dropdown" role= "button">
下拉菜单
<span class="caret"></span>
</a>
<ul class="dropdown- menu" role= "menu">
<li><a href="#">1</a> </li>
<li><a href="#">1</a> </li>
<li><a href="#">1</a> </l1>
<li><a href="#">1</a> </li>
<li><a href="#">1</a> </li>
</ul>
刷新浏览器看结果。
带下拉菜单的胶囊式标签页
实例：
<ul class="nav nav-pills">
…
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle=" dropdown" href="#" role="button" aria-haspopup="true" aria-
expanded="false">
Dropdown <span class-"caret"></span>
</a>
<ul class=" dropdown-menu">
…
</ul>
</li>
...
</u1>
