以下代码来自bootstrap中文网

  1.  <!DOCTYPE html>
  2.  <html lang="zh-CN">
  3.    <head>
  4.      <meta charset="utf-8">
  5.      <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.      <meta name="viewport" content="width=device-width, initial-scale=1">
  7.      <title>Bootstrap 模板</title>
  8.      <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
  9.      <!--[if lt IE 9]>
  10.        <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  11.        <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  12.      <![endif]-->
  13.      <style>
  14.  
  15.      </style>
  16.    </head>
  17.      <body>
  18.  
  19.        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  20.  
  21.          <div class="panel panel-default">
  22.            <!-- 折叠分组1的头 -->
  23.            <div class="panel-heading" role="tab" id="headingOne">
  24.              <!-- 整个h4里面是标题栏 -->
  25.              <h4 class="panel-title">
  26.                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
  27.                  折叠分组1的标题
  28.                </a>
  29.              </h4>
  30.  
  31.            </div>
  32.  
  33.              <!-- 折叠分组的内容                                in 决定是否展开 下面的内容      -->
  34.            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
  35.  
  36.              <div class="panel-body">
  37.                内容(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.)
  38.              </div>
  39.            </div>
  40.          </div>
  41.  
  42.          <div class="panel panel-default">
  43.            <div class="panel-heading" role="tab" id="headingTwo">
  44.              <h4 class="panel-title">
  45.                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
  46.                  折叠分组2的标题
  47.                </a>
  48.              </h4>
  49.            </div>
  50.            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
  51.              <div class="panel-body">
  52.                内容(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.)
  53.              </div>
  54.            </div>
  55.          </div>
  56.  
  57.          <div class="panel panel-default">
  58.            <div class="panel-heading" role="tab" id="headingThree">
  59.              <h4 class="panel-title">
  60.                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
  61.                  折叠分组3的标题
  62.                </a>
  63.              </h4>
  64.            </div>
  65.            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
  66.              <div class="panel-body">
  67.                内容(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.)
  68.              </div>
  69.            </div>
  70.          </div>
  71.  
  72.        </div>
  73.  
  74.        <script src="lib/jquery/jquery.js"></script>
  75.        <script src="lib/bootstrap/js/bootstrap.js"></script>
  76.      </body>
  77.  </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. [Cracking the Coding Interview] 4.1 Route Between Nodes 节点间的路径

    Given a directed graph, design an algorithm to find out whether there is a route between nodes. 这道题让 ...

  2. 使用JAX-WS(JWS)发布WebService（一）

    JAX-WS概述: 通过Main发布一个简单WebService: JAX-WS(Java API for XML Web Services)规范是一组XML web services的JAVA AP ...

  3. 【转】Odoo装饰器： one装饰

    one装饰器的作用是对每一条记录都执行对应的方法,相当于traditional-style中的function,无返回值! 应用举例: 定义的columns now = fields.Datetime ...

  4. 优步UBER司机全国各地奖励政策汇总 (3月28日-4月3日)

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

  5. Calendar 实现日历实例

    import java.text.ParseException; import java.util.Calendar; import java.util.GregorianCalendar; impo ...

  6. 微信小程序—day04

    元素水平+垂直居中 昨天的用户页的用户头像,是根据已知的像素大小,设置固定的值,达到居中的效果. 今日切换机型进行适配,发现对不同尺寸大小的屏幕不匹配.所以对wxss进行修改,真正达到水平+垂直居中. ...

  7. Linux命令应用大词典-第45章 服务器配置

    45.1 ssh-agent:存储用于公钥验证的私钥 45.2 ssh-add:添加RSA或DSA身份的认证代理 45.3 ssh-keyscan:收集主机公钥 45.4 sshd:运行sshd守护进 ...

  8. 【RandomString】- 随机字符串

    RandomString  随机字符串的用法

  9. parity 注记词

    spousal tint untold around rosy daintily unrated sheep choice showpiece chirping gala

  10. selenium中的三种等待方式（显示等待WebDriverWait()、隐式等待implicitly()、强制等待sleep()）---基于python

    我们在实际使用selenium或者appium时,等待下个等待定位的元素出现,特别是web端加载的过程,都需要用到等待,而等待方式的设置是保证脚本稳定有效运行的一个非常重要的手段,在selenium中 ...