Bootstrap 下拉菜单（Dropdowns）
Bootstrap下拉菜单（Dropdowns）
Bootstrap下拉菜单（Dropdowns）是一个十分常用的组件，可以用来在页面上显示一个菜单，在鼠标点击或悬停时，显示该菜单的下拉内容，非常方便地实现了页面的功能实现。本文将介绍Bootstrap下拉菜单的用法及注意事项。
用法
首先，我们要先引入Bootstrap的CSS和JS文件，可以通过包管理器（如npm或yarn）或CDN（比如jsdelivr，unpkg）的方式。
HTML 部分
下拉菜单需要通过一个按钮触发，以及一个下拉内容区域。下面是下拉菜单的一个基本结构。
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
按钮需要有class属性dropdown-toggle，以及data-toggle=“dropdown"来告诉Bootstrap该按钮是用来触发下拉菜单的。而下拉内容则需要用一个dropdown-menu类。
JS 部分
由于Bootstrap采用的是jQuery来操作DOM，因此需要在页面中引入jQuery。当然，如果不想使用jQuery，也有纯CSS的方式来实现下拉菜单。在这里，我们依然采用jQuery的方式。
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
以上三个文件是必须引入的。其中，popper.js是用来定位下拉菜单位置的，可视作Bootstrap的辅助插件。
下拉菜单的类型
由于下拉菜单既可以在鼠标悬停时显示，也可以在鼠标点击时显示，因此Bootstrap提供了几种下拉菜单类型来适应不同的场景。
基本下拉菜单
基本下拉菜单就是我们刚才所演示的样式。只需要把按钮和下拉区域包裹在一个dropdown元素内即可。
分裂按钮下拉菜单
分裂按钮下拉菜单和基本下拉菜单的结构相似，只是按钮多拆分成了两部分，一个作为触发按钮，另一个则是一个可点击的按钮，通常用来表示菜单的当前状态。
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
上下文菜单
Bootstrap的上下文菜单（Contextual Menus）就是我们常见的右键菜单。只需要在dropdown-menu元素上添加.dropdown-menu-right，并在触发按钮上设置data-toggle="dropdown"和data-display="static"即可。
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
Right-aligned menu
</button>
<div class="dropdown-menu dropdown-menu-right">
<!-- Dropdown menu links -->
</div>
</div>
尺寸
Bootstrap下拉菜单还提供了三种尺寸。只需要在触发按钮上添加.btn-{size}即可游泳不同的尺寸。
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle btn-lg" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- Dropdown menu links -->
</div>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Default button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- Dropdown menu links -->
</div>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle btn-sm" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- Dropdown menu links -->
</div>
</div>
总结
通过这篇文章，我们了解了Bootstrap下拉菜单的基本用法和不同类型的下拉菜单，可以在项目中快速应用，并且可以根据具体的需求来选择适当的下拉菜单类型和尺寸。