引导程序（第 5 部分）|下拉菜单和响应式选项卡

简介

本教程是第 5 部分的内容，介绍了如何在 Bootstrap 中使用下拉菜单和响应式选项卡的功能。

下拉菜单

下拉菜单是一种常见的网站导航方式。Bootstrap 提供了一个简单易用的下拉菜单组件，通过添加 .dropdown 类和一些 JavaScript 代码即可实现。

基本用法

HTML 代码：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    下拉菜单
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">菜单项 1</a>
    <a class="dropdown-item" href="#">菜单项 2</a>
    <a class="dropdown-item" href="#">菜单项 3</a>
  </div>
</div>

效果：

代码说明：

• .dropdown 类表示这是一个下拉菜单组件。
• .btn 类表示这是一个按钮。
• .dropdown-toggle 类表示这个按钮可以触发下拉菜单。
• data-toggle="dropdown" 属性表示按下按钮时会触发下拉菜单。
• aria-haspopup="true" 属性表示这是一个包含子菜单的按钮。
• aria-expanded="false" 属性表示子菜单当前是隐藏状态。
• .dropdown-menu 类表示下拉菜单的容器。
• aria-labelledby 属性指向按钮的 ID，用于辅助屏幕阅读器。
• .dropdown-item 类表示下拉菜单中的菜单项。

菜单位置

下拉菜单默认在按钮的下方展示，但是可以通过添加 .dropdown-menu-right 类让它在按钮的右边展示，或者通过添加 .dropdown-menu-left 类让它在按钮的左边展示。

通过 JS 控制下拉菜单

下拉菜单的显示和隐藏可以通过 JavaScript 控制。以下是一些常用的 JavaScript API：

• $('.dropdown-toggle').dropdown() 初始化下拉菜单。
• $('.dropdown-toggle').dropdown('toggle') 切换下拉菜单的显示状态。
• $('.dropdown-toggle').dropdown('show') 显示下拉菜单。
• $('.dropdown-toggle').dropdown('hide') 隐藏下拉菜单。

响应式选项卡

响应式选项卡（responsive tabs）是一种常见的网站内容展示方式。Bootstrap 提供了一个简单易用的响应式选项卡组件，通过添加 .nav、.nav-tabs 和 .nav-justified 类即可实现。

基本用法

HTML 代码：

<ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">选项卡 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">选项卡 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">选项卡 3</a>
  </li>
</ul>

<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    选项卡 1 的内容
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    选项卡 2 的内容
  </div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">
    选项卡 3 的内容
  </div>
</div>

效果：

代码说明：

• .nav 类表示这是一个导航组件。
• .nav-tabs 类表示这是一个选项卡导航。
• .nav-justified 类表示选项卡导航项应该均分宽度。
• data-toggle="tab" 属性表示点击选项卡导航项时会切换内容区域。
• href 属性指向对应的内容区域。
• role, aria-controls 和 aria-selected 属性用于辅助屏幕阅读器。
• .tab-content 类表示内容区域的容器。
• .tab-pane 类表示内容区域中的单个选项卡面板。
• show active 表示选项卡面板默认是激活状态。

竖向选项卡

选项卡默认是横向排列的，但是可以通过添加 .flex-column 类让它们竖向排列。

配合隐藏式折叠

选项卡适合用于大量内容的展示，但是如果内容过多，页面会显示得很长。此时可以配合隐藏式折叠组件使用，点击一个按钮可以展开或收起一部分内容。