Bootstrap带下拉的胶囊导航

带下拉的胶囊导航

下拉菜单组件（dropdown）是一个独立的组件，它可以和页面上的任何元素（如，按钮、导航等）进行组合，让相应的元素具有下拉功能。

如果把导航和下拉菜单进行组合，并让导航链接充当下拉菜单的开关，就可以制作出带下拉的导航。当用户点击导航链接时，可以显示或隐藏下拉菜单。

如果要给导航中的某个链接添加下拉菜单，只需给相应的列表项添加 .dropdown 类，再给它嵌套一个下拉菜单组件即可。如：

1. <ul class="nav nav-tabs">
2.   <li class="active"><a href="#">Home</a></li>
3.   <li><a href="#">Help</a></li>
4.   <li class="dropdown">
5.     <a class="dropdown-toggle" data-toggle="dropdown" href="#">
6.       Dropdown <span class="caret"></span>
7.     </a>
8.     <ul class="dropdown-menu">
9.       <li><a href="#">Action</a></li>
10.       <li><a href="#">Another action</a></li>
11.       <li><a href="#">Something else here</a></li>
12.       <li role="separator" class="divider"></li>
13.       <li><a href="#">Separated link</a></li>
14.     </ul>
15.   </li>
16. </ul>

效果如图 3‑39所示：

图3-39 带下拉的标签导航

同理，如果想得到带下拉菜单的胶囊式导航，只要把 .nav-tabs 类，替换成 .nav-pills 类即可。如：

1. <ul class="nav nav-pills">
2.   <li class="active"><a href="#">Home</a></li>
3.   <li><a href="#">Help</a></li>
4.   <li class="dropdown">
5.     <a class="dropdown-toggle" data-toggle="dropdown" href="#">
6.       Dropdown <span class="caret"></span>
7.     </a>
8.     <ul class="dropdown-menu">
9.       <li><a href="#">Action</a></li>
10.       <li><a href="#">Another action</a></li>
11.       <li><a href="#">Something else here</a></li>
12.       <li role="separator" class="divider"></li>
13.       <li><a href="#">Separated link</a></li>
14.     </ul>
15.   </li>
16. </ul>

效果如图 3‑40所示：

图3-40 带下拉的胶囊导航

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。