Bootstrap導航元素 · 致力于web前端技術撰寫

### 表格導航或標簽使用ul,li無序列表，給ul加上class .nav和.nav-tabs ~~~ <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>demo</title> <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src = "bootstrap-3.3.4-dist/jquery-2.1.4.min.js"></script> <script type="text/javascript" src = "bootstrap-3.3.4-dist/js/bootstrap.min.js"></script> <style type="text/css"> body{padding: 20px;} </style> </head> <body> <ul class="nav nav-tabs"> <li class="active"><a href="#">文章管理</a></li> <li><a href="#">類別管理</a></li> <li><a href="#">評論管理</a></li> <li><a href="#">博客配置</a></li> <li><a href="#">博客欄目</a></li> </ul> </body> </html> ~~~ ![](https://box.kancloud.cn/2016-04-07_570603f720abe.jpg) 點擊某個導航時，給其li加上class .active .nav-tabs>li.active>a,?.nav-tabs>li.active>a:focus,?.nav-tabs>li.active>a:hover?{ ? ? color:?#555; ? ? cursor:?default; ? ? background-color:?#fff; ? ? border:?1px solid?#ddd; ? ? border-bottom-color:?transparent; } ### 膠囊式的導航菜單 ### 基本的膠囊式導航菜單如果需要把標簽改成膠囊的樣式，只需要使用 class?**.nav-pills**?代替?**.nav-tabs**?即可。 ~~~ <body> <ul class="nav nav-pills"> <li class="active"><a href="#">文章管理</a></li> <li><a href="#">類別管理</a></li> <li><a href="#">評論管理</a></li> <li><a href="#">博客配置</a></li> <li><a href="#">博客欄目</a></li> </ul> </body> ~~~ ![](https://box.kancloud.cn/2016-04-07_570603f730e9a.jpg) .nav-pills?>?li?{ ????float:?left; } .nav-pills?>?li.active?>?a,?.nav-pills?>?li.active?>?a:focus,?.nav-pills?>?li.active?>?a:hover?{ ????color:?#FFF; ????background-color:?#337AB7; } ### 垂直的膠囊式導航菜單在使用 class?**.nav、.nav-pills**?的同時使用 class?**.nav-stacked**，讓膠囊垂直堆疊。 ~~~ <body> <div class="container"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">文章管理</a></li> <li><a href="#">類別管理</a></li> <li><a href="#">評論管理</a></li> <li><a href="#">博客配置</a></li> <li><a href="#">博客欄目</a></li> </ul> </div> </body> ~~~ ![](https://box.kancloud.cn/2016-04-07_570603f74193e.jpg) 加上.nav-stacked能使得膠囊垂直的原因： .nav-stacked?>?li?{ ????float:?none; } ### 兩端對齊的導航您可以在屏幕寬度大于 768px 時，通過在分別使用.nav、.nav-tabs****或.nav、.nav-pills的同時使用 class .nav-justified，讓標簽式或膠囊式導航菜單與父元素等寬。在更小的屏幕上，導航鏈接會堆疊。 ~~~ <body> <div class="container" style="background:#FFFDE1;"> <ul class="nav nav-pills nav-justified"> <li class="active"><a href="#">文章管理</a></li> <li><a href="#">類別管理</a></li> <li class="disabled"><a href="http://www.baidu.com">評論管理</a></li> <li><a href="#">博客配置</a></li> <li><a href="#">博客欄目</a></li> </ul> </div> </body> ~~~ 為了更好的看出效果，給.container加上背景色 ![](https://box.kancloud.cn/2016-04-07_570603f752168.jpg) 小屏幕時： ![](https://box.kancloud.cn/2016-04-07_570603f76235d.jpg) ### 禁用鏈接 li可以添加.active可以顯示目前是此菜單的狀態，同樣可以給其添加.disabled，使其顯示為不可用狀態，同時會禁用該鏈接的:hover狀態。 ~~~ <body> <div class="container" style="background:#FFFDE1;"> <ul class="nav nav-tabs"> <li class="active"><a href="#">文章管理</a></li> <li><a href="#">類別管理</a></li> <li class="disabled"><a href="http://www.baidu.com">評論管理</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle = "dropdown" href="#">博客配置 <span class = "caret"></span> </a> <ul class="dropdown-menu" role = "menu"> <li><a href="#">配置1</a></li> <li><a href="#">配置2</a></li> <li><a href="#">配置3</a></li> <li class="divider"></li> <li><a href="#">配置4</a></li> </ul> </li> <li><a href="#">博客欄目</a></li> </ul> </div> </body> ~~~ ![](https://box.kancloud.cn/2016-04-07_570603f77391f.jpg) 該 class 只會改變 < a > 的外觀，不會改變它的功能。在這里，需要使用自定義的 JavaScript 來禁用鏈接，盡管此處外觀看起來不可用，不過點擊可以發現，頁面仍會跳轉至百度首頁。 ### 下拉菜單 ### 添加帶有 .dropdown-menuclass 的無序列表 ~~~ <body> <div class="container" style="background:#FFFDE1;"> <ul class="nav nav-tabs"> <li class="active"><a href="#">文章管理</a></li> <li><a href="#">類別管理</a></li> <li class="disabled"><a href="http://www.baidu.com">評論管理</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle = "dropdown" href="#">博客配置 <span class = "caret"></span> </a> <ul class="dropdown-menu" role = "menu"> <li><a href="#">配置1</a></li> <li><a href="#">配置2</a></li> <li><a href="#">配置3</a></li> <li class="divider"></li> <li><a href="#">配置4</a></li> </ul> </li> <li><a href="#">博客欄目</a></li> </ul> </div> </body> ~~~ ![](https://box.kancloud.cn/2016-04-07_570603f7864b9.jpg)