Bootstrap 下拉菜单



  • 定义和使用

    Bootstrap 下拉菜单是可切换菜单,允许用户从预定义列表中选择一个值:
    <div class="container">
     <div class="dropdown">
       <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
         下拉菜单
       </button>
       <div class="dropdown-menu">
         <a class="dropdown-item" href="#">Link 1</a>
         <a class="dropdown-item" href="#">Link 2</a>
         <a class="dropdown-item" href="#">Link 3</a>
       </div>
     </div>
    </div>
    
    
    尝试一下
    输出结果如下:
    示例说明:
    .dropdown类指示一个下拉菜单。
    要打开下拉菜单,请使用按钮或带有类 .dropdown-toggledata-toggle="dropdown" 属性的链接。
    .dropdown-menu 类添加到 <div> 元素中以实际构建下拉菜单。 然后将 .dropdown-item 类添加到下拉菜单内的每个元素(链接或按钮)。
  • 下拉分隔线

    .dropdown-divider 类用于使用细边框分隔下拉菜单中的链接:
    <div class="container">
      <div class="dropdown">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
          下拉按钮
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">链接1</a>
          <a class="dropdown-item" href="#">链接2</a>
          <a class="dropdown-item" href="#">链接3</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">链接4</a>
        </div>
      </div>
    </div>
    
    
    尝试一下
    输出结果如下:
  • 下拉标题

    .dropdown-header 类用于在下拉菜单中添加标题:
    <div class="dropdown-header">下拉标题1<div>
    
    
    尝试一下
    输出结果如下:
  • 禁用和激活项

    .active 类突出显示特定的下拉项(添加蓝色背景色)。
    要禁用下拉菜单中的项,请使用 .disabled 类(悬停时获得浅灰色文本颜色和“禁止停车标志”图标):
    <a class="dropdown-item active" href="#">激活项</a>
    <a class="dropdown-item disabled" href="#">禁用项</a>
    
    
    尝试一下
    输出结果如下:
  • 下拉位置

    您还可以通过将 .dropright.dropleft 类添加到 dropdown 元素来创建 "dropright""dropleft" 菜单。
    请注意,插入符/箭头是自动添加的:
    <div class="dropdown dropright">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        箭头向右的下拉
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a>
      </div>
    </div>
    <div class="dropdown dropleft">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        箭头向左的下拉
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a>
      </div>
    </div>
    
    
    尝试一下
    要右对齐下拉菜单,请将 .dropdown-menu-right 类添加到具有 .dropdown-menu 的元素中:
    <div class="dropdown-menu dropdown-menu-right">
    
    
    尝试一下
    如果希望下拉菜单向上扩展而不是向下扩展,请将具有 class="dropdown" 的 <div> 元素更改为 "dropup"
    <div class="dropup">
    
    
    尝试一下
    .dropdown-item-text 类用于将纯文本添加到下拉项,或用于默认链接样式的链接。
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">链接1</a>
      <a class="dropdown-item" href="#">链接1</a>
      <a class="dropdown-item-text" href="#">文字链接</a>
      <span class="dropdown-item-text">文本</span>
    </div>
    
    
    尝试一下
  • 带下拉菜单的分组按钮

    下面示例演示了带下拉菜单的分组按钮:
    <div class="container">
      <div class="btn-group">
          <button type="button" class="btn btn-primary">Apple</button>
          <button type="button" class="btn btn-primary">三星</button>
          <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                索尼
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">索尼1</a>
                <a class="dropdown-item" href="#">索尼2</a>
            </div>
          </div>
      </div>
    </div>
    
    
    尝试一下
    输出结果如下:
  • 拆分按钮下拉菜单

    下面示例演示了拆分按钮下拉菜单:
    <div class="container">
      <div class="btn-group">
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
        </div>
      </div>
    </div>
    
    
    尝试一下
    输出结果如下:
  • 带有/下拉菜单的垂直按钮组

    下面示例演示了带有/下拉菜单的垂直按钮组:
    <div class="container">
     <div class="btn-group-vertical">
      <button type="button" class="btn btn-primary">Apple</button>
      <button type="button" class="btn btn-primary">三星</button>
      <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
           索尼
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">索尼1</a>
          <a class="dropdown-item" href="#">索尼2</a>
        </div>
      </div>
    </div>
    </div>
    
    
    尝试一下