【14】Bootstrap — 按钮式下拉菜单

最新推荐文章于 2022-02-13 19:24:33 发布
最新推荐文章于 2022-02-13 19:24:33 发布
阅读量224 收藏
点赞数
文章标签： bootstrap 按钮式下拉菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32629809/article/details/77857259
版权

单按钮下拉菜单

<!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">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding: 20px;">
        <div class="bs-example">
            <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <a href="#">Action</a>
                    </li>
                    <li>
                        <a href="#">Another action</a>
                    </li>
                    <li>
                        <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">Separated link</a>
                    </li>
                </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary <span class="caret"></span></button>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <a href="#">Action</a>
                    </li>
                    <li>
                        <a href="#">Another action</a>
                    </li>
                    <li>
                        <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">Separated link</a>
                    </li>
                </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
                <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <a href="#">Action</a>
                    </li>
                    <li>
                        <a href="#">Another action</a>
                    </li>
                    <li>
                        <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">Separated link</a>
                    </li>
                </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
                <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <a href="#">Action</a>
                    </li>
                    <li>
                        <a href="#">Another action</a>
                    </li>
                    <li>
                        <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">Separated link</a>
                    </li>
                </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
                <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <a href="#">Action</a>
                    </li>
                    <li>
                        <a href="#">Another action</a>
                    </li>
                    <li>
                        <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">Separated link</a>
                    </li>
                </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
                <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <a href="#">Action</a>
                    </li>
                    <li>
                        <a href="#">Another action</a>
                    </li>
                    <li>
                        <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">Separated link</a>
                    </li>
                </ul>
            </div>
            <!-- /btn-group -->
        </div>
    </body>
</html>

按钮式下拉菜单

分裂式按钮下拉菜单

<!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">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding: 20px;">
        <div class="bs-example">
            <div class="btn-group">
                <button type="button" class="btn btn-default">Default</button>
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <a href="#">Action</a>
                    </li>
                    <li>
                        <a href="#">Another action</a>
                    </li>
                    <li>
                        <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">Separated link</a>
                    </li>
                </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
                <button type="button" class="btn btn-primary">Primary</button>
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <a href="#">Action</a>
                    </li>
                    <li>
                        <a href="#">Another action</a>
                    </li>
                    <li>
                        <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">Separated link</a>
                    </li>
                </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
                <button type="button" class="btn btn-success">Success</button>
                <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <a href="#">Action</a>
                    </li>
                    <li>
                        <a href="#">Another action</a>
                    </li>
                    <li>
                        <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">Separated link</a>
                    </li>
                </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
                <button type="button" class="btn btn-info">Info</button>
                <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <a href="#">Action</a>
                    </li>
                    <li>
                        <a href="#">Another action</a>
                    </li>
                    <li>
                        <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">Separated link</a>
                    </li>
                </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
                <button type="button" class="btn btn-warning">Warning</button>
                <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <a href="#">Action</a>
                    </li>
                    <li>
                        <a href="#">Another action</a>
                    </li>
                    <li>
                        <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">Separated link</a>
                    </li>
                </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
                <button type="button" class="btn btn-danger">Danger</button>
                <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <a href="#">Action</a>
                    </li>
                    <li>
                        <a href="#">Another action</a>
                    </li>
                    <li>
                        <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">Separated link</a>
                    </li>
                </ul>
            </div>
            <!-- /btn-group -->
        </div>
    </body>
</html>

分裂式按钮下拉菜单

控制按钮式下拉菜单尺寸

<!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">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding: 20px;">
        <div class="bs-example">
            <div class="btn-toolbar" role="toolbar">
                <div class="btn-group">
                    <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
                        Large button <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li>
                            <a href="#">Action</a>
                        </li>
                        <li>
                            <a href="#">Another action</a>
                        </li>
                        <li>
                            <a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">Separated link</a>
                        </li>
                    </ul>
                </div>
                <!-- /btn-group -->
            </div>
            <!-- /btn-toolbar -->
            <hr/>
            <div class="btn-toolbar" role="toolbar">
                <div class="btn-group">
                    <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
                        Small button <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li>
                            <a href="#">Action</a>
                        </li>
                        <li>
                            <a href="#">Another action</a>
                        </li>
                        <li>
                            <a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">Separated link</a>
                        </li>
                    </ul>
                </div>
                <!-- /btn-group -->
            </div>
            <!-- /btn-toolbar -->
            <hr/>
            <div class="btn-toolbar" role="toolbar">
                <div class="btn-group">
                    <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
                        Extra small button <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li>
                            <a href="#">Action</a>
                        </li>
                        <li>
                            <a href="#">Another action</a>
                        </li>
                        <li>
                            <a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">Separated link</a>
                        </li>
                    </ul>
                </div>
                <!-- /btn-group -->
            </div>
            <!-- /btn-toolbar -->
        </div>
    </body>
