以下代码来自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. 使用JAX-WS(JWS)发布WebService（二）

    将项目改为maven工程,并发布到Tomcat: WebService常用到的注解以及作用: 发布过程中遇到的问题总结: 一.将项目改为maven工程,并发布到Tomcat: 继续上一篇,将代码完善成 ...

  2. 用PowerDesign反向生成数据库Sql语句问题

            在用Pd15反向生成数据库时,生成的Sql语句在Sql Server Manager Studio里面报错,根本就执行不了.数据库用的是Sql Server 2008 R2.经过一番修 ...

  3. 关于DataTable.Select方法偶尔无法正确查到数据的处理方法

    项目中经常用DataTable在内存中存储并操作数据,在进行报表开发的时候,报表的各种过滤功能用这个内存表可以大现身手,但最近在使用过程中却遇到一个奇怪的现象,现将该问题及处理方法记录一下.这是在做护 ...

  4. 「日常训练」Alternative Thinking（Codeforces Round #334 Div.2 C）

    题意与分析 (CodeForces - 603A) 这题真的做的我头疼的不得了,各种构造样例去分析性质... 题意是这样的:给出01字符串.可以在这个字符串中选择一个起点和一个终点使得这个连续区间内所 ...

  5. jmeter的脚本增强之参数化

    jmeter作为一款开源的测试工具,功能广泛,深受测试同胞们的喜爱,这次来讲讲关于如何参数化及其方式.那为什么要进行一个参数化呢,如做压测时,要有大量的数据来模拟用户的真实场景,像登录页面操作,系统是 ...

  6. 第三模块：面向对象&网络编程基础 第1章 面向对象

    我的失败与梦想(一) 我的失败与梦想之为何创办路飞学城 01-编程范式 02-面向过程编程 03-面向对象编程介绍 04-定义类与实例化出对象 05-如何使用类 06-如何使用对象 07-属性查找与绑 ...

  7. Dos命令以及相关文件的访问

    1.转到相关目录 有时候想从当前目录转到D盘,用此目录cd d:是没有用的, 最好用cd /d d:是可以的 2.查看目录文件 dir 3.往服务器上传文件文件 通过文件浏览器上传文件,只适用于Win ...

  8. NodeJs学习笔记01-你好Node

    如果你对NodeJs略知一二,不禁会感叹,使用JS的语法和代码习惯就能开发一个网站的后台,实现复杂的数据交互,牛! 对于学习java和php就夹生的小码农来说,简直就是靡靡之音呐~~~ 今晚带着忐忑的 ...

  9. ionic ios样式偏移解决方案。

    在css属性内增加: .item-ios [item-end] { //解决ios系统上尾部图标出现重影而增加的格式. margin: 0px -15.3px 0px 0px; margin-bott ...

  10. Python版本切换和Pip安装

    Python版本切换 现在常用的linux系统中都会默认携带python运行环境,在ubuntu 16.04 和centos 7.3中携带有Python 2.7 和Python3.5两个版本, 默认使 ...