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下拉菜单的基本用法和不同类型的下拉菜单,可以在项目中快速应用,并且可以根据具体的需求来选择适当的下拉菜单类型和尺寸。