BootStrap3 下拉菜单dropdown

最新推荐文章于 2022-11-01 22:44:17 发布
最新推荐文章于 2022-11-01 22:44:17 发布
阅读量1k 收藏 3
点赞数 1
分类专栏： BootStrap3 文章标签： bootstrap3 下拉菜单 dropdown
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32617703/article/details/103171223
版权

目录

官方地址

https://v3.bootcss.com/components/#dropdowns

基本用法

  • .dropdown 声明下拉菜单组件
  • button 声明触发器
    • .dropdown-toggle
    • data-toggle="dropdown"
  • ul 声明菜单项
    • .dropdown-menu
<!-- 基本用法 -->
<div class="container">
    <div class="dropdown">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            下拉菜单 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-left">
            <li>
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项2</a>
            </li>
            <li>
                <a href="#">菜单项3</a>
            </li>
        </ul>
    </div>
</div>

向上弹出菜单

.dropup

<!-- 向上弹出菜单 -->
<div class="container">
    <div class="dropup">
        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
            向上弹出菜单 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-left">
            <li>
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项2</a>
            </li>
            <li>
                <a href="#">菜单项3</a>
            </li>
        </ul>
    </div>
</div>

菜单项默认打开

.open

<!-- 默认打开菜单项 -->
<div class="container">
    <div class="dropdown open">
        <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
            向上弹出菜单 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-left">
            <li>
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项2</a>
            </li>
            <li>
                <a href="#">菜单项3</a>
            </li>
        </ul>
    </div>
</div>

菜单项对齐

左对齐

.dropdown-menu-left

<!-- 左对齐 -->
<div class="container">
    <div class="dropdown">
        <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
            左对齐的下拉菜单 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-left">
            <li>
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项2</a>
            </li>
            <li>
                <a href="#">菜单项3</a>
            </li>
        </ul>
    </div>
</div>

右对齐

.dropdown-menu-right

<div class="container">
    <div class="dropdown">
        <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
            右对齐的下拉菜单 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right">
            <li>
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项2</a>
            </li>
            <li>
                <a href="#">菜单项3</a>
            </li>
        </ul>
    </div>
</div>

带标题的下拉菜单

.dropdown-header

<!-- 带标题的下拉菜单 -->
<div class="container">
    <div class="dropdown">
        <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
            带标题的下拉菜单 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-left">
            <li class="dropdown-header">浏览器</li>
            <li>
                <a href="#">Chrome</a>
            </li>
            <li>
                <a href="#">IE</a>
            </li>
            <li>
                <a href="#">Opera</a>
            </li>
            <li class="dropdown-header">浏览器</li>
            <li>
                <a href="#">Chrome</a>
            </li>
            <li>
                <a href="#">IE</a>
            </li>
            <li>
                <a href="#">Opera</a>
            </li>
        </ul>
    </div>
</div>

带分割线的下拉菜单

.divider

<!-- 带分隔线的下拉菜单 -->
<div class="container">
    <div class="dropdown">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
            带分隔线的下拉菜单 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-left">
            <li class="divider"></li>
            <li>
                <a href="#">Chrome</a>
            </li>
            <li>
                <a href="#">IE</a>
            </li>
            <li>
                <a href="#">Opera</a>
            </li>
            <li class="divider">浏览器</li>
            <li>
                <a href="#">Chrome</a>
            </li>
            <li>
                <a href="#">IE</a>
            </li>
            <li>
                <a href="#">Opera</a>
            </li>
        </ul>
    </div>
</div>

激活的菜单项

.active

<!-- 激活的菜单项 -->
<div class="container">
    <div class="dropdown">
        <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
            激活的菜单项 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-left">
            <li class="active">
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项2</a>
            </li>
            <li>
                <a href="#">菜单项3</a>
            </li>
        </ul>
    </div>
</div>

禁用的菜单项

.disabled

<!-- 禁用的菜单项 -->
<div class="container">
    <div class="dropdown">
        <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
            禁用的菜单项 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-left">
            <li class="disabled">
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项2</a>
            </li>
            <li>
                <a href="#">菜单项3</a>
            </li>
        </ul>
    </div>
</div>

整体代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>17下拉菜单</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body class="bg-info">

<pre class="pre-scrollable">


</pre>

<!-- 基本用法 -->
<div class="container">
    <div class="dropdown">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            下拉菜单 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-left">
            <li>
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项2</a>
            </li>
            <li>
                <a href="#">菜单项3</a>
            </li>
        </ul>
    </div>
</div>

