Bootstrap入門（十二）組件6：導航標簽頁
1.標簽頁
2.膠囊式標簽頁
3.垂直展示
4.兩端對齊的標簽頁
5.禁用的鏈接
6.添加下拉菜單
先引入本地的CSS文件和JS文件（注：1.bootstrap是需要jQuery支持的。2.需要在<body>當中添加）
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="jquery-3.1.0.min.js" type="text/javascript"></script> <script src="bootstrap.min.js" type="text/javascript"></script>
1.標簽頁
要展示一個導航，基本的類就是nav
一個標簽頁會有很多選項，這就要用到<ul>標簽
先展示一個基本的標簽頁
（class='active'用於使處於“被選擇的狀態”）
<div class="container"> <ul id="mytab" class="nav nav-tabs" role='tablist'> <li role='presentation' class='active'><a href="">HOME</a></li> <li role='presentation'><a href="">ASD</a></li> <li role='presentation'><a href="">SDF</a></li> </ul> </div>
效果：
鼠標移動到其他標簽上面，會有效果
但是點擊是沒有反應的，這是因為是依賴於JS的一個插件的，來使用一下
（mytab是之前設置的的一個id，因為是id，所以要在前面使用#來索引，a指里面的<a>標簽，“.click”式說當鼠標點擊時，有一個事件，執行show）
<script> $("#mytab a").click(function (e) { e.preventDefault(); $(this).tab("show"); }) </script>
刷新，點擊另一個標簽，切換了
2.膠囊式標簽頁
膠囊式其實指得就是顏色不一樣，只需要把class中的nav-tab改為nav-pills就可以了
<div class="container"> <ul id="mytab" class="nav nav-pills" role='tablist'> <li role='presentation' class='active'><a href="">HOME</a></li> <li role='presentation'><a href="">ASD</a></li> <li role='presentation'><a href="">SDF</a></li> </ul> </div>
執行，
點擊其他標簽，有同樣的效果
3.垂直展示
除了水平展示，我們也可以垂直展示
只需要在class中添加一個nav-stacked屬性就可以了
<div class="container"> <ul id="mytab" class="nav nav-pills nav-stacked" role='tablist'> <li role='presentation' class='active'><a href="">HOME</a></li> <li role='presentation'><a href="">ASD</a></li> <li role='presentation'><a href="">SDF</a></li> </ul> </div>
效果：
4.兩端對齊的標簽頁
也就是全屏的效果，只需要向class中添加nav-justified屬性就可以了
<div class="container"> <ul id="mytab" class="nav nav-pills nav-justified" role='tablist'> <li role='presentation' class='active'><a href="">HOME</a></li> <li role='presentation'><a href="">ASD</a></li> <li role='presentation'><a href="">SDF</a></li> </ul> </div>
效果：
5.禁用的鏈接
有時候不想某些標簽被使用，只需要在相應的<li>標簽上添加一個disabled的class就可以了
6.添加下拉菜單
比如在最后一個標簽那里添加一個下拉菜單
需要的操作是，在相應的<li>標簽添加一個class="dropdown"，然后在里面嵌套一個<ul><li>的組合就可以
<div class="container"> <ul id="mytab" class="nav nav-pills nav-justified" role='tablist'> <li role='presentation' class='active'><a href="">HOME</a></li> <li role='presentation'><a href="">ASD</a></li> <li role='presentation' class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown"> SDF <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> <li role="presentation"><a href="" role="menuitem" tabindex="-1">1</a></li> <li role="presentation"><a href="" role="menuitem" tabindex="-1">2</a></li> <li role="presentation"><a href="" role="menuitem" tabindex="-1">3</a></li> <li role="presentation"><a href="" role="menuitem" tabindex="-1">4</a></li> <li role="presentation"><a href="" role="menuitem" tabindex="-1">5</a></li> </ul> </li> </ul> </div>
效果:
同樣也可以運用到膠囊式當中，修改一些class即可
