BootStrap3 按钮式下拉菜单系列

最新推荐文章于 2021-06-03 02:21:34 发布
最新推荐文章于 2021-06-03 02:21:34 发布
阅读量275 收藏
点赞数
分类专栏： BootStrap3 文章标签： bootstrap3 按钮式下拉菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32617703/article/details/103206640
版权

目录

官方地址

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

按钮式下拉菜单

<div class="container">
    <!-- btn-group 跟普通的dropdown 的区别在于

        btn-group是inline-block

        dropdown是block

    -->
    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li>
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项1</a>
            </li>
        </ul>
    </div>
</div>

分裂式下拉菜单

<!-- 分裂式下拉菜单 -->
<div class="container">
    <div class="btn-group">
        <button type="button" class="btn btn-default">Dropdown</button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li>
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项1</a>
            </li>
        </ul>
    </div>
</div>

向上弹出下拉菜单

<!-- 向上弹出下拉菜单 -->
<div class="container">
    <div class="btn-group dropup">
        <button type="button" class="btn btn-default">Dropdown</button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li>
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项1</a>
            </li>
        </ul>
    </div>
</div>

尺寸

分裂式尺寸

<!-- 分裂式尺寸 -->
<div class="container">
    <div class="btn-group btn-group-lg">
        <button type="button" class="btn btn-default">Dropdown</button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li>
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项1</a>
            </li>
        </ul>
    </div>
</div>

非分裂式尺寸

<!-- 非分裂式尺寸 -->
<div class="container">
    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown">
            Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li>
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项1</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>28按钮式下拉菜单</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="">

<pre class="pre-scrollable">


</pre>


<div class="container">
    <!-- btn-group 跟普通的dropdown 的区别在于

        btn-group是inline-block

        dropdown是block

    -->
    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li>
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项1</a>
            </li>
        </ul>
    </div>
</div>

<!-- 分裂式下拉菜单 -->
<div class="container">
    <div class="btn-group">
        <button type="button" class="btn btn-default">Dropdown</button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li>
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项1</a>
            </li>
        </ul>
    </div>
</div>

<!-- 向上弹出下拉菜单 -->
<div class="container">
    <div class="btn-group dropup">
        <button type="button" class="btn btn-default">Dropdown</button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li>
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项1</a>
            </li>
        </ul>
    </div>
</div>

<!-- 尺寸 -->
<!-- 分裂式尺寸 -->
<div class="container">
    <div class="btn-group btn-group-lg">
        <button type="button" class="btn btn-default">Dropdown</button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li>
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项1</a>
            </li>
        </ul>
    </div>
</div>

<!-- 非分裂式尺寸 -->
<div class="container">
    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown">
            Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li>
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项1</a>
            </li>
            <li>
                <a href="#">菜单项1</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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap组件之按钮式下拉菜单小结