<!-- 向上弹出菜单 -->
<div class="container">
    <div class="dropup">
        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
            向上弹出菜单 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-left">
            <li>
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项2</a>
            </li>
            <li>
                <a href="#">菜单项3</a>
            </li>
        </ul>
    </div>
</div>

<!-- 菜单项对齐 -->
<div class="container">
    <div class="dropdown">
        <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
            左对齐的下拉菜单 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-left">
            <li>
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项2</a>
            </li>
            <li>
                <a href="#">菜单项3</a>
            </li>
        </ul>
    </div>
</div>

<div class="container">
    <div class="dropdown">
        <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
            右对齐的下拉菜单 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right">
            <li>
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项2</a>
            </li>
            <li>
                <a href="#">菜单项3</a>
            </li>
        </ul>
    </div>
</div>

<!-- 带标题的下拉菜单 -->
<div class="container">
    <div class="dropdown">
        <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
            带标题的下拉菜单 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-left">
            <li class="dropdown-header">浏览器</li>
            <li>
                <a href="#">Chrome</a>
            </li>
            <li>
                <a href="#">IE</a>
            </li>
            <li>
                <a href="#">Opera</a>
            </li>
            <li class="dropdown-header">浏览器</li>
            <li>
                <a href="#">Chrome</a>
            </li>
            <li>
                <a href="#">IE</a>
            </li>
            <li>
                <a href="#">Opera</a>
            </li>
        </ul>
    </div>
</div>

<!-- 带分隔线的下拉菜单 -->
<div class="container">
    <div class="dropdown">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
            带分隔线的下拉菜单 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-left">
            <li class="divider"></li>
            <li>
                <a href="#">Chrome</a>
            </li>
            <li>
                <a href="#">IE</a>
            </li>
            <li>
                <a href="#">Opera</a>
            </li>
            <li class="divider">浏览器</li>
            <li>
                <a href="#">Chrome</a>
            </li>
            <li>
                <a href="#">IE</a>
            </li>
            <li>
                <a href="#">Opera</a>
            </li>
        </ul>
    </div>
</div>

<!-- 激活的菜单项 -->
<div class="container">
    <div class="dropdown">
        <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
            激活的菜单项 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-left">
            <li class="active">
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项2</a>
            </li>
            <li>
                <a href="#">菜单项3</a>
            </li>
        </ul>
    </div>
</div>

<!-- 禁用的菜单项 -->
<div class="container">
    <div class="dropdown">
        <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
            禁用的菜单项 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-left">
            <li class="disabled">
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项2</a>
            </li>
            <li>
                <a href="#">菜单项3</a>
            </li>
        </ul>
    </div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
