Bootstrap练习：可折叠下拉菜单

最新推荐文章于 2022-11-28 10:32:42 发布
最新推荐文章于 2022-11-28 10:32:42 发布
阅读量337 收藏
点赞数
文章标签： java javascript ViewUI
原文链接：http://www.cnblogs.com/believepd/p/9844276.html
版权

代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/believepd/bootstrap.min.css">
</head>
<body>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
                   aria-expanded="true" aria-controls="collapseOne">
                    菜单1
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                <p><button>宫爆鸡丁</button></p>
                <p><button>宫爆鸡丁</button></p>
                <p><button>宫爆鸡丁</button></p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"
                   aria-expanded="false" aria-controls="collapseTwo">
                    菜单2
                </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">
                <p><button>宫爆鸡丁</button></p>
                <p><button>宫爆鸡丁</button></p>
                <p><button>宫爆鸡丁</button></p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingThree">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"
                   aria-expanded="false" aria-controls="collapseThree">
                    菜单3
                </a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="panel-body">
                <p><button>宫爆鸡丁</button></p>
                <p><button>宫爆鸡丁</button></p>
                <p><button>宫爆鸡丁</button></p>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="https://blog-static.cnblogs.com/files/believepd/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/believepd/bootstrap.min.js"></script>
</body>
</html>
View Code

效果：

转载于:https://www.cnblogs.com/believepd/p/9844276.html

