<!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 /** * 设计模式之单例模式 * $_instance必须声明为静态的私有变量 * 构造函数和析构函数必须声明为私有,防止外部程序new * 类从而失去单例模式的意义 * getI ...

  2. array_pop（）将数组最后一个单元弹出（出栈）

    // 使用系统函数中的引用传参    $array = [1,2,3,4,5,6,7,8,9];//数组    // 调用一个函数    array_pop($array);    //输出原数组   ...

  3. Viewpaer+fragment

    1.碎片的动态切换: 1-1:页面填写 <FrameLayout android:id="@+id/fl_layout" android:layout_weight=&quo ...

  4. 【转】Windows下搭建cvs服务器

    转载地址:http://hi.baidu.com/iloverobot/item/fad1eb6d66c45e166995e66d 下载cvs server:CVSNT 网址为:http://www. ...

  5. cookie存储记录

    ////// 历史记录 $(function () { // 标题 var art_title = $("#Lbl_Hotel_Name").text(); // 得到当前路径 v ...

  6. C++陷阱之慎用string类

    我们知道,string类为我们提供了很多的便利,我们用string类能方便的做字符串的各种操作,避免了我们直接操作char指针而产生的一些繁琐的操作,和内存泄露的可能性,可是string类也是有陷阱的 ...

  7. 如何在linux下查看gpu信息

    ~$ lspci | grep -i vga01:00.0 VGA compatible controller: NVIDIA Corporation GF119 [GeForce GT 610] ( ...

  8. reactjs入门到实战（九）----ajax的应用

    利用外部的jquery: <script type="text/babel"> } }, componentDidMount:function(){ ]['value' ...

  9. 测可用！ecshop立即购买和加入购物车按钮共存的方法

    网上方法很多,但都不能用的,有的是老版本的,有的方法本身就不完整. 应大多数客户要求,我们重新整理下教程,希望对大家有用. 亲测可用!ecshop立即购买和加入购物车按钮共存的方法 第一步:修改ecs ...

  10. react学习

    http://www.cnblogs.com/yunfeifei/ http://wiki.jikexueyuan.com/project/react-native/native-ui-compone ...