08-31
在 Bootstrap 中，按钮式下拉菜单（Button Dropdowns）是一个非常实用的功能，它允许在一个按钮内嵌套一个下拉列表，为用户提供多种操作选项。本文将详细介绍如何创建和自定义这些组件。 1. **单按钮下拉菜单** 单...
基于bootstrap按钮式下拉菜单组件的搜索建议插件
12-12
本文实例为大家分享了Bootstrap Search Suggest搜索建议插件的具体代码，供大家参考，具体内容如下 ...meta name="description" content="这是一个基于 bootstrap 按钮式下拉菜单组件的搜索建议插
html中按钮下拉菜单,Bootstrap3.0学习笔记之按钮与下拉菜单
weixin_42501270的博客
06-03 1552
前面的文章算是把Bootstrap CSS部分简单的学习了一遍，应该忽视了比较多的细节问题。不过大部分的内容我都过了一遍，并且用代码实现了一遍，而且看到了真实的效果。挺不错的。那么接下来的几篇文章主要来讲解Bootstrap的组件。那么本文主要来讲解以下内容再来熟悉一下这个开始建立一个页面的代码，首先新建一个测试网页加入如下代码复制代码代码如下:Bootstrap下拉菜单用于显示链接列表的可切换、...
Bootstrap3系列：按钮式下拉菜单
weixin_34290096的博客
09-05 86
1. 基本实例 　　把按钮放入 .btn-group 中，加入适当的菜单标签，让按钮触发下拉菜单。 1.1 示例代码 &lt;div class="btn-group"&gt; &lt;a class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt; 按钮式下拉菜单&lt;span cla...
Bootstrap3 下拉菜单及其调用方式
歪脖先生的博客
05-27 3264
下拉菜单 Bootstrap中，你可以为任何组件（如，导航条、胶囊式导航、标签导航、按钮等）添加下拉菜单。下拉菜单组件负责外观，下拉菜单插件（dropdown.js）负责交互行为，即控制下拉菜单组件的显示或隐藏。 调用方式 1、data属性调用 为超链接或按钮添加 data-toggle="dropdown" 属性，即可激活下拉菜单的交互行为。如： <divclass=...
Bootstrap3 下拉菜单（Dropdown）
分享我的点点滴滴，在成长路上与你同行！
02-18 7804
下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。 文档：http://www.runoob.com/bootstrap/bootstrap-dropdowns.html 使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。 效果图： 源代码：  必须加入bootstrap样式,主题，JS和jquery! &lt;link rel="st...
Bootstrap框架学习(四）——Bootstrap组件设计之下拉菜单与按钮
weixin_42029090的博客
06-12 3925
四、Bootstrap组件设计1、Bootstrap下拉菜单    Bootstrap下拉菜单组建，主要包括标签、对齐方式、禁用和子菜单等方面的内容。    标签    下拉菜单是可以用于展示可切换、有关联的菜单链接。创建下拉菜单需要使用列表标签&lt;ul&gt;-&lt;li&gt;，且下拉菜单的触发器和整个下拉菜单都需要包裹在.dropdowm类中，又或者声明为“position：relat...
15.按钮式下拉菜单.wmv
05-05
bootstrap是一个基于html、css、javascript的响应式的移动端优先的前端框架。使用起来非常方便、学习较为简单。
Bootstrap按钮下拉菜单组件详解
09-02
Bootstrap按钮下拉菜单组件是网页设计中常用的交互元素，它为用户提供了一种高效的方式来展示多个相关的操作选项。这个组件基于Bootstrap框架，一个流行的前端开发工具包，它简化了网页的布局和样式设计。在...
Bootstrap CSS组件之按钮下拉菜单
08-31
组合式下拉菜单是最常见的形式，它将按钮和下拉菜单合并在一起。在HTML结构中，使用`.btn-group`作为外层容器，`.btn`和`.dropdown-toggle`分别表示主按钮和下拉箭头。通过添加`data-toggle="dropdown"`属性，使得...
Bootstrap创建按钮下拉菜单
歪脖先生的博客
05-15 832
按钮下拉菜单 下拉菜单组件是一个独立的组件，可以将页面上的任何元素（如，按钮、导航等）和下拉菜单进行组合，让相应的元素具有下拉功能。 如果把按钮和下拉菜单进行组合，并让按钮充当下拉菜单的开关，就可以实现按钮下拉菜单功能。当用户点击按钮时，可以显示或隐藏下拉菜单。 创建按钮下拉菜单 Bootstrap3中，只需把按钮和下拉菜单包装在一个 .btn-group 中，并为按钮添加 .dropdo...
BootStrap3 警告框alert
爱喝水的qdy的博客
11-20 1094
目录官方地址基类情境色警告框中的链接警告框中的glyphicon图标可关闭的警告框淡入淡出效果整体代码 官方地址 https://v3.bootcss.com/components/#alerts 基类 .alert 情境色 .alert-success .alert-info alert-warning alert-danger <!-- 情境色 --> <div clas...
BootStrap3 下拉菜单dropdown
爱喝水的qdy的博客
11-20 1021
目录官方地址基本用法向上弹出菜单菜单项对齐左对齐带标题的下拉菜单带分割线的下拉菜单激活的菜单项禁用的菜单项整体代码 官方地址 https://v3.bootcss.com/components/#dropdowns 基本用法 .dropdown 声明下拉菜单组件 button 声明触发器 .dropdown-toggle data-toggle="dropdown" ul 声明菜单项 ....
BootStrap3 图标glyphicon
爱喝水的qdy的博客
11-19 726
目录官方地址glyphicons官方地址基类说明用法整体代码 官方地址 https://v3.bootcss.com/components/#glyphicons glyphicons官方地址 http://glyphicons.com/ 基类 .glyphicon 说明 图标类只能应用在不包含任何文本内容或子元素的元素上。 为了设置正确的内补（padding），务必在图标和文本之间添加一个空格...
BootStrap3 输入框组系列
爱喝水的qdy的博客
11-23 647
目录官方地址普通文本作为额外元素普通字符单选和多选按钮作为额外元素单个按钮下拉和分裂式多个按钮尺寸input-group-lg整体代码input-group-sm 官方地址 https://v3.bootcss.com/components/#input-groups 普通文本作为额外元素 .input-group .input-group-addon 普通字符 <div class="co...
BootStrap3 分页系列
爱喝水的qdy的博客
11-21 526
目录官方地址基本用法禁用和激活状态尺寸pagination-lgpagination-sm整体代码 官方地址 https://v3.bootcss.com/components/#pagination 基本用法 .pagination <!-- 基本用法 --> <div class="container"> <nav> <ul c...
BootStrap3 按钮系列
爱喝水的qdy的博客
11-18 521
目录官方地址基类可作为按钮的元素尺寸情境样式激活状态禁用状态整体代码 官方地址 https://v3.bootcss.com/css/#buttons-options 基类 .btn 可作为按钮的元素 <a class="" role="button" href=""></a> <button class="" type="button"></butto...
"Bootstrap三大组件：小图标、下拉菜单和按钮
综上所述，Bootstrap的图标菜单按钮组件包括了小图标组件、下拉菜单组件和各种按钮组件。这些组件不仅丰富多样，而且都有详细的文档说明和丰富的示例代码。通过这些组件，开发者可以快速搭建现代化的网站和 Web 应用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值