<!DOCTYPE HTML>

<html>
<head>
<meta charset="utf-8">
<title>按钮插件--按钮状态切换</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
body{padding:10px;margin:10px}
</style>
</head>
<body>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#aa1" data-toggle="collapse" data-parent="#accordion">标题一</a></h4>
</div>
<div class="panel-collapse collapse in" id="aa1">
<div class="panel-body">标题一对应的内容</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#aa2" data-toggle="collapse" data-parent="#accordion" >标题二</a></h4>
</div>
<div class="panel-collapse collapse" id="aa2">
<div class="panel-body">标题二对应的内容</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#aa3" data-toggle="collapse" data-parent="#accordion">标题三</a></h4>
</div>
<div class="panel-collapse collapse" id="aa3">
<div class="panel-body">标题三对应的内容</div>
</div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</body>
</html>

bootstrap 手风琴效果的更多相关文章

  1. Bootstrap手风琴效果

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

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

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

  3. 基于css3实现手风琴效果

    终于在凌晨一点钟逼迫自己写博客.一直想记录自己的前端工程师之路,但毕竟拖延症晚期.因为第一篇随笔,所以多写一点废话吧.刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作.第一是觉得osgi这 ...

  4. 使用 jQuery & CSS3 实现优雅的手风琴效果

    手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...

  5. 基于 jQuery 实现垂直滑动的手风琴效果

    今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...

  6. JS+JQ手风琴效果

    最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; p ...

  7. 纯CSS手风琴效果

    CSS手风琴效果 主体代码如下:                                                                                     ...

  8. jquery 图片手风琴效果

    这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...

  9. 一步步教你css3手风琴效果的实现

    什么是手风琴效果? 首先我们先来看一段动画,如下图所示: 在上面动画中,我们不难发现,一排照片正常排列,当我鼠标移上(:hover)时,照片会变大显示并且把其它照片挤小.那么在鼠标来回移动的过程中,画 ...

随机推荐

  1. php如何支持实现多线程并发

    <?php if(function_exists('date_default_timezone_set')) { date_default_timezone_set('PRC'); } func ...

  2. PyChram使用技巧总结

    1.1 下载 官网1.2 汉化 1.3 添加或者修改文件模板 File->settings->Editor->File and Code Templates->Python S ...

  3. HDU 4453：Looploop（Splay各种操作）

    http://acm.hdu.edu.cn/showproblem.php?pid=4453 题意:很多种操作:1.add x,将从光标起的 k2 个数全部加上 x:2.reverse,将从光标起的 ...

  4. C#:数据交互

    JS与Web交互:http://www.docin.com/p-76710976.html 一.WinForm的WebBrowser控件与JS交互数据: 1.C#类内的代码执行JS脚本函数: 给C#类 ...

  5. Oracle性能优化--AUTOTRACE 操作

    AUTOTRACE是一个SQL*Plus工具,用于跟踪SQL的执行计划,收集执行时所耗用资源的统计信息,是SQL优化工具之一,下面给出启用 AUTOTRACE 功能步骤. 一 .启用AUTOTRACE ...

  6. tomcat 启动时参数设置说明

    使用Intellij idea 其发动tomcat时会配置启动vm options :-Xms128m -Xmx768m -XX:PermSize=64M -XX:MaxPermSize=512m. ...

  7. 模拟http响应头

    1.打开需要模拟的页面请求头 2.编码要发送的数据 3.通过fsockopen函数发送请求头 代码如下 //方法二 $URL="http://device.test.com/admin/ma ...

  8. R cannot be resolved to a variable问题

    在调试android的时候,layout解析都正确,但是build project的时候提示" R cannot be resolved to a variable " 经过查找, ...

  9. poj1987 Distance Statistics

    普通dfs访问每个点对的复杂度是O(n^2)的,显然会超时. 考虑访问到当前子树的根节点时,统计所有经过根的点(u, v)满足: dist(u) + dist(v) <= maxd,并且 bel ...

  10. 转载-python学习笔记之常用模块用法分析

    内置模块(不用import就可以直接使用)   常用内置函数   help(obj) 在线帮助, obj可是任何类型 callable(obj) 查看一个obj是不是可以像函数一样调用 repr(ob ...