<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>

<body style="margin: 200px;">
      <div class="col-md-4">
        <div class="panel-group" id="accordion">

<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#one" data-toggle = "collapse" data-parent = "#accordion">订单管理</a>
</h4>
</div>
                  
                <div class="panel-collapse collapse in" id="one">
                <div class="panel-body">
                 <ul class="nav nav-pills nav-stacked">
                   <li>
<a href="#">鞋子管理</a>
</li>
<li>
<a href="#">鞋子管理</a>
</li>
<li>
<a href="#">鞋子管理</a>
</li>
<li>
<a href="#">鞋子管理</a>
</li>
                      </ul>
                </div>
                </div>
  
</div>
            
            <div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#two" data-toggle = "collapse" data-parent = "#accordion">订单管理</a>
</h4>
</div>
                  
                <div class="panel-collapse collapse" id="two">
                <div class="panel-body">
                 <ul class="nav nav-pills nav-stacked">
                   <li>
<a href="#">鞋子管理</a>
</li>
<li>
<a href="#">鞋子管理</a>
</li>
<li>
<a href="#">鞋子管理</a>
</li>
<li>
<a href="#">鞋子管理</a>
</li>
                      </ul>
                </div>
                </div>
  
</div>
            
</div>
      </div>
</body>

</html>

bootstrap手风琴折叠的更多相关文章

  1. Bootstrap手风琴效果

    前面的话 Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果.当单击一个触发元素时,在另外一个可折叠区域进行显示或隐藏,再次单击时可以反转显示状态.经典的场景是多个折 ...

  2. jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解

    在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...

  3. [转] CSS3垂直手风琴折叠菜单

    [From] http://www.html5tricks.com/css3-ver-accordion-menu.html 之前我们已经分享过很多关于手风琴菜单了,有水平方向的,也有垂直方向的.今天 ...

  4. 全面解析Bootstrap手风琴效果

    触发手风琴可以通过自定义的data-toggle 属性来触发.其中data-toggle值设置为 collapse,data-target="#折叠区标识符". 第一步:设计一个面 ...

  5. javascript实现的手风琴折叠菜单效果

    演示地址:http://codepen.io/anon/pen/pJERMq 实现效果: HTML代码: <!DOCTYPE html> <html lang="en&qu ...

  6. Bootstrap之折叠（Collapse）插件

    学习资料:Bootstrap折叠(Collapse)插件 大家可能常见的都是类似: 这种的效果,小颖今天要给大家分享一个不一样的效果嘻嘻.铛铛铛铛........................... ...

  7. ⒂bootstrap组件 折叠 基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. bootstrap的折叠组件1

    官网的例子: http://v3.bootcss.com/javascript/#collapse <div class="panel-group" id="acc ...

  9. bootstrap 手风琴效果

    <!DOCTYPE HTML> <html><head><meta charset="utf-8"><title>按钮插 ...

随机推荐

  1. iOS.Info.plist

    1. Custom message when asking for Address Book Permissions http://kevinyavno.com/blog/?p=176

  2. vs2015 npm list 更新问题

    在更新npm list时候,经常会非常的慢,今天试了一个诡异的方法,就是在文件夹下面直接把所有缓存全部删除,全部重新下,结果感觉反而速度快很多. 原来的更新包80M竟然1个小时没有下载完. C:\Us ...

  3. Codeforces 749D. Leaving Auction set+二分

    D. Leaving Auction time limit per test: 2 seconds memory limit per test:256 megabytes input:standard ...

  4. Codeforces 749C. Voting 模拟题

    C. Voting time limit per test: 1 second memory limit per test: 256 megabytes input: standard input o ...

  5. linux学习第四天 (Linux就该这么学)2018年11月16日

    今天主要讲了 管道符,重写向与环境变量 输入输出重写向 标准输出重写向 (标准,覆盖,错误) > 将标准输出重写向到一个文件中 >> 追加到文件 2>错误输出重定向 2> ...

  6. Eclipse生成部署描述符（web.xml）

    右键点击你的web项目名--->Java EE Tools-->Generate Deployment  Descriptor Stub 要想自动生成,只需在创建web项目时,把最后一页的 ...

  7. Python 之异常处理机制

    python在程序运行出现错误时时有相应的反应机制 ,我们可以针对不同的错误做出不同的响应 list1 = ['a','b','c'] print(list1[4]) #>>>Ind ...

  8. python range用法

    1. range(n) 相当于枚举 从0<=i<n的整数 增量为1 for i in range(4): print(i) 结果:0 1 2 3 2. range(5,10) 相当于枚举 ...

  9. Android Studio Tip of the Day

    1. Alt + Q 可以查看一个方法的简单参数列表. 2. 查看一个类,如果是eclipse的话,一般直接是F3, 现在的F3好痛苦.只能改为Ctrl + H,将就着用. 3. Ctrl + J 语 ...

  10. linux下设置mysql表名不区分大小写

    原文:http://blog.csdn.net/johnsonvily/article/details/6703902 1.Linux下mysql安装完后是默认:区分表名的大小写,不区分列名的大小写: ...