Bootstrap 手风琴菜单

最新推荐文章于 2022-02-19 10:27:47 发布
最新推荐文章于 2022-02-19 10:27:47 发布
阅读量1.6k 收藏
点赞数
分类专栏： CSS Bootstrap 文章标签： bootstrap css 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8"> 
<link rel="stylesheet" href="css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="js/jquery-1.11.1.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div style="width: 200px;">
            <div class="panel-group" id="accordion2">
            <div class="panel-heading">
                <strong style="font-size: 30px;">论坛分类</strong>
            </div>
                <div class="panel panel-default">
                    <div class="panel-heading" data-toggle="collapse"
                        data-parent="#accordion2" href="#collapseOne">
                        <a class="accordion-toggle">Java</a>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse"
                        style="height: 0px;">
                        <div class="panel-body">
                            <ul class="nav nav-pills nav-stacked">
                                <li><a href="#">Java基础</a></li>
                                <li><a href="#">Java面向对象</a></li>
                                <li><a href="#">Java核心API</a></li>
                                <li><a href="#">JavaEE</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" data-toggle="collapse"
                        data-parent="#accordion2" href="#collapseTwo">
                        <a class="accordion-toggle">数据库</a>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse"
                        style="height: 0px;">
                        <div class="panel-body">
                            <ul class="nav nav-pills nav-stacked">
                                <li><a href="#">SQL基础</a></li>
                                <li><a href="#">Oracle</a></li>
                                <li><a href="#">MySQL</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" data-toggle="collapse"
                        data-parent="#accordion2" href="#collapseThree">
                        <a class="accordion-toggle">技术前沿</a>
                    </div>
                    <div id="collapseThree" class="panel-collapse in"
                        style="height: 0px;">
                        <div class="panel-body">
                            <ul class="nav nav-pills nav-stacked">
                                <li><a href="#">NoSQL</a></li>
                                <li><a href="#">Hadoop</a></li>
                                <li><a href="#">WebService</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</body>
