Bootstrap_下拉菜单

在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件。

一、普通下拉菜单

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">下拉菜单
      <!-- 下拉箭头-->
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu"  aria-labelledby="dropdownMenu1">
      <!-- 菜单标题-->
      <li class="dropdown-header">第一部分菜单头部</li>
      <li><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
      <!-- 分割线-->
      <li class="divider"></li>
      <li class="dropdown-header">菜单选中状态</li>
      <li class="active"><a tabindex="-1" href="#">选中状态</a></li>
      <li class="divider"></li>
      <li class="dropdown-header">菜单禁用状态</li>
      <li class="disabled"><a tabindex="-1" href="#">禁用状态</a></li>
    </ul>
</div>

 

　　

1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为:

<div class="dropdown"></div>

2、使用了一个<button>按钮做为父菜单，并且定义类名“.dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致，此示例为:

data-toggle="dropdown"

3、下拉菜单项使用一个ul列表，并且定义一个类名为“.dropdown-menu”，此示例为:

<ul class="dropdown-menu">

4、在Bootstrap框架中的下拉菜单还提供了下拉分隔线，假设下拉菜单有两个组，那么组与组之间可以通过添加一个空的<li>，并且给这个<li>添加类名“.divider”来实现添加下拉分隔线的功能。

<!-- 分割线-->
<li class="divider"></li>

5、为了让这个分组更明显，还可以给每个组添加一个头部（标题）。

<!-- 菜单标题-->
<li class="dropdown-header">第一部分菜单头部</li>

6、菜单项有当前状态“.active”和禁用状态“.disabled”。这两种状态使用方法只需要在对应的菜单项上添加对应的类名。

<li class="active"><a href="#">选中状态</a></li>
<li class="disabled"><a href="#">禁用状态</a></li>

7、对齐方式

　　Bootstrap框架中下拉菜单默认是左对齐。

　　如果你想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“.pull-right”或者“.dropdown-menu-right”类名。

<ul class="dropdown-menu pull-right"  aria-labelledby="dropdownMenu1">

二、按钮下拉菜单

　　按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。

　　不同的是在普通的下拉菜单的基础上封装了按钮（.btn）样式效果。

　　按钮下拉菜单其实就是普通的下拉菜单，唯一不同的是外部容器“div.dropdown”换成了“div.btn-group”。

<div class="btn-group">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="##">按钮下拉菜单项</a></li>
    <li><a href="##">按钮下拉菜单项</a></li>
    <li><a href="##">按钮下拉菜单项</a></li>
    <li><a href="##">按钮下拉菜单项</a></li>
  </ul>
</div>

 

三、向上弹起的下拉菜单
　　有些菜单是需要向上弹出的。在Bootstrap框架中专门为这种效果提代了一个类名“dropup”。

　　只需要在“btn-group”上添加“.dropup”这个类名。

　　如果是普通向上弹出下拉菜单，只需要在“dropdown”类名基础上追加“.dropup”类名即可。

<div class="btn-group dropup">