垂直伸缩菜单——bootstrap手风琴嵌套

最新推荐文章于 2024-09-02 18:03:19 发布

SarielLVtang

最新推荐文章于 2024-09-02 18:03:19 发布

阅读量9.9k

点赞数

分类专栏： bootstrap 文章标签： bootstrap collapse

本文链接：https://blog.csdn.net/yekonglieshou/article/details/48572679

版权

这篇博客详细介绍了如何使用Bootstrap的collapse插件创建垂直伸缩菜单，并且通过添加onclick事件，实现了图标样式的切换，以增强用户体验。

摘要由CSDN通过智能技术生成

bootstrap的折叠插件collapse具有可伸缩的效果，将其进行嵌套使用就可以摇身一变成为一个垂直伸缩的菜单了。
关于collapse的基本用法可以参考  http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html ，

里面会有较详细的用法。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8"> 
            <!-- Bootstrap核心CSS文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- jQuery文件，在bootstrap.min.js之前引入 -->
<script src="http://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<!-- Bootstrap核心JavaScript文件 -->
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> 
&