Bootstrap 下拉菜单和按钮

最新推荐文章于 2025-05-26 08:37:45 发布

原创最新推荐文章于 2025-05-26 08:37:45 发布 · 2.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#Bootstrap 下拉菜单和按钮

Bootstrap 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了如何使用下拉菜单和按钮组在网页设计中实现交互效果，包括单按钮下拉菜单、分裂式按钮下拉菜单及按钮组的布局和尺寸调整，同时提供了JavaScript调用下拉菜单的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、下拉菜单：

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

.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