编程 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 相关文章推荐

利用js对象弹出一个层

Mar 26 Javascript

获取URL地址中的文件名和参数的javascript代码

Sep 02 Javascript

javascript五图轮播切换实用版

Aug 17 Javascript

屏蔽相应键盘按钮操作

Mar 10 Javascript

Jquery 实现弹出层插件

Jan 28 Javascript

JS创建事件的三种方法(实例代码)

May 12 Javascript

JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)

Jul 07 Javascript

jquery easyui如何实现格式化列

Jul 30 jQuery

基于iScroll实现内容滚动效果

Mar 21 Javascript

JS/HTML5游戏常用算法之碰撞检测像素检测算法实例详解

Dec 12 Javascript

Vue实现简单计算器案例

Feb 25 Javascript

vue使用require.context实现动态注册路由

Dec 25 Vue.js

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