爱喝水的qdy
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap 3多级下拉菜单实例
08-28
主要为大家详细介绍了Bootstrap 3多级下拉菜单实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap3 下拉菜单（Dropdown）
分享我的点点滴滴，在成长路上与你同行！
02-18 7813
下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。 文档：http://www.runoob.com/bootstrap/bootstrap-dropdowns.html 使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。 效果图： 源代码：  必须加入bootstrap样式,主题，JS和jquery! &lt;link rel="st...
Bootstrap3 下拉菜单及其调用方式
歪脖先生的博客
05-27 3280
下拉菜单 Bootstrap中，你可以为任何组件（如，导航条、胶囊式导航、标签导航、按钮等）添加下拉菜单。下拉菜单组件负责外观，下拉菜单插件（dropdown.js）负责交互行为，即控制下拉菜单组件的显示或隐藏。 调用方式 1、data属性调用 为超链接或按钮添加 data-toggle="dropdown" 属性，即可激活下拉菜单的交互行为。如： <divclass=...
Bootstrap 3之美06-Page Header、Breadcrumbs、Dropdowns、Button Dropdowns、用Button和Dropdowns模拟Select、Input G...
weixin_34220179的博客
01-08 143
本篇主要包括： ■  Page Header■  Breadcrumbs■  Button Groups■  Dropdowns■  Button Dropdowns■  用Button和Dropdowns模拟Select■  Input Groups■  Thumbnails■  Panels■  Wells □ Page Header Page Header是指页面最顶部。 ...
Bootstrap使用 .dropdown-menu 类创建下拉菜单
歪脖先生的博客
05-13 5371
下拉菜单 下拉菜单是一种非常常见的效果，用于展示可切换、有关联的一组链接，它可以节省网页排版空间，使网页布局简洁有序。 Bootstrap内置了一套完整的下拉菜单组件，可用于不同的元素，如导航、按钮等等。配合其他元素，还可以设计出形式多样的菜单效果。 下拉菜单的交互行为还需要 下拉菜单插件（dropdown.js）的支持，因此使用下拉菜单组件时，还必须引入 dropdown.js 文件。 ...
Bootstrap 下拉菜单.dropdown的具体使用方法
08-29
Bootstrap 下拉菜单.dropdown 的具体使用方法 Bootstrap 下拉菜单.dropdown 是一个常用的前端组件，用于提供用户交互式的菜单选项。在 Bootstrap 框架中，下拉菜单.dropdown 是一个非常重要的组件，广泛应用于各种 ...
Bootstrap实现下拉菜单多级联动
08-28
在 Bootstrap 中，下拉菜单是通过 `.dropdown` 类来实现的。要创建一个下拉菜单，只需要在 HTML 结构中添加该类，并将菜单项包装在 `<ul>` 元素中。例如： ```html <div class="dropdown"> ...
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
09-01
Bootstrap是一款流行的前端开发框架，它提供了许多便捷的组件，其中包括Dropdown下拉菜单。在构建响应式导航条时，Dropdown组件通常被广泛使用。默认情况下，Dropdown菜单需要用户点击才能展开，但这可能会降低交互...
解决bootstrap中下拉菜单点击后不关闭的问题
10-18
首先，我们需要了解Bootstrap下拉菜单的工作原理。Bootstrap的下拉菜单基于jQuery，通过监听文档上的`click`事件来判断是否关闭下拉菜单。当用户点击下拉菜单之外的任何地方时，菜单会自动关闭。要改变这种行为，...
Bootstrap下拉菜单
weixin_30915951的博客
10-04 84
基本样式示例 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里 <div class="dropdown"> <button class="btn btn-default " id="dropdownMenu1" data-toggle="dropdown" > 更多城市 <spa...
DropDownMenu下拉菜单改进版
06-08
致力于方便快捷的代码开发调用，使代码更简洁漂亮。---一个使用方便的DropDownMenu下拉菜单。
Dropdowns——下拉菜单
weixin_44583881的博客
06-18 1630
下拉菜单可以有多种实现途径，可以编写CSS代码，可以借助layui，也可以借助bootstrap插件等等 在使用bootstrap插件的前提下，将下拉列表的按钮和下拉菜单包含在dropdown中，或者另外声明position：relative元素，可以从<a>或者<button>触发下拉菜单，任何一个btn按钮都可以定义变...
Bootstrap下拉菜单dropdown组件的使用
热门推荐
草巾冒小子的博客
08-25 1万+
Bootstrap下拉菜单组件的使用 我们知道Bootstrap下拉菜单并非是真正意义上的select下拉框组件，而是ul、li 的模拟效果。只不过结合了bootstrap.js等等，让其具备了良好的兼容效果！ 今天就讲解一下具体的实现效果，以及页面iframe后的子页面，如何在主视图窗口实现下拉效果！ 代码简单示下： 前提：事先应引入bootstrap.css和bootstrap....
【前端开发】bootstrap框架：下拉菜单
`雾博客
06-18 3826
如需使用下拉菜单，只需要在 class。
Bootstrap系列 -- 27. 下拉菜单对齐方式
weixin_34061482的博客
06-25 174
  　　Bootstrap框架中下拉菜单默认是左对齐，如果你想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名。 &lt;h4&gt;使用pull-right类使下拉菜单与父容器右边对齐&lt;/h4&gt; &lt;div class="dropdown"&gt; &lt;b...
设置element下拉菜单el-dropdown-menu位置右对齐
u013025160的专栏
11-01 2771
【element】设置element下拉菜单el-dropdown-menu位置右对齐。
bootstrap——组件（一、下拉菜单）
zaichuanguanshui的专栏
01-18 677
1、dropdown基本用法<div class="dropdown"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul
bootstrap用dropdown-menu实现上下文菜单
文艺IT女青年
04-03 322
写在前面： 所谓上下文菜单，它与一般菜单的区别在于： 通过右键触发显示在鼠标右键点击处 鼠标在别处点击后，该菜单消失 实现方法： 在html中定义一个普通的没有触发条件的dropdown-menu，然后写这个menu的父容器的监听即可实现。 代码： [code="html"] 任务指派 任务监听 任务表单 ...
boostrap
dudukawa的博客
09-12 190
bootstrap 想要了解详情可以去bootstrap中文网（https://www.bootcss.com/）或者是bootstrap官网（https://getbootstrap.com/docs/3.4/css/）， 下拉列表 <div class="dropdown"> <button class="btn btn-default dropdown-toggle" ...
bootstrap对齐下拉菜单
最新发布
05-12
Bootstrap的下拉菜单默认左对齐，如果需要右对齐，可以使用`.dropdown-menu-right`类。以下是一个例子： ```html <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值