<!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. fedora25的免密码rsync服务配置

      目标:实现免密同步数据: 1.安装rsync包: 2.手工添加配置文件: cat  /etc/rsyncd.conf # See rsyncd.conf man page for more opt ...

  2. c sharp multithreading

    1.  静态方法 using System; using System.Threading; namespace PlusThread { class Program { static void Ma ...

  3. Netty 源码（二）NioEventLoop 之 Channel 注册

    Netty 源码(二)NioEventLoop 之 Channel 注册 Netty 系列目录(https://www.cnblogs.com/binarylei/p/10117436.html) 一 ...

  4. Python之路(第七篇)Python作用域、匿名函数、函数式编程、map函数、filter函数、reduce函数

    一.作用域 return 可以返回任意值例子 def test1(): print("test1") def test(): print("test") ret ...

  5. 数据结构和Java集合

    list接口,可重复,有序的.list有arrayList,因为是数组结构,适合用在数据的查询,linkedList,因为是链表结构,适合用在增删操作.数组如果增删的话,需要后面的元素都往前或者往后移 ...

  6. 使用mysql proxy对数据库进行读写分离

    服务器安排如下: 192.168.100.128 主 192.168.100.129 从 192.168.100.130 mysql-proxy 1.在100.130中下载安装mysql-proxy ...

  7. Flex 确定弹出窗口的绝对位置x , y

    var selectbox:Selectbox; selectbox = new SelectBox(); var pt:Point = new Point(0,0); pt = this.paren ...

  8. 记录一次JVM调优【GC日志的分析】

    首先查看服务器版本默认信息: 修改tomcat/bin/catalina.sh,在最顶端加入JAVA_OPTS="$JAVA_OPTS -XX:+PrintGCDetails -Xloggc ...

  9. Ubuntu 中用 delphi 开发 apache

    经过近15年的沉默.delphi 10.2 终于重新开始支持linux 开发了. 今天说一下在ubuntu中开发apache的方法. 首先安装ubuntu 的delphi 开发环境,请参考以前的文章 ...

  10. MyBatis 实现新增

    MyBatis实现新增 1.概念学习:(角度不同) 1.1 功能:从应用程序角度出发,软件具有哪些功能 1.2 业务:完成功能时的逻辑,对应Service中一个方法 1.3 事务:从数据库角度出发,完 ...