学习Bootstrap组件之下拉菜单
12-10
Bootstrap 是由Twitter 工程师推出的基于HTML，CSS，JAVASCRIPT的简洁灵活的流行前端框架，我们可以把它想象成一个定义了很多效果的CSS与JS的库，库里面已经定义好了各种组件的显示效果与动画。 .dropdown——设置父元素为下拉菜单组件，向下弹出子菜单； .dropup——设置父元素为下拉菜单组件，向上弹出子菜单； .dropdown-toggle——设置按钮为下拉菜单切换按钮； .dropdown-menu——设置ul元素为下拉菜单； .dropdown-menu-right——将菜单右对齐； .pull-right——将菜单组件的父元素右对齐； .dropd
bootstrap4:bootstrap4的练习代码
05-10
9. **下拉菜单和模态框**：`.dropdown`类用于创建下拉菜单，`.modal`用于创建模态对话框，这些都是网页交互中的常见元素。 10. **JavaScript插件**：除了基本的HTML和CSS，Bootstrap 4还提供了一些JavaScript插件，...
Bootstrap学习笔记--下拉菜单，折叠，菜单，标签，Pills
qq_38409944的博客
05-26 5567
下拉菜单： 下拉菜单是比较常见的 直接看源码： .dropdown表示下拉框 按钮和下拉框都要放在dropdown类的div下 要打开下拉菜单，请使用按钮或具有属性的类.dropdown-toggle和 属性data-toggle=&amp;amp;amp;amp;quot;dropdown&amp;amp;amp;amp;quot; span+.caret类可以创建一个插入箭头图标 .dropdown-menu类添加到&amp;amp;amp;amp;amp;lt;u
bootstrap下拉菜单学习（五）
dengfengling999的博客
11-28 622
写下拉按钮：class命名样式 当点击按钮触发下拉菜单需要加data-toggle。图标不仅可以直接放文本里面， 还可有结合按钮去用。下拉菜单 class：用dropdown-menu。首先写一个div class：dropdown。bootstrap字体图标和下拉菜单组件的使用。查看是否引入成功：200位成功。
17 - 折叠菜单练习，下拉菜单练习
DanBo_C的博客
09-08 276
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>43-折叠菜单下</title> <style> *{ margin: 0; paddi...
bootstrap导航栏_bootstrap：创建可折叠的navbar下拉菜单
weixin_39526706的博客
11-22 970
准备bootstrap版本： v4.3以下内容放在.html文件的<head>里：<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34...
bootstrap仿站练习：模拟BootCDN静态页面制作
- **下拉菜单（Dropdowns）**：用于创建下拉式菜单，通常结合导航栏使用。 - **轮播图（Carousels）**：制作图片轮播效果，常用于展示产品或图片。 - **折叠（Collapse）**：用于制作可折叠的内容区域。 #### 静态...
Bootstrap实战练习教程：4个完整页面
3. JavaScript插件：Bootstrap附带了一系列预设的JavaScript插件，包括模态框、下拉菜单、轮播图、折叠组件、标签页、工具提示和弹出窗口等。这些插件可帮助实现更加丰富的交互效果。 4. 自定义与优化：在掌握了...
html5bootstrap:学习bootsstrap时候临摹的源代码-源码时代
03-24
3. **JavaScript插件**：Bootstrap的JavaScript插件扩展了其CSS组件的功能，如可滚动的轮播图、可折叠的导航菜单、日期选择器等。这些插件基于jQuery库，可以通过数据属性或JavaScript方法进行控制。 4. **定制**：...
Aula_Bootstrap-DIO:首次使用Bootstrap
05-05
1. **导航栏（Navbar）**：Bootstrap的导航栏是创建顶部固定菜单的便捷方式，支持折叠、下拉菜单等功能。 2. **卡片（Card）**：卡片组件用于展示信息，如图片、文本和链接，常用于博客文章、产品展示等。 3. **...
bootstrap树形下拉框 下拉框树形菜单（修改版）
06-06
bootstrap树控件使用bootstrap-treeview.js树形控件在下拉框select中显示，带树形的下拉框
Bootstrap左侧下拉三级菜单导航
11-22
Bootstrap左侧下拉三级菜单导航 ,代码简洁，注释详细，希望各位大神多提意见后续会继续完善
bootstrap5：Bootstrap 5-示例和练习项目
03-04
Desenvolver布局baseado no arquivo MODELO SITE： 1 Colunas ao ser visualizado否celular 2 Colunas ao ser visualizado否平板电脑4 Colunas ao ser visualizado否computador Deveráconter： 影像 文字报 文本 Botãocom o texto-塞巴舞 软件ERP Trabalhamos comvários的客户，DES PORTE Pequenoatémulti nacionais e estamos prreparados para melhor lender。 （imagem：software.png） Aplicativos移动版 Android应用程序和IOS参数集成软件。 （imagem：mobile.png） Desen
Bootstrap折叠导航栏
qq_41003773的博客
08-20 7049
折叠导航栏 组成结构 div.navbar.navbar-expand-*.navbar-dark.bg-dark >a.navbar-brand 不折叠的菜单首项 +button.navbar-toggler *以上屏幕不显示，*以下屏幕显示按钮 >span.navbar-toggler-icon 按钮上的三条线 +div.col...
浅谈对Bootstrap的看法之二（下拉菜单、动态选项卡、折叠导航栏、轮播图、模态框）
吉帅振博客
06-20 6331
1.下拉菜单相关说明：下拉菜单对应.dropdown 类，我们可以使用button按钮或a链接来打开下拉菜单，需要添加class="dropdown-toggle" 和 data-toggle="dropdown" 属性。主要代码：&lt;div class="dropdown"&gt; &lt;button type="button" class="btn btn-primary
bootstrap导航栏折叠
vinc_ent的博客
02-09 2836
在使用bootstrap时发现navbar-header不明确含义，多次搜索后发现可以在页面过小时赋予折叠按钮的东西，虽然还是不是很懂，但是可以使用。 <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ex...
bootstrap 导航菜单 折叠位置_下拉菜单的讲究
weixin_39646021的博客
11-29 355
下拉菜单是前端的常用组件之一，几乎所有前端组件库都提供这一组件。不知道大家有没有思考过如何实现一个下拉菜单，方法要尽量简单。我曾经用纯css实现过一个下拉菜单，思路就是利用overflow的属性，非常简单：<我对这个简洁优雅的实现甚为满意。直到有一天我用它弹出一个饿了么组件对话框……正常的菜单是这样的：正常下拉菜单点击菜单项“数据视图”出现弹窗，到这步一切正常。问题出现在对话框关闭的时候：无...
bootstrap下拉菜单dropdown点击后阻止自动收起菜单
南京小龙虾的博客
08-07 5202
公司有个切换院区的下拉框，使用的bootstrap的dropdown,以前是单选,因此点击切换后就会自动收起并且将数据传给后台，现在改成了多选，出现了一个问题就是点击一个后也会自动收起，这样的多选肯定是有问题的，因此在网上搜索了一下，找到了一种方法科室阻止菜单的点击自动收起 不废话，直接上代码 在生成dropdown-menu下的代码里，给每个<li>标签加一个属...
Bootstrap之侧边导航菜单(可折叠分组)
热门推荐
商明超的专栏
11-10 14万+
效果图： 源码：<!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
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值