Bootstrap 手风琴菜单的实现代码
程序员文章站
2022-05-31 18:17:50
好了,废话不多说了,直接给大家贴代码了,具体代码如下所示:
...
好了,废话不多说了,直接给大家贴代码了,具体代码如下所示:
<!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>
以上所述是小编给大家介绍的bootstrap 手风琴菜单的实现代码,希望对大家有所帮助
上一篇: iPad最终归宿是生产力?iPad mini身上有答案
下一篇: 宣太后最爱的人是谁?谁也不会想到
推荐阅读
-
css3实现的圆角效果代码实例_html/css_WEB-ITnose
-
chromebookmarkssyncadapter php通过COM类调用组件的实现代码
-
php实现的DateDiff和DateAdd时间函数代码分享
-
在光标处插入字符串的实现代码 兼容IE,Firefox_javascript技巧
-
Javascript实现滚动图片新闻的实例代码_javascript技巧
-
python实现多线程采集的2个代码例子
-
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
-
[C#小程序]命令行小程序之你要买大杯小杯还是中杯的实现代码
-
PHPExcel读取Excel文件的实现代码
-
php生成4位数字验证码的实现代码