本章将重点介绍 Bootstrap 下拉菜单。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单（Dropdown） JavaScript 插件 的互动来实现。
如需使用下列菜单，只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 下拉菜单（Dropdowns）</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script
Bootstrap是世界上最流行的前端开发框架之一，它为网页设计师和开发者提供了丰富的组件和样式，以便快速构建响应式和移动优先的网站。在Bootstrap中，下拉菜单（Dropdowns）是一个非常实用的功能，它允许用户在一个按钮下展示多个相关选项，极大地节省了页面空间。
下拉菜单在Bootstrap中是通过JavaScript插件实现的，主要依赖于jQuery库，因此在使用前需要引入jQuery和Bootstrap的JavaScript文件。例如：
```html
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
```
同时，要创建一个下拉菜单，你需要在HTML中定义一个`<div>`元素，赋予它`class="dropdown"`。在这个`<div>`内，包含一个按钮和一个`<ul>`列表，按钮需要添加`class="btn dropdown-toggle"`以及`data-toggle="dropdown"`属性，而`<ul>`则需要`class="dropdown-menu"`。
一个简单的下拉菜单实例如下：
```html
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
主题 <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Java</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">数据挖掘</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">数据通信/网络</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">分离的链接</a></li>
</ul>
</div>
```
在上述代码中，`<ul>`内的每个`<li>`元素代表下拉菜单中的一个选项，`<a>`标签是可点击的链接，`role`和`tabindex`属性对于无障碍访问（accessibility）至关重要。
除了基础的下拉菜单，Bootstrap还提供了对齐方式的调整。默认情况下，下拉菜单会靠左对齐。如果你想让下拉菜单向右对齐，只需在`<ul class="dropdown-menu">`后添加`class="pull-right"`。如下所示：
```html
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
...
</ul>
```
这将使下拉菜单在按钮右侧展开，适用于需要右侧操作的场景。
总结一下，Bootstrap的下拉菜单组件是一个强大的交互元素，它通过简单的HTML和CSS结构，结合JavaScript插件，实现了功能丰富的下拉菜单效果。这种菜单不仅可以提供多个操作选项，还可以通过类的添加进行对齐方式的调整，适应不同的布局需求。在实际开发中，下拉菜单被广泛应用于导航栏、设置菜单等场景，提高了用户体验。
