3.2 Bootstrap 下拉菜单(Dropdowns)

最新推荐文章于 2024-08-03 20:32:29 发布
最新推荐文章于 2024-08-03 20:32:29 发布
阅读量995 收藏
点赞数 2
分类专栏： Bootstrap 文章标签： bootstrap 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62617719/article/details/131525616
版权

文章目录

Bootstrap 下拉菜单（Dropdowns）

在这里插入图片描述

本章将重点介绍 Bootstrap 下拉菜单。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单（Dropdown） JavaScript 插件 的互动来实现。

如需使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单：

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap 实例 - 下拉菜单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
</head>

<body>
    <div class="dropdown">
        <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">Java</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
            </li>
            <li role="presentation" class="divider"></li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
            </li>
        </ul>
    </div>
</body>

</html>

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

选项

对齐

通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。下面的实例演示了这点：

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap 实例 - 字体图标</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
</head>

<body>
    <div class="dropdown">
        <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">Java</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
            </li>
            <li role="presentation" class="divider"></li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
            </li>
        </ul>
    </div>
</body>

</html>

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

标题

您可以使用 class dropdown-header 向下拉菜单的标签区域添加标题。下面的实例演示了这点：

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap 实例 - 字体图标</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
</head>

<body>
    <div class="dropdown">
        <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation" class="dropdown-header">下拉菜单标题</li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">Java</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
            </li>
            <li role="presentation" class="divider"></li>
            <li role="presentation" class="dropdown-header">下拉菜单标题</li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
            </li>
        </ul>
    </div>
</body>

</html>

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

更多实例

类描述
.dropdown指定下拉菜单，下拉菜单都包裹在 .dropdown 里
.dropdown-menu创建下拉菜单
.dropdown-menu-right下拉菜单右对齐
.dropdown-header下拉菜单中添加标题
.dropup指定向上弹出的下拉菜单
.disabled下拉菜单中的禁用项
.divider下拉菜单中的分割线
梁辰兴
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Bootstrap学习笔记——菜单、按钮及导航
gengfu_php的博客
10-04 1804
1 下拉菜单在Bootstrap框架中的下拉菜单组件是一个独立的组件，根据不同的版本，它对应的文件： LESS版本：对应的源码文件为 dropdowns.less Sass版本：对应的源码文件为 _dropdowns.scss 编译后的Bootstrap版本：查看bootstrap.css文件第3004行～第3130行 在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的b
Bootstrap下拉菜单Dropdowns的实现代码
08-31
Bootstrap 下拉菜单Dropdowns 的实现代码 Bootstrap 是一个流行的前端框架，提供了许多实用的UI组件，包括下拉菜单Dropdowns。下拉菜单Dropdowns 是一个常用的交互组件，可以帮助用户快速选择选项。本文将详细介绍...
Bootstrap系列之下拉菜单（Dropdowns）
热门推荐
老__L的博客
06-06 1万+
使用Bootstrap下拉插件切换上下文覆盖来显示链接列表和更多内容。下拉列表是可切换的，上下文覆盖显示链接列表和更多。它们与包含的Bootstrap下拉式JavaScript插件进行交互。它们是通过点击而不是悬停来切换的;这是一个有意的设计决策。下拉框建立在第三方库Popper上，它提供动态定位和视口检测。请确保在Bootstrap JavaScript之前包含或使用包含Popper的 / 。Popper不用于定位导航栏中的下拉框，因为动态定位不是必需的。如果您从源代码构建我们的JavaScript，它需
bootstrap下拉列表多选组件_booterstrip多选
code8889的博客
05-15 1928
正文和，收到很多园友的关注和提问，最后总结这两篇里面的下拉框组件都存在一些大大小小的问题，比如两种bootstrap mutiselect组件，界面渲染效果略差；再比如select2一些兼容性问题、多选的取值赋值等问题都困扰着博主以及很多园友，项目里面的下拉框很早就替换为今天介绍的这款组件，所以今天介绍给大家，让大家多一个选择也好！说点题外话。
BootStrap--初识BootStrap
小白小白从不日别的博客
11-28 2234
一、初识BootStrap 响应式布局的优缺点： 响应式布局的使用场景： 1.1 Bootstrap3和4的区别 CSS预处理器不同, Bootstrap3采用Less, Bootstrap4采用SASS 格栅种类不同, Bootstrap3提供4种格栅, Bootstrap4提供5种格栅 使用单位不同, Bootstrap3使用px作为单位, Bootstrap4使用rem作为单位 内部布局方式不同, Bootstrap3使用float布局, Bootstrap4使用...
Bootstrap3基础教程
thinking_fioa的博客
03-20 1万+
一、Bootstrap3基础教程@author 鲁伟林 Bootstrap3是目前最受欢迎的前端框架，非常重要。本教材不包括: Bootstrap插件，有关插件知识，请看另一篇博客 参考网址是：http://www.runoob.com/bootstrap/bootstrap-tutorial.html gitHub地址: https://github.com/thinkingfioa/Notes...
bootstrap Less
weixin_35755389的博客
10-14 1280
bootstrap Less
Bootstrap框架(二)
weixin_30832983的博客
01-14 308
知识预览 一 字体图标(Glyphicons) 二下拉菜单（Dropdowns） 三 导航元素 四 导航栏 五 分页 六 标签 七 多媒体对象（Media Object） 八 徽章（Badges） 回到顶部 一 字体图标(Glyphicons) 字体图标是在 Web 项目中使用的图标字体： <div class="container"&...
Bootstrap框架（2）
afd2828的博客
11-12 112
一 字体图标(Glyphicons) 字体图标是在 Web 项目中使用的图标字体： <div class="container"> <span class="glyphicon glyphicon-envelope"></span> <a href="" class="btn btn-default">&lt...
前端开发学习路径之阶段七：BootStrap详解
MySunshine07的博客
08-13 1283
       Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。Bootstrap简洁灵活，使得 Web 开发更加快捷。其最大的优势是响应式布局，使得开发者可以方便的让网页无论在台式机、平板设备、手...
