Bootstrap 下拉菜单

基础下拉列表

下拉菜单是一个可切换的菜单,允许用户从预定义列表中选择一个值:

实例

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">下拉菜单示例
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>
亲自试一试 »

实例解析

.dropdown 类用来指定一个下拉菜单。

我们可以使用一个按钮或链接来打开下拉菜单, 按钮或链接需要添加 .dropdown-toggledata-toggle="dropdown" 属性。

.caret 类创建一个插入符号箭头图标 (),表示该按钮是一个下拉列表。

<ul> 元素上添加 .dropdown-menu 类来设置实际下拉菜单。


下拉菜单中的分割线

.divider 类用于在下拉菜单中创建一个水平的分割线:

实例

<li class="divider"></li>
亲自试一试 »


下拉菜单中的标题

.dropdown-header 类用于在下拉菜单中添加标题:

实例

<li class="dropdown-header">下拉菜单标题 1</li>
亲自试一试 »

下拉菜单中的禁用和激活项目

.active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)。

如果要禁用下拉菜单的选项,可以使用 .disabled 类:

实例

<li class="disabled"><a href="#">CSS</a></li>
<li class="active"><a href="#">HTML</a></li>
亲自试一试 »

下拉菜单的定位

右下拉菜单

如果我们想让下拉菜单右对齐,可以在元素上的 .dropdown-menu 类后添加 .dropdown-menu-right 类:

实例

<ul class="dropdown-menu dropdown-menu-right">
亲自试一试 »

指定向上弹出的上拉菜单

如果希望下拉菜单向上展开而不是向下展开,请将带有 class="dropdown" 的 <div> 元素更改为 "dropup":

实例

<div class="dropup">
亲自试一试 »

下拉菜单可访问性

为了帮助提高使用屏幕阅读器的用户的可访问性,在创建下拉菜单时,应包括以下 rolearia-* 属性:

实例

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
  <span class="caret"></span></button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    <li role="presentation"><a role="menuitem" href="#">HTML</a></li>
    <li role="presentation"><a role="menuitem" href="#">CSS</a></li>
    <li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" href="#">About Us</a></li>
  </ul>
</div>
亲自试一试 »

学习训练

练习题:

添加所需的类和属性以创建下拉列表。

<div class="">
  <button 
  class="btn btn-primary ">
  Dropdown Example
  <span class="caret"></span></button>
  <ul class="">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

开始练习


完整 Bootstrap 下拉菜单参考

有关下拉菜单的完整参考,请访问 Bootstrap JS 下拉菜单参考