Bootstrap下拉菜单

---

基本样式示例

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里

   <div class="dropdown">
        <button class="btn btn-default "  id="dropdownMenu1" data-toggle="dropdown" >
          更多城市
          <span class="caret "></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <li><a href="">广州</a></li>
          <li><a href="">深圳</a></li>
          <li><a href="">东莞</a></li>
        </ul>   
   </div> 

---

dropup 让菜单向上弹出

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

   <div class="dropup">
        <button class="btn btn-default "  id="dropdownMenu1" data-toggle="dropdown" >
          更多城市
          <span class="caret "></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <li><a href="">广州</a></li>
          <li><a href="">深圳</a></li>
          <li><a href="">东莞</a></li>
        </ul>   
   </div>

---

对齐dropdown-menu-right和dropdown-menu-left

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

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

---

标题dropdown-header

在任何下拉菜单中均可通过添加标题来标明一组动作。

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

   <div class="dropdown">
        <button class="btn btn-default "  id="dropdownMenu1" data-toggle="dropdown" >
          更多城市
          <span class="caret "></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <li class="dropdown-header">广东省</li>
          <li><a href="">广州</a></li>
          <li><a href="">深圳</a></li>
          <li><a href="">东莞</a></li>
        </ul>   
   </div>  

---

分割线divider

为下拉菜单添加一条分割线，用于将多个链接分组。

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

   <div class="dropdown">
        <button class="btn btn-default "  id="dropdownMenu1" data-toggle="dropdown" >
          更多城市
          <span class="caret "></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <li class="dropdown-header">广东省</li>
          <li><a href="">广州</a></li>
          <li><a href="">深圳</a></li>
          <li><a href="">东莞</a></li>
          <li role="separator" class="divider"></li>
          <li class="dropdown-header">湖南省</li>
          <li><a href="">长沙</a></li>
          <li><a href="">株洲</a></li>
          <li><a href="">湘潭</a></li>
        </ul>   
   </div>  

---

禁用的菜单项disabled

为下拉菜单中的 li 元素添加 .disabled 类，从而禁用相应的菜单项。

   <div class="dropdown">
        <button class="btn btn-default "  id="dropdownMenu1" data-toggle="dropdown" >
          更多城市
          <span class="caret "></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <li class="dropdown-header">广东省</li>
          <li><a href="">广州</a></li>
          <li><a href="">深圳</a></li>
          <li><a href="">东莞</a></li>
          <li class="disabled"><a href="">香港</a></li>
       </ul>   
   </div>