下拉、上拉菜单 - bootStrap4常用CSS笔记
| 菜单触发样式 | |
| .dropdown-toggle | 下拉基类，定义一个触发下拉的元素。要和data-toggle="dropdown"属性结合使用 |
| .dropdown-toggle-split | 菜单分割线，作用未知 |
| 菜单列表样式 | |
| .dropdown-menu | 定义一个下拉菜单容器 |
| .dropdown-menu-right | 下拉菜单容器右对齐。默认是左对齐 |
| .dropdown-header | 下拉菜单标题 |
| .dropdown-item | 下拉菜单列表项目 |
| .dropdown-divider | 在下拉菜单中创建一个水平的分割线 |
| .active | 启用指定下拉菜单列表项目 |
| .disabled | 禁用指定下拉菜单列表项目 |
下拉、上拉菜单需要引入jquery版本不低于3.2，且还要引入popper.min.js文件，两个文件的CDN引用如下：
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
下拉菜单示例：
1 <div class="container"> 2 <div class="wrapper"> 3 <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">点我下拉</a> 4 <div class="dropdown-menu dropdown-menu-right"> 5 <div class="dropdown-header">产品大类</div> 6 <a href="#" class="dropdown-item">菜单一</a> 7 <a href="#" class="dropdown-item">菜单二</a> 8 <div class="dropdown-divider"></div> 9 <a href="#" class="dropdown-item">菜单三</a> 10 <a href="#" class="dropdown-item">菜单四</a> 11 </div> 12 </div> 13 </div>
按钮下拉示例：
1 <div class="container"> 2 <div class="wrapper"> 3 点击按钮，下拉菜单：<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">点我</button> 4 <!-- 定义下拉菜单 --> 5 <div class="dropdown-menu"> 6 <a href="#" class="dropdown-item">a菜单一</a> 7 <a href="#" class="dropdown-item">b菜单二</a> 8 <div class="dropdown-divider"></div> 9 <a href="#" class="dropdown-item">c菜单三</a> 10 <a href="#" class="dropdown-item">d菜单四</a> 11 </div> 12 </div> 13 </div>
按钮组下拉示例：
<div class="container"> <div class="btn-group"> <button class="btn btn-primary">请选择</button> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <!-- 定义下拉菜单 --> <div class="dropdown-menu"> <a href="#" class="dropdown-item">a菜单一</a> <a href="#" class="dropdown-item">b菜单二</a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">c菜单三</a> <a href="#" class="dropdown-item">d菜单四</a> </div> </div> </div>
上拉菜单用法和下拉相同，只要将下拉菜单包含在一个类名为: dropup 的容器内就可以实现上拉菜单功能。不过位于页面顶部是无法向上拉取菜单，会自动变成下拉菜单。
| 上拉菜单样式 | |
| .dropup | 包裹下拉菜单，自动变成上拉 |
上拉菜单示例：
<div class="dropup btn-group"> <button class="btn btn-primary">请选择</button> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <!-- 定义下拉菜单 --> <div class="dropdown-menu"> <a href="#" class="dropdown-item">a菜单一</a> <a href="#" class="dropdown-item">b菜单二</a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">c菜单三</a> <a href="#" class="dropdown-item">d菜单四</a> </div> </div>