</html>

按钮式下拉菜单

向上弹出式菜单

<!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">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding-top: 200px;">
        <div class="bs-example">
            <div class="btn-toolbar" role="toolbar">
                <div class="btn-group dropup">
                    <button type="button" class="btn btn-default">Dropup</button>
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li>
                            <a href="#">Action</a>
                        </li>
                        <li>
                            <a href="#">Another action</a>
                        </li>
                        <li>
                            <a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">Separated link</a>
                        </li>
                    </ul>
                </div>
                <!-- /btn-group -->
                <div class="btn-group dropup">
                    <button type="button" class="btn btn-primary">Right dropup</button>
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                        <li>
                            <a href="#">Action</a>
                        </li>
                        <li>
                            <a href="#">Another action</a>
                        </li>
                        <li>
                            <a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">Separated link</a>
                        </li>
                    </ul>
                </div>
                <!-- /btn-group -->
            </div>
        </div>
    </body>
</html>

向上弹出式菜单

有心博客
关注
Bootstrap按钮下拉菜单组件详解
09-02
Bootstrap按钮下拉菜单组件是网页设计中常用的交互元素，它为用户提供了一种高效的方式来展示多个相关的操作选项。这个组件基于Bootstrap框架，一个流行的前端开发工具包，它简化了网页的布局和样式设计。在...
bootstrap组件之按钮式下拉菜单小结
08-31
在 Bootstrap 中，按钮式下拉菜单（Button Dropdowns）是一个非常实用的功能，它允许在一个按钮内嵌套一个下拉列表，为用户提供多种操作选项。本文将详细介绍如何创建和自定义这些组件。 1. **单按钮下拉菜单** 单...
【单片机C语言】编写一个菜单
热门推荐
weixin_45715477的博客
07-20 1万+
目录 前言 一、菜单分级和所执行程序编写 二、菜单的切换 三、结语 前言 本文讲解了如何用C语言实现一个菜单。本菜单的选项切换、确认、返回逻辑与菜单中选项具体要实现的功能分离开，让菜单的代码更加清晰，避免了一般状态机编写中状态机功能切换逻辑与具体功能写在一起造成混乱的情况。 一、菜单分级和所执行程序编写 一个菜单首先要分不同的层级，这些层级可以通过切换键（如左右键）、确定键、返回键进行同层级和不同层级的选择，这样就可以实现用菜单选择执行不同的程序了。 首先，根据菜单的结构，我们...
iview组件Dropdown设置点击事件无效
qq_36437172的博客
11-27 3870
问题：点击DropdownItem 时，给其添加点击事件，并无作用。 描述：对于Dropdown 下拉菜单组件，我们点击DropdownItem 时，官网并没有任何事件方法，而提供了一个Dropdown 的点击事件。 Dropdown events 事件名 说明 返回值 on-click 点击菜单项时触发 DropdownItem 的 name 值 根...
下拉框插件 dropdown.js介绍
u012864281的博客
06-07 1万+
在项目中使用到了dropdown.js插件，把使用的方法以及注意点记录了下来。插件描述：Dropdown是面向PC端的基于jQuery开发的轻量级下拉框插件，支持keyvalue搜索，有token和两种模式。地址：http://www.jq22.com/jquery-info14548一、使用说明1、html中使用&lt;div&gt;将select包含：   &lt;div class="sel...
每日一bootstrap 下拉菜单
不忘初心
03-22 422
下拉菜单要使用JS插件，bootstrap的JS插件是基于jquery的，所以我们同时需要加载jquery代码很简单。下面贴出来 <div class="dropdown"> <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropd
【Bootstrap】下拉菜单Dropdown
编程记录，亲测有效
11-07 4777
下拉菜单Dropdown不是表单中那种啊，而是导航条中常见的那种。 Bootstrap官方网站对下拉菜单Dropdown的解释很少，即使是他们的英文官方网站。 对于如何更改下拉菜单的背景颜色、如果对下拉菜单默认的黑色超级链接进行修改，如何把下拉菜单更改成普通的超级链接而不是文字的样式，官方网站是完全没有具体的解释。 而且，官方网站的超级链接代码杂糅着许多没有用的参数。 笔者研究了很久，
Bootstrap 按钮下拉菜单
歪脖先生的博客
03-08 958
按钮下拉菜单按钮下拉菜单，就为按钮添加一个下拉菜单，当用户点击按钮时，再显示或隐藏下拉菜单。只需把按钮和下拉菜单包装在一个 .btn-group 中，并为按钮添加 .dropdown-toggle 类和 data-toggle="dropdown" 属性，就可以创建一个按钮下拉菜单。为了从视觉上告诉人们按钮包含下拉菜单，还要为按钮添加一个 &lt;span class="caret"&gt;&lt...
bootstrap按钮下拉菜单
zhangankang的博客
06-29 2200
使用 Bootstrap class 向按钮添加下拉菜单。向按钮添加下拉菜单，只需要简单地在一个 .btn-group 中放置按钮和下拉菜单即可。您也可以使用 <span class="caret"></span> 来指示按钮作为下拉菜单。 基本的简单的按钮下拉菜单： <!DOCTYPE html> <html> <head> ...
学习记录：Bootstrap 按钮式下拉菜单
人生苦短，何妨一试
02-13 681
按钮式下拉菜单 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../bootstrap-3.4.1/bootstrap-3.4.1/dist/css/bootstrap.min.css"> </head> <body> .
BootStrap3 按钮式下拉菜单系列
爱喝水的qdy的博客
11-22 314
目录官方地址按钮式下拉菜单分裂式下拉菜单向上弹出下拉菜单尺寸分裂式尺寸非分裂式尺寸整体代码 官方地址 https://v3.bootcss.com/components/#btn-dropdowns 按钮式下拉菜单 <div class="container"> <!-- btn-group 跟普通的dropdown 的区别在于 btn-group是in...
Bootstrap——按钮式下拉菜单、输入框组
Shiliang1995
06-15 1609
<!-- 图标 --> <!-- aria-label属性表示该标签的意图 --> <!-- 如果图标纯粹当装饰作用时，可以给这些图标设置aria-hidden=“true”属性 -->
HTML5 Bootstrap响应式手机导航下拉菜单代码
06-05
这个文件将定义导航菜单的各个部分，如品牌标识、按钮、下拉菜单项等。同时，它可能会利用HTML5的新特性来优化移动设备上的用户体验。 `css`文件夹很可能包含一个或多个CSS文件，用于定义导航菜单的样式。Bootstrap...
地级市GDP及产业结构数据-最新.zip
最新发布
11-14
地级市GDP及产业结构数据-最新.zip
2006-2023年上市公司资产误定价Misp数据集（4.9万样本，含原始数据、代码及结果，最新）.zip
11-14
2006-2023年上市公司资产误定价Misp数据集（4.9万样本，含原始数据、代码及结果，最新）.zip
Altera和Xilinx FPGA的从串配置模式比较
11-14
本文对两大主流FPGA厂商的从串配置模式（Altera：Passive Serial Mode；Xilinx：Slave Serial Mode）进行了描述，并指出了主要的不同之处。
Spring Boot 教程源码项目：含多种功能示例.zip
11-14
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。
R语言高级建模课程全集-最新整理.zip
11-14
R语言高级建模课程全集-最新整理.zip
Bootstrap3.0组件教程：按钮与下拉菜单解析
此外，Bootstrap还提供了按钮式下拉菜单，它结合了按钮组和下拉菜单的特点。这样的设计可以将一组相关的操作放在一个紧凑的空间内。创建一个按钮式下拉菜单，你需要在按钮组内部添加一个下拉菜单元素： ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值