<!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. JAVA 8.20 游戏：四子连（Java&C++）

    (游戏:四子连 )四子连是一个两个人玩的棋盘游戏,在游戏中,玩家轮流将有颜色的棋子放在一个六行七列的垂直悬挂的网格中:         这个游戏的目的是在对手实现一行.一列或者一条对角线上有四个相同颜 ...

  2. 2018 How to register and install LAUNCH ICARSCAN software ?

    2018 New Version ICARSCAN is available now! Here’s the instruction on how to install ICARSCAN softwa ...

  3. oralce的lag和lead函数

    https://www.cnblogs.com/always-online/p/5010185.html

  4. autohotkey快捷键

    ;已经基本修复了输入带shift的时候跟输入法中英文切换之间的冲突 SetStoreCapslockMode, off SetKeyDelay, ^CapsLock:: #UseHook ;用这个和下 ...

  5. js 光标位置处理

    /** * 获取选中文字 * 返回selection,toString可拿到结果,selection含有起始光标位置信息等 **/ function getSelectText() { var tex ...

  6. Mercurial和Git的主要区别（zz）

    Mercurial和Git的主要区别 17 August 2008 1.Mercurial用Python开发,Git用C开发,相对来说,Git比较快,但是Mercurial的性能也不差 2.Mercu ...

  7. On the internet, nobody known you are a dog !

  8. 2016年3月31日_应化所群体Review

    Review目的: Phonegap的ble插件可以接收到设备发送的信息,但接收并在控制台显示的数据夏一鸣不知道是正确的数据,还是由于编码解码问题导致的乱码问题.此次Review要解决的问题即判断接收 ...

  9. Python之生成器及内置函数篇4

    一.可迭代对象 #1.什么是迭代?:迭代是一个重复的过程,并且每次重复都是基于上一次的结果而来 #2.可迭代的对象:在python中,但凡内置有__iter__方法的对象,都是可迭代的对象 #3.迭代 ...

  10. 前端之javascript的数据类型1和BOM对象

    一 js对象 BOM对象:browser object model浏览器模型对象 window对象:定时器 DOM对象:文档对象模型 js对象:字符串对象,数组对象,日期对象,math对象 new关键 ...