Bootstrap的下拉菜单组件相关知识

昊虹AI笔记

已于 2023-12-06 10:51:39 修改

阅读量1.7k

点赞数 1

分类专栏： Bootstrap 文章标签： bootstrap 前端 html

于 2023-10-12 15:58:24 首次发布

本文链接：https://blog.csdn.net/wenhao_ir/article/details/133765339

版权

Bootstrap 专栏收录该内容

50 篇文章 3 订阅

订阅专栏

Bootstrap的下拉菜单组件依赖于第三方popper.js插件实现，popper.js插件提供了动态定位和浏览器窗口大小监测，所以在使用下拉菜单时确保引入了popper.js文件，并且要放在引用Bootstrap.js文件之前前。

01-下拉菜单基本结构

下拉菜单基本结构如下：

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button">
	激活按钮
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">菜单项1</a>
        <button class="dropdown-item" type="button">菜单项2</button>
    </div>
</div>

说明：
①下拉菜单组件需要包含在dropdown类容器中。
②需要一个激活按钮，激活按钮需要设置属性data-toggle的值为dropdown，并且可添加添加dropdown-toggle类来设置一个小三角形。
③在Bootstrap 4中，可以使用a标签或button标签作为下拉菜单的菜单项，但是都需要添加类dropdown-item。

基本结构的完整示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>下拉菜单基本结构</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="popper.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<h3>下拉菜单基本结构</h3>
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button">
	激活按钮
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">菜单项1</a>
        <button class="dropdown-item" type="button">菜单项2</button>
    </div>
</div>
</html>

运行结果如下图所示：
在这里插入图片描述

02-分裂式下拉菜单

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>分裂式按钮下拉菜单</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="popper.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<h3 align="center">分裂式按钮下拉菜单</h3>
<div class="dropdown btn-group">
    <button class="btn btn-secondary"  type="button">箱包皮具</button>
    <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" type="button">
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">旅行箱包</a>
        <button class="dropdown-item" type="button">精品男包</button>
        <a class="dropdown-item" href="#">潮流女包</a>
        <button class="dropdown-item" type="button">精品皮带</button>
    </div>
</div>
</html>

效果如下图所示：
在这里插入图片描述

03-设置菜单展开方向

可通过类dropletf、dropright、dropup、dropdown分别设置向左、向右、向上、向下展开。
示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>向上展开菜单</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="popper.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">向上展开菜单</h3><br /><br /><br /><br /><br />
<div class="dropup">
    <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button">
        箱包皮具
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">旅行箱包</a>
        <button class="dropdown-item" type="button">精品男包</button>
        <a class="dropdown-item" href="#">潮流女包</a>
        <button class="dropdown-item" type="button">精品皮带</button>
    </div>
</div>
</body>
</html>

效果如下：
在这里插入图片描述

04-设置菜单的分割线

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>菜单项添加分割线</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="popper.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">菜单项添加分割线</h3>
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button">
        惠丰商城
    </button>
    <div class="dropdown-menu">
        <button class="dropdown-item" type="button">家用电器</button>
        <button class="dropdown-item" type="button">电脑数码</button>
        <button class="dropdown-item" type="button">男装女装</button>
        <div class="dropdown-divider"></div>
        <button class="dropdown-item" type="button">珠宝箱包</button>
        <button class="dropdown-item" type="button">水果特产</button>
        <button class="dropdown-item" type="button">男鞋女鞋</button>
    </div>
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述

05-激活和禁用某个菜单项

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>菜单项激活和禁用状态</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="popper.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">菜单项激活和禁用状态</h3>
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button">
        惠丰商城
    </button>
    <div class="dropdown-menu">
        <button class="dropdown-item active" type="button">家用电器</button>
        <button class="dropdown-item" type="button">电脑数码</button>
        <button class="dropdown-item" type="button">男装女装</button>
        <button class="dropdown-item disabled " type="button">珠宝箱包</button>
        <button class="dropdown-item disabled " type="button">水果特产</button>
    </div>
</div>
</body>
</html>

运行效果如下图所示：
在这里插入图片描述

06-设置菜单项的对齐方式

默认情况下，下拉菜单自动从顶部和左侧进行定位，可以用类dropdown-menu-right实现右侧对齐。注意：菜单项需要依赖popper.js文件。

注意：Bootstrap 中并没有提供名为 dropdown-menu-center 的类来实现下拉菜单的居中对齐。通常情况下，可以使用 text-center 和 ml-auto 的组合来实现相应的效果。

在上述代码中，通过添加自定义的 dropdown-menu-center 类，利用 left: 50% 和 transform: translateX(-50%) 来实现下拉菜单的水平居中对齐。比如下面这样的代码：

<div class="dropdown-menu text-center ml-auto" aria-labelledby="orderButton">

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>菜单项对齐</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="popper.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container text-center">
<h3 align="center">菜单项右对齐</h3>
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button">
        惠丰商城
    </button>
    <div class="dropdown-menu dropdown-menu-right">
        <button class="dropdown-item" type="button">家用电器</button>
        <button class="dropdown-item" type="button">电脑数码</button>
        <button class="dropdown-item" type="button">男装女装</button>
        <button class="dropdown-item " type="button">珠宝箱包</button>
        <button class="dropdown-item " type="button">水果特产</button>
    </div>
</div>
</body>
</html>

效果如下：
右对齐效果如下：
在这里插入图片描述
左对齐效果如下：

07-设置菜单的偏移效果

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>设置菜单的偏移量</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="popper.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">设置菜单的偏移量</h3>
<div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-offset="200,60">
        激活按钮
    </button>
    <div class="dropdown-menu dropdown-menu-right">
        <button class="dropdown-item" type="button">家用电器</button>
        <button class="dropdown-item" type="button">电脑数码</button>
        <button class="dropdown-item" type="button">男装女装</button>
        <button class="dropdown-item " type="button">珠宝箱包</button>
        <button class="dropdown-item " type="button">水果特产</button>
    </div>
</div>
</body>
</html>

运行效果如下图所示：
在这里插入图片描述

08-丰富菜单内容

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>丰富的菜单内容</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="popper.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">丰富的菜单内容</h3>
<div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle position-relative" data-toggle="dropdown">
        码农课堂
    </button>
    <div class="dropdown-menu" style="max-width: 300px;">
        <h6 class="dropdown-header" type="button">经典课程</h6>
        <button class="dropdown-item" type="button">热门课程</button>
        <button class="dropdown-item" type="button">技术支持</button>
        <hr>
        <p class="mx-3">码农课堂为读者提供核心技术的培训和指导。</p>
        <hr>
        <form action="" class="mx-3">
            <input type="text" placeholder="姓名"><br/>
            <textarea type="textarea" cols="22" rows="4" placeholder="技术疑难问题"></textarea>
        </form>
    </div>
</div>
</body>
</html>