Bootstrap-v3-组件-下拉菜单

下拉菜单

用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性。

1、实例

通过为下拉菜单的父元素设置 .dropdown类，可以让菜单向下弹出。通过为下拉菜单的父元素设置 .dropup 类，可以让菜单向上弹出（默认是向下弹出的）。

 

   <!-- 下拉菜单(菜单向下弹出) -->
   <div class="dropdown">
     <button class="btn btn-default" data-toggle="dropdown">
       下拉菜单 <span class="caret"></span>
     </button>
     <ul class="dropdown-menu">
       <li><a href="#">选项1</a></li>
       <li><a href="#">选项2</a></li>
       <li><a href="#">选项3</a></li>
       <li><a href="#">选项4</a></li>
       <li><a href="#">选项5</a></li>
     </ul>
   </div>
   <br>
   <!-- 下拉菜单(菜单向上弹出) -->
   <div class="dropup">
     <button class="btn btn-default" data-toggle="dropdown">
       下拉菜单 <span class="caret"></span>
     </button>
     <ul class="dropdown-menu">
       <li><a href="#">选项1</a></li>
       <li><a href="#">选项2</a></li>
       <li><a href="#">选项3</a></li>
       <li><a href="#">选项4</a></li>
       <li><a href="#">选项5</a></li>
     </ul>
   </div>

2、对齐

默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。

   <div class="dropup">
     <button class="btn btn-default" data-toggle="dropdown">
       下拉菜单 <span class="caret"></span>
     </button>
     <ul class="dropdown-menu dropdown-menu-right ">
       <li><a href="#">选项1</a></li>
       <li><a href="#">选项2</a></li>
       <li><a href="#">选项3</a></li>
       <li><a href="#">选项4</a></li>
       <li><a href="#">选项5</a></li>
     </ul>
   </div>

3、标题

在任何下拉菜单中均可通过添加标题来标明一组动作。<li class="dropdown-header">这是标题1</li>

   <!-- 标题 -->
   <div class="dropdown">
     <button class="btn btn-default" data-toggle="dropdown">
       下拉菜单 <span class="caret"></span>
     </button>
     <ul class="dropdown-menu">
      <li class="dropdown-header">这是标题1</li>
       <li><a href="#">选项1</a></li>
       <li><a href="#">选项2</a></li>
       <li class="dropdown-header">这是标题2</li>
       <li><a href="#">选项3</a></li>
       <li><a href="#">选项4</a></li>
       <li><a href="#">选项5</a></li>
     </ul>
   </div> 

4、分割线

为下拉菜单添加一条分割线，用于将多个链接分组。<li class="divider"></li>

   <!-- 分割线 -->
   <div class="dropdown">
     <button class="btn btn-default" data-toggle="dropdown">
       下拉菜单 <span class="caret"></span>
     </button>
     <ul class="dropdown-menu">
       <li><a href="#">选项1</a></li>
       <li><a href="#">选项2</a></li>
       <li class="divider"></li>
       <li><a href="#">选项3</a></li>
       <li><a href="#">选项4</a></li>
       <li><a href="#">选项5</a></li>
     </ul>
   </div> 

5、禁用的菜单项

为下拉菜单中的 <li> 元素添加 .disabled 类，从而禁用相应的菜单项。<li class="disabled"><a href="#">选项3</a></li>

   <!-- 禁用的菜单项 -->
   <div class="dropdown">
     <button class="btn btn-default" data-toggle="dropdown">
       下拉菜单 <span class="caret"></span>
     </button>
     <ul class="dropdown-menu">
       <li><a href="#">选项1</a></li>
       <li><a href="#">选项2</a></li>
       <li class="disabled"><a href="#">选项3</a></li>
       <li><a href="#">选项4</a></li>
       <li><a href="#">选项5</a></li>
     </ul>
   </div>