Bootstrap 下拉菜单（Dropdown）插件
Bootstrap下拉菜单（Dropdown）插件技术文档
Bootstrap下拉菜单（Dropdown）插件允许用户创建一个下拉列表，当用户点击一个按钮或链接时，它会显示一个菜单来提供一组选项。这个插件为用户提供了一个简单的方法来使用下拉菜单和在不同设备上的响应灵活性。
使用步骤
1. 引入Bootstrap
在html文档中，首先需要引入Bootstrap的css和js文件。可以使用CDN链接或下载本地文件。
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
2. 创建下拉菜单
下拉菜单由一个按钮和一个菜单组成。按钮可以是一个超链接或一个按钮元素，菜单是一个无序列表。
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
在按钮标记中，添加"data-toggle"属性并设置为"dropdown"。这会将按钮设置为开关下拉菜单以及它的下拉菜单。“aria-haspopup"和"aria-expanded"属性用于增强功能。
在ul标记中，添加"aria-labelledby"属性并设置为与按钮标记中"id"属性相同的值。这将使菜单与按钮标记相关联。
如果需要将下拉菜单与右侧对齐，可以添加class为"dropdown-menu-right”。
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
3. 添加下拉菜单选项
在ul标记中，添加li元素以添加选项。也可以添加分隔符，使用class为"divider"，它将在下拉列表中显示一条水平线。
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
属性解释
data-toggle
定义开关下拉菜单的按钮，它的值必须是"dropdown"。
aria-haspopup
该属性指定元素是否具有下拉菜单。它的值必须是"true"或"false"。
aria-expanded
指定下拉菜单的状态，它的值可以是"true"或"false"。
aria-labelledby
定义下拉菜单与按钮标记相关联。
结论
Bootstrap下拉菜单（Dropdown）插件是一种易于使用的工具，可以用来创建灵活的菜单，它为用户提供了简单易用的下拉菜单，并具有在不同设备上的响应灵活性。如果需要将下拉菜单与右侧对齐，可以添加class为"dropdown-menu-right"。