Bootstrap 下拉菜单和按钮

一、下拉菜单：

用于显示链接列表的可切换、有上下文的菜单

.dropdown 菜单用于指定下拉菜单，下拉菜单都包裹在 .dropdown 或者 .dropup 里。

.dropdown-menu 类用于实际下拉菜单的创建。

.dropdown-header 类用于在下拉菜单中添加标题

.divider 下拉菜单中的分割线

.disabled 下拉菜单中的禁用项

        <div class="dropdown"><button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">下拉菜单<span class="caret"></span></button><ul class="dropdown-menu" aria-labelledby="dropdownMenu1"><li class="dropdown-header">标题1</li><li><a href="#">菜单1</a></li><li><a href="#">菜单2</a></li><li role="separator" class="divider"></li><li class="dropdown-header">标题2</li><li><a href="#">菜单3</a></li><li><a href="#">菜单4</a></li></ul></div>

三角符号：

<span class="caret"></span>

二、按钮组

允许把一组按钮放在同一行里

.btn-group 该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。

.btn-group-vertical 该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。

调整整个按钮组的大小：.btn-group-lg, .btn-group-sm, .btn-group-xs

调整单个按钮的大小：.btn-sm, .btn-lg, .btn-xs

单个按钮宽度100%占满父容器：.btn-block

        <div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-default">Left</button><button type="button" class="btn btn-danger">Middle</button><button type="button" class="btn btn-primary">Right</button></div>

        <div class="btn-group-vertical btn-group-xs" role="group" aria-label="..."><button type="button" class="btn btn-default">Left</button><button type="button" class="btn btn-danger">Middle</button><button type="button" class="btn btn-primary">Right</button></div>

三、下拉菜单与按钮使用

1）单按钮下拉菜单：见下拉菜单

2）分裂式按钮下拉菜单

        <div class="btn-group"><button type="button" class="btn btn-primary">按钮1</button><button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button><ul class="dropdown-menu"><li class="dropdown-header">标题1</li><li><a href="#">菜单1</a></li><li><a href="#">菜单2</a></li><li role="separator" class="divider"></li><li class="dropdown-header">标题2</li><li><a href="#">菜单3</a></li><li><a href="#">菜单4</a></li></ul></div>

三、下拉菜单（Dropdown）插件

下拉菜单，没有涉及到交互部分，使用下拉菜单（Dropdown）插件，可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。

注意：data-toggle="dropdown" 必须要有

通过 JavaScript 调用下拉菜单切换：

$('.dropdown-toggle').dropdown()

小需求：在一的基础上添加鼠标放上去与离开时切换显示或隐藏下拉菜单

        <div class="dropdown" ><button class="btn btn-success dropdown-toggle" type="button" id="ddbtn" data-toggle="dropdown">下拉菜单<span class="caret"></span></button><ul class="dropdown-menu" id="ddmenu" style="margin-top: -1px;"><li class="dropdown-header">标题1</li><li><a href="#">菜单1</a></li><li><a href="#">菜单2</a></li><li role="separator" class="divider"></li><li class="dropdown-header">标题2</li><li><a href="#">菜单3</a></li><li><a href="#">菜单4</a></li></ul></div>

$(function () {$("#ddbtn").mouseenter(function () {$(this).dropdown("toggle");}).mouseleave(function () {$(this).dropdown("toggle");});$("#ddmenu").mouseenter(function () {$("#ddbtn").dropdown("toggle");}).mouseleave(function () {$("#ddbtn").dropdown("toggle");});
});

自己写一遍，加深存在感，详情参考官方文档：https://v3.bootcss.com/components/#dropdowns