Bootstrap 下拉菜单和按钮

r囧r小猫 2022-03-22 16:24 278阅读 0赞

### 一、下拉菜单： ###

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

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

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

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

.divider 下拉菜单中的分割线

.disabled 下拉菜单中的禁用项

** 三角符号：**

![20190129105831724.png][]

### 二、按钮组 ###

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

.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>

![20190129111816799.png][]     ![20190129111742799.png][]

### 三、下拉菜单与按钮使用 ###

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

2）分裂式按钮下拉菜单

![20190129113557488.png][]

### **三、下拉菜单（Dropdown）插件** ###

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

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

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

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

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

$(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][https_v3.bootcss.com_components_dropdowns]

[20190129105831724.png]: /images/20220322/f6da888d88d343118ec601eb4fd49945.png
[20190129111816799.png]: https://img-blog.csdnimg.cn/20190129111816799.png
[20190129111742799.png]: /images/20220322/091e811effbe44e6b4718eb8ed5dc666.png
[20190129113557488.png]: /images/20220322/037c2f32a0eb404a8d647498d2ed8447.png
[https_v3.bootcss.com_components_dropdowns]: https://v3.bootcss.com/components/#dropdowns