以下代码来自bootstrap中文网

 <!DOCTYPE html>

 <html lang="zh-CN">

   <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <title>Bootstrap 模板</title>

     <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">

     <!--[if lt IE 9]>

       <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

       <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

     <![endif]-->

     <style>

     </style>

   </head>

     <body>

       <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

         <div class="panel panel-default">

           <!-- 折叠分组1的头 -->

           <div class="panel-heading" role="tab" id="headingOne">

             <!-- 整个h4里面是标题栏 -->

             <h4 class="panel-title">

               <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

                 折叠分组1的标题

               </a>

             </h4>

           </div>

             <!-- 折叠分组的内容                                in 决定是否展开 下面的内容      -->

           <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

             <div class="panel-body">

               内容(Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.)

             </div>

           </div>

         </div>

         <div class="panel panel-default">

           <div class="panel-heading" role="tab" id="headingTwo">

             <h4 class="panel-title">

               <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">

                 折叠分组2的标题

               </a>

             </h4>

           </div>

           <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">

             <div class="panel-body">

               内容(Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.)

             </div>

           </div>

         </div>

         <div class="panel panel-default">

           <div class="panel-heading" role="tab" id="headingThree">

             <h4 class="panel-title">

               <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">

                 折叠分组3的标题

               </a>

             </h4>

           </div>

           <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">

             <div class="panel-body">

               内容(Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.)

             </div>

           </div>

         </div>

       </div>

       <script src="lib/jquery/jquery.js"></script>

       <script src="lib/bootstrap/js/bootstrap.js"></script>

     </body>

 </html>

Bootstrap 折叠(collapse) 初见的更多相关文章

  1. Bootstrap 折叠(collapse)插件面板

    折叠插件(collapse)可以很容易地让页面区域折叠起来, 无论您是用它来创建折叠导航还是内容面板,它都允许很多内容选项. 您可以使用折叠插件 1.创建可折叠的分组或折叠的面板 <!DOCTY ...

  2. bootstrap 折叠collapse失效

    手动点击折叠,然后调用折叠全部以后,在手动点击折叠项,折叠失效. 方法,折叠项是通过添加或删除".in"来实现,实现如下 $(".collapse.in").c ...

  3. Bootstrap 折叠（Collapse）插件

    折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. 如果您想要单独引用该插件的功能,那么您需要引用 collapse.js.同时, ...

  4. bootstrap折叠调用collapse()后data-parent不生效问题

    今天做的项目,用到了bootstrap的折叠功能,这个功能需要只展开一个折叠框,点击一个就会自动隐藏另一个,初始按照API做了一下,发现一切运行正常,但是测试的同事提了一个bug,说切换到其他模块后再 ...

  5. 基于BootStrap的Collapse折叠(包含回显展开折叠的对应状态)

    情况描述:为了改善页面上的input框太多,采用∧∨折叠展开,这个小东西来控制,第一次做,记录一下ヾ(◍°∇°◍)ﾉﾞ下边是Code 代码: //html代码 <div id="col ...

  6. 折叠Collapse插件

    实例 折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. .collapse 隐藏内容. .collapse.in 显示内容. . ...

  7. bootstrap 折叠菜单

    首先从 左侧的折叠菜单 开始.看图. 2. CSS 代码 以下是自定义的css代码,由于系统是内部使用,所以优先考虑chrome,firefox 不考虑IE了. #main-nav { margin- ...

  8. Bootstrap 的 Collapse

    一.简介 Collapse 插件为 HTML 标签提供折叠.展开行为,依赖 transition.js(bootstrap.js 文件中已包含). 二.实现机制 实现 Collapse 效果需要: 一 ...

  9. Bootstrap插件-collapse

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. （数据科学学习手札45）Scala基础知识

    一.简介 由于Spark主要是由Scala编写的,虽然Python和R也各自有对Spark的支撑包,但支持程度远不及Scala,所以要想更好的学习Spark,就必须熟练掌握Scala编程语言,Scal ...

  2. C#调用c++类的导出函数

    C# 需要调用C++东西,但是有不想做成COM,就只好先导出类中的函数处理. 不能直接调用,需单独导出函数 参考:http://blog.csdn.net/cartzhang/article/deta ...

  3. CF480Div2掉分记

    rating 1900+参加只有Div2的比赛也记rating了.还以为yyc报名没打会惨惨,原来不交题好像就不算参加.. 本来太晚了不想打,不过有Sinogi大佬带我还是打一打吧,apio之前练练手 ...

  4. 成都Uber优步司机奖励政策（3月21日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  5. React-精华版

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...

  6. android学习十三 首选项

    1,首选项可用用来持久保存用户设置,游戏最高分等 2,首选项有,列表首选项,复选框首选项,对话框首选项.. 3,通过xml文件和代码创建首选项      addPreferencesFromResou ...

  7. MySQL日期函数、时间函数总结（MySQL 5.X）

    一.获得当前日期时间函数 1.1 获得当前日期+时间(date + time)函数:now() select now(); # :: 除了 now() 函数能获得当前的日期时间外,MySQL 中还有下 ...

  8. JMeter自学笔记2-图形界面介绍

    一.写在前面的话: 上篇我们已经学会了如何安装JMeter和打开JMeter,那么这篇我们将对JMeter的图形界面做一个简单的介绍.大家只要简单的了解即可,无需死记硬背,在今后的学习和使用中慢慢熟悉 ...

  9. 第一章 了解TCP/IP协议族

    第一章 了解TCP/IP协议族 1.1 TCP/IP协议族体系结构以及主要协议 IP和TCP协议对编写程序具有最直接的影响,后面的章节会详细的讲到. TCP/IP的体系结构有应用层,传输层,网络层,数 ...

  10. Python类对象

    python类对象 python类对象支持两种操作:属性引用和实例化. 属性引用 使用 Python 中所有属性引用所使用的标准语法: obj.name. 有效的属性名称是类对象被创建时存在于类命名空 ...