上一节:
下一节:

  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>
    尝试一下
    输出结果如下：
    Link 1 Link 2 Link 3
    示例说明：
    .dropdown类指示一个下拉菜单。
    要打开下拉菜单，请使用按钮或带有类 .dropdown-toggle 和 data-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>
    尝试一下
    输出结果如下：
    链接1 链接2 链接3
    链接4

  • 下拉标题

    .dropdown-header 类用于在下拉菜单中添加标题： 
    <div class="dropdown-header">下拉标题1<div>
    尝试一下
    输出结果如下：
    下拉标题1
    链接1 链接2 链接3
    下拉标题2
    链接4

  • 禁用和激活项

    用 .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>
    尝试一下
    输出结果如下：
    索尼1 索尼2

  • 拆分按钮下拉菜单

    下面示例演示了拆分按钮下拉菜单： 
    <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>
    尝试一下
    输出结果如下：
    Link 1 Link 2
    Link 1 Link 2
    Link 1 Link 2
    Link 1 Link 2
    Link 1 Link 2
    Link 1 Link 2

  • 带有/下拉菜单的垂直按钮组

    下面示例演示了带有/下拉菜单的垂直按钮组： 
    <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>
    尝试一下

  • 相关页面

上一节:
下一节: