转载

带有下拉菜单的标签

添加一个下拉菜单

用一点点额外 HTML 代码并加入下拉菜单插件的 JavaScript 插件即可。

导航菜单与下拉菜单使用相似的语法。默认情况下，列表项的锚与一些数据属性协同合作来触发带有 .dropdown-menu class 的无序列表。

带有下拉菜单的标签

向标签添加下拉菜单的步骤如下：

以一个带有 class .nav 的无序列表开始。
添加 class .nav-tabs。
添加带有 .dropdown-menu class 的无序列表。

 <!DOCTYPE html> <html> <head>    <title>Bootstrap 实例 - 带有下拉菜单的标签</title>    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">    <script src="/scripts/jquery.min.js"></script>    <script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body>  <p>带有下拉菜单的标签</p> <ul class="nav nav-tabs">    <li class="active"><a href="#">Home</a></li>    <li><a href="#">SVN</a></li>    <li><a href="#">iOS</a></li>    <li><a href="#">VB.Net</a></li>    <li class="dropdown">       <a class="dropdown-toggle" data-toggle="dropdown" href="#">          Java <span class="caret"></span>       </a>       <ul class="dropdown-menu">          <li><a href="#">Swing</a></li>          <li><a href="#">jMeter</a></li>          <li><a href="#">EJB</a></li>          <li class="divider"></li>          <li><a href="#">分离的链接</a></li>       </ul>    </li>    <li><a href="#">PHP</a></li> </ul>  </body> </html>

带有下拉菜单的标签

结果如下所示：

Home
SVN
iOS
VB.Net
Java
- Swing
- jMeter
- EJB
- 分离的链接
PHP

带下拉菜单的标签页

Home
Help
Dropdown
- Action
- Another action
- Something else here
- Separated link

 <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>

带下拉菜单的胶囊式标签页

Home
Help
Dropdown
- Action
- Another action
- Something else here
- Separated link

 <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>   ... </ul>

步骤与创建带有下拉菜单的标签相同，只是需要把 .nav-tabs class 改为 .nav-pills，如下面的实例所示：

 <!DOCTYPE html> <html> <head>    <title>Bootstrap 实例 - 带有下拉菜单的胶囊</title>    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">    <script src="/scripts/jquery.min.js"></script>    <script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body>  <p>带有下拉菜单的胶囊</p> <ul class="nav nav-pills">    <li class="active"><a href="#">Home</a></li>    <li><a href="#">SVN</a></li>    <li><a href="#">iOS</a></li>    <li><a href="#">VB.Net</a></li>    <li class="dropdown">       <a class="dropdown-toggle" data-toggle="dropdown" href="#">          Java <span class="caret"></span>       </a>       <ul class="dropdown-menu">          <li><a href="#">Swing</a></li>          <li><a href="#">jMeter</a></li>          <li><a href="#">EJB</a></li>          <li class="divider"></li>          <li><a href="#">分离的链接</a></li>       </ul>    </li>    <li><a href="#">PHP</a></li> </ul>  </body> </html>