</html>
thingir
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap手风琴菜单
GISXX
06-05 9025
手风琴菜单似乎已经成了网站后台的标配了，怎么写一个手风琴式的菜单呢？如果你利用原生js去写可能会比较麻烦，但利用Bootstrap框架的Collapse.js插件就变得简单啦。
bootstrap手风琴menu
Blitz_Man
11-24 875
利用bootstrap写了一个简单的菜单展示。 效果： 源码： .container{ margin:0 auto; width:800px; //background:gray; } .menuDiv{ margin-bottom:2px; } $(function(){ $(".me
bootstrap实现手风琴功能(树形列表)
weixin_34387284的博客
02-23 607
首先把架包拷进项目，然后在页面中引进css,js <script src="js/jquery/jquery-2.1.1.min.js"></script> <script src="js/bootstrap/bootstrap.min.js"></script> <link href="css/bootstr...
又一款Bootstrap风格的竖向手风琴下拉菜单.rar
07-10
又一款Bootstrap风格的竖向手风琴下拉菜单，叫做折叠菜单也行吧，扁平化风格，点击后下拉出子菜单，多级的下拉菜单，其实感觉更像是一个折叠、展开的面板，看上去还是挺简洁的。而且这款导航面板在展开内容的同时，还有渐变的动画效果，静中有动，感觉不错。
Bootstrap垂直手风琴折叠菜单特效
12-12
这是一款效果非常炫酷的Bootstrap垂直手风琴折叠菜单特效。在该bootstrap垂直手风琴折叠菜单中，每个菜单项通过css3阴影制作出带立体感觉的纸张效果，非常炫酷。
Bootstrap手风琴菜单插件
阳光下的冷静的博客
03-31 1919
Bootstrap手风琴菜单插件介绍 这是一款bootstrap手风琴菜单美化效果。该bootstrap手风琴菜单在原生bootstrap accordion的基础上，通过简单的CSS代码来进行美化，生成更加漂亮的bootstrap手风琴菜单效果。 Bootstrap手风琴菜单插件使用方法 在页面中引入jquery和bootstrap相关文件，以及font-awesome字体图标文件。 &l...
基于Bootstrap手风琴菜单代码
06-24
Bootstrap手风琴菜单是一种常见的网页导航元素，它利用jQuery和Bootstrap框架实现，为用户提供了一种交互式的、垂直折叠展开的菜单结构。这种菜单在有限的空间内展示大量的层级内容，通过点击菜单项，只显示当前选中...
Bootstrap 手风琴菜单的实现代码
08-31
主要介绍了Bootstrap 手风琴菜单的实现代码,需要的朋友可以参考下
bootstrap手风琴菜单
12-11
这是一款bootstrap手风琴菜单美化效果。该bootstrap手风琴菜单在原生bootstrap accordion的基础上，通过简单的CSS代码来进行美化，生成更加漂亮的bootstrap手风琴菜单效果。
基于Bootstrap手风琴菜单代码.zip
07-04
Bootstrap手风琴菜单是网页设计中常用的一种交互元素，它以折叠的方式呈现多个层次的导航项，节省空间的同时，提供良好的用户体验。这种效果通常应用于侧边栏导航、内容分类等场景，使得用户能够轻松地展开和关闭...
Bootstrap漂亮的垂直手风琴列表效果.zip
07-04
这是一款基于Bootstrap的漂亮垂直手风琴列表效果。该垂直手风琴列表代码简单，样式新颖，值得推荐。
自适应左侧手风琴下拉菜单
04-24
自适应左侧手风琴下拉菜单js代码 自适应左侧手风琴下拉菜单js代码 自适应左侧手风琴下拉菜单js代码
jQuery Bootstrap垂直手风琴列表切换代码
06-09
jQuery垂直手风琴列表切换展示代码是一款样式新颖基于Bootstrap实现的网页手风琴特效。
导航菜单,下拉菜单,手风琴菜单,JS下拉菜单,jQuery下拉菜单,导航下拉菜单特效
12-03
手风琴菜单效果，导航菜单,下拉菜单,手风琴菜单,JS下拉菜单,jQuery下拉菜单,导航下拉菜单特效
Bootstrap 手风琴
21号先锋者
02-08 504
@{ Layout = null; } &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt;&lt;!--设置字符集utf-8编码--&gt; &lt;meta name="viewport" content="width=device-wi
炫酷Bootstrap垂直手风琴CSS3折叠菜单插件
ICode联盟
02-19 277
下载地址 效果非常炫酷的Bootstrap垂直手风琴折叠菜插件，在该bootstrap垂直手风琴折叠菜单中，每个菜单项通过css3阴影制作出带立体感觉的纸张效果，非常炫酷。 dd:
bootstrap手风琴折叠
杨哥的博客
05-22 5101
手风琴折叠 XXX Bootstrap --> Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS/
bootstrap插件手风琴
weixin_44389021的博客
03-14 285
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;link href="https://cdn.jsdelivr.net/npm/boo
bootstrap js插件篇——手风琴、图片轮播
大小都是愁的成长之路
07-15 2189
八、手风琴、图片轮播   8.1 手风琴基本结构     注：1、面板包括两个部分，第一个是面板标题 panel-heading，并且在这里面添加标题 panel-title。第二个部分是面板内容，也就是折叠区，使用 panel-collapse 样式。       2、通过锚链接的方法把标题区域和面板区捆绑在一起       3、在 panel-collapse 样式上添加
bootstrap实现手风琴效果
最新发布
05-11
手风琴效果可以通过 Bootstrap 的 Collapse 组件来实现。下面是一个简单的示例代码： ```html <div class="accordion" id="accordionExample"> <div class="card"> <div class="card-header" id="headingOne"> <h2 class="mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 手风琴1 </button> </h2> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> 内容1 </div> </div> </div> <div class="card"> <div class="card-header" id="headingTwo"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 手风琴2 </button> </h2> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"> <div class="card-body"> 内容2 </div> </div> </div> </div> ``` 在这个例子中，我们使用了 Bootstrap 的 Collapse 组件来创建两个手风琴项。每个手风琴项包含一个标题和一个内容部分。当用户点击标题时，相应的内容部分会展开或收缩。注意，每个手风琴项必须有一个唯一的 ID，且所有手风琴项都必须包含在一个父容器中（这里是一个带有 ID 为“accordionExample”的 div 元素）。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值