编程 Javascript

Bootstrap笔记—折叠实例代码

Posted in Javascript onMarch 13, 2017

1. 基础折叠

Bootstrap笔记—折叠实例代码

展示如下：

Bootstrap笔记—折叠实例代码

<body>
  <div class="container">
    <!-- 按钮 -->
    <button class="btn btn-default" data-toggle="collapse" data-target="#shows">按钮</button>
    <!-- 折叠内容 -->
    <div id="shows" class="collapse">
      <div class="well">
        我是折叠的内容
      </div>
    </div>
  </div>
</body>

2. 折叠一组

Bootstrap笔记—折叠实例代码

<body>
  <div class="container">
    <!-- 折叠组 -->
    <div class="panel-group">
      <div class="panel panel-default">
        <!-- 折叠panel头部 -->
        <div class="panel-heading">
          <h4 class="panel-title">
          <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="collapse" data-target="#chanel_demo">栏目管理</a>
          </h4>
        </div>
        <!-- 折叠panel内容 -->
        <div class="collapse panel-collapse" id="chanel_demo"><!-- 添加一个collapse类会默认隐藏折叠内容 -->
          <div class="panel-body">
            <ul>
              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >增加文章</a></li>
              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >增加标题</a></li>
            </ul>            
          </div>
        </div>       
      </div>
    </div>
  </div>
</body>

3.折叠多组

Bootstrap笔记—折叠实例代码

<body>
  <div class="container">
    <!-- 折叠组 -->
    <div class="panel-group">
      <!-- 第一个功能 -->
      <div class="panel panel-default">
        <!-- 折叠panel头部 -->
        <div class="panel-heading">
          <h4 class="panel-title">
          <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="collapse" data-target="#chanel_demo1">第一个折叠标题</a>
          </h4>
        </div>
        <!-- 折叠panel内容 -->
        <div class="collapse in panel-collapse" id="chanel_demo1"><!-- 添加一个collapse类会默认隐藏折叠内容 -->
          <div class="panel-body">
            <ul>
              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >折叠内容一</a></li>
              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >折叠内容二</a></li>
            </ul>            
          </div>
        </div>       
      </div>
      <!-- 第二个功能 -->
      <div class="panel panel-default">
        <!-- 折叠panel头部 -->
        <div class="panel-heading">
          <h4 class="panel-title">
          <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="collapse" data-target="#chanel_demo2">第二个折叠标题</a>
          </h4>
        </div>
        <!-- 折叠panel内容 -->
        <div class="collapse panel-collapse" id="chanel_demo2">
          <div class="panel-body">
            <ul>
              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >折叠内容一</a></li>
              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >折叠内容二</a></li>
            </ul>            
          </div>
        </div>       
      </div>     
    </div>
  </div>
</body>

4. 折叠多组只显示一组折叠内容

Bootstrap笔记—折叠实例代码

<body>
  <div class="container">
    <!-- 折叠组 -->
    <div class="panel-group" id="panelcontainer">
      <!-- 第一个功能 -->
      <div class="panel panel-default">
        <!-- 折叠panel头部 -->
        <div class="panel-heading">
          <h4 class="panel-title">
          <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="collapse" data-target="#chanel_demo1" data-parent="#panelcontainer">第一个折叠标题</a>
          </h4>
        </div>
        <!-- 折叠panel内容 -->
        <div class="collapse in panel-collapse" id="chanel_demo1"><!-- 添加一个collapse类会默认隐藏折叠内容 -->
          <div class="panel-body">
            <ul>
              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >折叠内容一</a></li>
              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >折叠内容二</a></li>
            </ul>            
          </div>
        </div>       
      </div>
      <!-- 第二个功能 -->
      <div class="panel panel-default">
        <!-- 折叠panel头部 -->
        <div class="panel-heading">
          <h4 class="panel-title">
          <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="collapse" data-target="#chanel_demo2" data-parent="#panelcontainer">第二个折叠标题</a>
          </h4>
        </div>
        <!-- 折叠panel内容 -->
        <div class="collapse panel-collapse" id="chanel_demo2">
          <div class="panel-body">
            <ul>
              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >折叠内容一</a></li>
              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >折叠内容二</a></li>
            </ul>            
          </div>
        </div>       
      </div>     
    </div>
  </div>
</body>

5. 折叠?下拉菜单

Bootstrap笔记—折叠实例代码

<body>
  <div class="container">
    <!-- 折叠组 -->
    <div class="panel-group">
      <!-- 第一个功能 -->
      <div class="panel panel-default">
        <!-- 折叠panel头部 -->
        <div class="panel-heading">
          <h4 class="panel-title">
          <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="collapse" data-target="#chanel_demo1">第一个折叠标题</a>
          </h4>
        </div>
        <!-- 折叠panel内容 -->
        <div class="collapse in panel-collapse" id="chanel_demo1">
          <ul class="list-group">
            <li class="list-group-item"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >折叠内容一</a></li>
            <li class="list-group-item"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >折叠内容二</a></li>
            <li class="list-group-item"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >折叠内容三</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>  
</body>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap笔记—折叠实例代码

- Author -

erdouzhang

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

网页里控制图片大小的相关代码

Jun 25 Javascript

Javascript 自适应高度的Tab选项卡

Apr 05 Javascript

css配合jquery美化 select

Nov 29 Javascript

js 判断控件获得焦点的示例代码

Mar 04 Javascript

基于jQuery实现表单提交验证

Nov 24 Javascript

JQuery标签页效果实例详解

Dec 24 Javascript

JavaScript中匿名函数的用法及优缺点详解

Jun 01 Javascript

AngularJS ng-style中使用filter

Sep 21 Javascript

动态Axios的配置步骤详解

Jan 12 Javascript

Angular8 实现table表格表头固定效果

Jan 03 Javascript

es6数组的flat()，flatMap()函数用法实例分析

Apr 18 Javascript

jQuery实现移动端图片上传预览组件的方法分析

May 01 jQuery

jquery插件ContextMenu设置右键菜单

Mar 13 #Javascript

jQuery实现表格奇偶行显示不同背景色就这么简单

Mar 13 #Javascript

轻松实现jQuery添加删除按钮Click事件

Mar 13 #Javascript

jQuery+CSS3实现点赞功能

Mar 13 #Javascript

百度地图JavascriptApi Marker平滑移动及车头指向行径方向

Mar 13 #Javascript

分享一个精简的vue.js 图片lazyload插件实例

Mar 13 #Javascript

常用的几个JQuery代码片段

Mar 13 #Javascript