<!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. 安卓项目R,java文件不能自动更新，clean之后，R.java消失 （转自 Cynosure鱼）

      今天整了个安卓项目,新增加了个跳转页面,添加完背景图,发现有个R.id找不到了,于是clean了一下,这下出问题了,发现各处的R.id都找不到,报错.结果一看是R.java没了然后各种百度结果:有 ...

  2. C++动态链接库

    1.动态链接库概述: 动态链接库通常都不能直接运行,也不能接受消息:只有在其他模块调用动态链接库中的函数时,它才发挥作用. Windows API中所有的函数都包含在动态链接库中. 动态链接库分静态库 ...

  3. tar 解压某个指定的文件或者文件夹

    1. 先查看压缩文档中有那些文件,如果都不清楚文件内容,然后就直接解压,这个是不可能的 使用#tar -tf 压缩包名称,可以查看压缩包内容 2.解压某个文件 tar -zxvf zabbix.tar ...

  4. c#while循环注意continue的地方

    在使用while 时发现一个很大的问题,continue最好慎用! private void do() { int i = 0; while (true) { //continue;//绝对的死循环 ...

  5. linux(centOS7,mini)，python环境的搭建

    今天想试一试python在linux下的工作,在vmware中安装了centOS7版本的linux,先前装过一个带GUI的,但是感觉在虚拟机理跑的太慢,干脆直接装一个最精简的mini版,试一下ifco ...

  6. Docker 介绍和使用

    Docker 技术可以实现容器装载软件和依赖库,类似于封闭的Linux系统,默认相当于有root权限,可以快速移植和部署到其他机器上. Docker 容器技术可以理解为:仓库(储物间),镜像(类似于面 ...

  7. linux_磁盘挂载

    mount -o loop 磁盘的位置 想要挂载的位置 磁盘卸载 umont 挂载的磁盘的详细位置 注意:磁盘卸载时你当前所在的路径不要在磁盘挂载的路径,应该其他与磁盘挂载路径不相干的路径下即可

  8. 01.Java 开发简单的计算器

    难度为一般,适合具有 Java 基础和 Swing 组件编程知识的用户学习一. 实验介绍1.1 实验内容本次实验利用Java开发一个可以进行简单的四则运算的图形化计算器,会使用到 Java Swing ...

  9. WPF中的路由事件(转)

    出处:https://www.cnblogs.com/JerryWang1991/archive/2013/03/29/2981103.html 最近因为工作需要学习WPF方面的知识,因为以前只关注的 ...

  10. eclipse 创建servlet 出现继承 HttpServlet 报红线

    eclipse创建servlet出现红线: 解决方案1,鼠标右键项目 -> 鼠标右击项目——>Build Path——> 点击comfigure Build Path进入-----& ...