bootstrap手风琴折叠
<!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手风琴折叠的更多相关文章
- Bootstrap手风琴效果
前面的话 Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果.当单击一个触发元素时,在另外一个可折叠区域进行显示或隐藏,再次单击时可以反转显示状态.经典的场景是多个折 ...
- jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解
在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...
- [转] CSS3垂直手风琴折叠菜单
[From] http://www.html5tricks.com/css3-ver-accordion-menu.html 之前我们已经分享过很多关于手风琴菜单了,有水平方向的,也有垂直方向的.今天 ...
- 全面解析Bootstrap手风琴效果
触发手风琴可以通过自定义的data-toggle 属性来触发.其中data-toggle值设置为 collapse,data-target="#折叠区标识符". 第一步:设计一个面 ...
- javascript实现的手风琴折叠菜单效果
演示地址:http://codepen.io/anon/pen/pJERMq 实现效果: HTML代码: <!DOCTYPE html> <html lang="en&qu ...
- Bootstrap之折叠（Collapse）插件
学习资料:Bootstrap折叠(Collapse)插件 大家可能常见的都是类似: 这种的效果,小颖今天要给大家分享一个不一样的效果嘻嘻.铛铛铛铛........................... ...
- ⒂bootstrap组件 折叠 基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- bootstrap的折叠组件1
官网的例子: http://v3.bootcss.com/javascript/#collapse <div class="panel-group" id="acc ...
- bootstrap 手风琴效果
<!DOCTYPE HTML> <html><head><meta charset="utf-8"><title>按钮插 ...
随机推荐
- 789A Anastasia and pebbles
A. Anastasia and pebbles time limit per test 1 second memory limit per test 256 megabytes input stan ...
- 关于redis和memcached的一些想法
看了redis和memcached,想到自己前几年以前会把内存分配及调用和程序写在一起.确实是不合理的.这样的话,主进程就会越来越大,而且模块也不是完全独立.不能做到松耦合. 实质就是把内存的读写I/ ...
- SQL语句的三大类
数据定义语言(DDL Data Defination Language):用于创建和定义数据库对象,并且将对这些对象的定义保存到数据库字典中,通过DDL语句可以创建数据库对象.修改数据库对象.删除数据 ...
- The prefix "mvc" for element "mvc:annotation-driven" is not bound 异常
https://www.cnblogs.com/maodot/p/7531042.html The prefix "mvc" for element "mvc:annot ...
- socket.io的connect连接时不断的进行自动连接，并产生错误net::ERR_EMPTY_RESPONSE
socket = io.connect('http://192.168.1.200:9043?uuid=333'); 执行上面的语句时,产生下面的错误: 后来经过排查,是由于项目的jdk版本过低引起的 ...
- jvm 启动参数设置（转载）
JVM启动参数 http://onlyor.iteye.com/blog/1722413 博客分类: java java java启动参数共分为三类其一是标准参数(-),所有的JVM实现都必须实现这些 ...
- docker使用自定义镜像zabbix服务
一.关闭firewall,永久关闭,使用iptables防火墙 systemctl stop firewalld.service #停止firewall systemctl disable firew ...
- idea环境下js、css中文乱码
idea2018.2+tomcat8+java8+win10 异常:本地js和css通过tomcat发布时,在页面打印出的中文是乱码.而从数据库读取的中文数据和html的中文显示正常. 解决方法: 步 ...
- TCP/IP协议（6）：传输层之UDP
一. UDP用户数据报协议,它是一个无连接的,面向数据报的协议,它不提供可靠性但传输速度比TCP要快. UDP数据报中的“UDP长度”为两个字节,所以我们要发送的UDP数据最多支持65507大约68K ...
- ubuntu卸载软件命令,apt-get remove
第一步,apt-get remove xxx :就是卸载xxx 或者 apt-get remove --purge xxx :卸载xxx并清除配置. 这两条命令对于依赖则是不管的.因为别的软件可 ...