boostrap插件
weixin_33901843的博客
02-15 136
第一章：模态弹出框 一、导入JavaScript插件 Bootstrap的JavaScript插件可以单独导入到页面中，也可以一次性导入到页面中。因为在Bootstrap中的JavaScript插件都是依赖于jQuery库，所以不论是单独导入还一次性导入之前必须先导入jQuery库。 1.一次性导入： Bootstrap提供了一个单一的文件，这个文件包含了Bootstrap的所有JavaS...
Bootstrap 下拉菜单（Dropdowns）
12-13
Bootstrap 下拉菜单（Dropdowns）是前端开发框架Bootstrap中的一个重要组件，它允许用户在一个按钮或导航链接中嵌入一个可扩展的菜单，展示一系列相关的链接或操作。这种设计模式常见于网页顶部导航、侧边栏菜单以及...
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
08-31
在使用Bootstrap构建网页时，下拉菜单是一种常见的交互元素，它允许用户在单个按钮下访问多个选项。然而，有时可能会遇到下拉菜单点击后无法显示的问题，这通常是由于JavaScript库加载顺序错误导致的。本篇文章将...
Bootstrap布局组件教程之Bootstrap下拉菜单
09-02
Bootstrap下拉菜单是网页设计和开发中常用的交互元素，它为用户提供了一种简洁的方式来展示一组相关的链接或操作。在Bootstrap框架中，下拉菜单的实现依赖于JavaScript插件，特别是Dropdown组件，它使得用户能够通过...
WEB渗透Web突破篇-SSRF
最新发布
qq_59468567的博客
08-03 444
转码服务 在线翻译 获取超链接的标题等内容进行显示 请求远程服务器资源的地方，图片加载与下载(通过URL地址加载或下载图片) 图片、文章收藏功能 对外发起网络请求的地方，网站采集、网页抓取的地方。 头像 (远程加载头像) 一切要你输入网址的地方和可以输入ip的地方。 数据库内置功能(mongodb的copyDatabase函数) 邮件系统 文件处理 在线处理工具 从URL关键字中寻找：share、wap、url、link、src、source、target、u、3g、display、sourceURl、im
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1442
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
探索WebKit之巅：开启现代网页应用的高效与兼容之旅
weixin_67239318的博客
08-03 156
随着现代网页应用的快速发展，WebKit作为先进的浏览器引擎，其在高效性和兼容性上的表现显得尤为重要。本文深入探讨了WebKit的架构和渲染机制，揭示了其在支持Web标准和提升浏览体验方面的关键技术。通过分析WebKit如何处理DOM操作、JavaScript执行与图形渲染等挑战，我们了解到优化WebKit性能不仅关乎算法和硬件的优化，还涉及网络协议和安全框架的理解。此外，本文讨论如何通过WebKit应对多设备和分辨率下的兼容性问题。掌握这些关键因素，对于开发者来说，是打造高效、兼容的现代网页应用的基础。
高德地图离线版 使用高德地图api的方法
m0_62336925的博客
08-02 363
然因为高德地图的瓦片地图太大，所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错 因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字 复制。
bootstrap 下拉菜单
09-13
Bootstrap 提供了一个简单而强大的下拉菜单组件，可以在网页中创建漂亮的下拉菜单。 下面是一个基本的 Bootstrap 下拉菜单的示例代码： ```html <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 下拉菜单 </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">菜单项1</a> <a class="dropdown-item" href="#">菜单项2</a> <a class="dropdown-item" href="#">菜单项3</a> </div> </div> ``` 这段代码会创建一个外层容器 `<div class="dropdown">`，里面包含一个按钮和一个下拉菜单。按钮使用了 `btn` 和 `btn-primary` 类来设置样式，`dropdown-toggle` 类用于触发下拉菜单的显示与隐藏。下拉菜单使用了 `dropdown-menu` 类。 在下拉菜单内部，使用 `<a>` 标签来创建菜单项，每个菜单项使用 `dropdown-item` 类。你可以根据需要添加更多菜单项。 在代码中，`data-toggle` 和 `aria-haspopup` 属性用于指定下拉菜单的行为，`aria-expanded` 属性用于指示下拉菜单的展开状态。 你可以根据自己的需求修改按钮和菜单项的文本、样式等内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梁辰兴

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值