下拉、上拉菜单-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="/jquery/3.2.1/jquery.min.js"></script>
<script src="/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>js导航栏下拉菜单
<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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。