码农教程 - 一技在手,衣食无忧! tools

Bootstrap .dropdown

❮ 上一节 下一节 ❯

基本下拉菜单

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

示例

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <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>
亲自试一试 »

示例解释

这个.dropdownclass 表示下拉菜单。

要打开下拉菜单，请使用带有以下类别的按钮或链接.dropdown-toggle和data-toggle="dropdown"属性。

这个.caret类创建一个插入符号箭头图标（)，这表明该按钮是一个下拉菜单。

添加.dropdown-menu类到一个<ul>元素来实际构建下拉菜单。

下拉分隔线

这个.divider类用于用细水平边框分隔下拉菜单内的链接：

示例

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

下拉标题

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

示例

<li class="dropdown-header">Dropdown header 1</li>
亲自试一试 »

禁用和活动项目

使用 .active 类突出显示特定的下拉项（添加蓝色背景色）。

要禁用下拉菜单中的某个项目，请使用.disabled类（在悬停时获得浅灰色文本颜色和 "no-parking-sign" 图标）：

示例

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

下拉位置

要右对齐下拉列表，请添加.dropdown-menu-right使用 .dropdown-menu 为元素添加类：

示例

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

放弃

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

示例

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

下拉菜单辅助功能

为了帮助提高使用屏幕阅读器的用户的可访问性，您应该包括以下内容role和aria-*创建下拉菜单时的属性：

示例

<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 下拉菜单参考。


❮ 上一节 下一节 ❯