Bootstrap 按钮下拉菜单
#Bootstrap 按钮下拉菜单
##简介
Bootstrap 是一个流行的前端开发框架，它提供了许多现成的组件，其中之一就是按钮下拉菜单。按钮下拉菜单通常用于需要提供更多可选项的场景，如网站的导航栏、用户设置等。
##使用
Bootstrap 按钮下拉菜单的使用很简单，只需要使用以下 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="#">选项一</a>
<a class="dropdown-item" href="#">选项二</a>
<a class="dropdown-item" href="#">选项三</a>
</div>
</div>
其中，按钮以及下拉菜单都包含在一个带有 .dropdown 类的 div 元素中。按钮需要添加 .dropdown-toggle 和 .btn 类，下拉菜单需要添加 .dropdown-menu 类。此外，按钮需要添加以下 data-* 属性来激活下拉菜单：
data-toggle="dropdown"：指定该按钮可以触发下拉菜单aria-haspopup="true"：指定该按钮会打开一个菜单aria-expanded="false"：指定该按钮打开的菜单是关闭的
下拉菜单的可选项用 a 元素实现，并添加 .dropdown-item 类。
##定位
默认情况下，下拉菜单会在按钮的下方展开，若需要在左侧或右侧展开，则可以添加以下 .dropdown-menu-right 或 .dropdown-menu-left 类：
<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 dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">选项一</a>
<a class="dropdown-item" href="#">选项二</a>
<a class="dropdown-item" href="#">选项三</a>
</div>
</div>
##触发方式
默认情况下，下拉菜单会在按钮被单击时触发。若需要在鼠标悬停时触发，则可以添加 .dropdown-hover 类，并使用以下 JavaScript 代码：
$('.dropdown-hover').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
此外，也可以使用 JavaScript 来手动触发下拉菜单的打开和关闭：
$('#myDropdown').on('show.bs.dropdown', function() {
// do something
});
$('#myDropdown').on('hide.bs.dropdown', function() {
// do something
});
##结论
Bootstrap 按钮下拉菜单是提供了一个快捷的方式来实现网站界面可交互性。菜单的位置和触发方式都可以自定义，并且使用起来非常简单。希望大家可以通过本篇技术文档对 Bootstrap 按钮下拉菜单有所了解。