1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <!--移动设备优先-->
  8.     <title>bootstrap</title>
  9.     <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  10.     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  11.  
  12.     <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
  13.     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  14.     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
  15.     <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  16.     <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  17.     <script language="JavaScript">
  18.  
  19.     </script>
  20. </head>
  21. <body>
  22. <div class="container">
  23.     <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#shows">折叠</button>
  24.     <div id="shows" class="collapse in">
  25.         <div class="well">
  26.             显示的内容
  27.         </div>
  28.     </div>
  29. </div>
  30. </body>
  31. </html>

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <!--移动设备优先-->
  8.     <title>bootstrap</title>
  9.     <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  10.     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  11.  
  12.     <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
  13.     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  14.     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
  15.     <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  16.     <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  17.     <script language="JavaScript">
  18.  
  19.     </script>
  20. </head>
  21. <body>
  22. <div class="container">
  23.  
  24.     <div class="panel-group">
  25.         <!--一个功能 -->
  26.         <div class="panel panel-default">
  27.             <div class="panel-heading">
  28.                 <h4 class="panel-title">
  29.                     <a href="#" data-toggle="collapse" data-target="#channel_demo1">栏目管理1</a>
  30.                 </h4>
  31.             </div>
  32.  
  33.             <div class=" collapse panel-collapse" id="channel_demo1">
  34.                 <div class="panel-body">
  35.                     <ul>
  36.                         <li><a href="#">增加栏目</a></li>
  37.                         <li><a href="#">增加栏目</a></li>
  38.                         <li><a href="#">增加栏目</a></li>
  39.                     </ul>
  40.                 </div>
  41.             </div>
  42.         </div>
  43.  
  44.         <!--一个功能 -->
  45.         <div class="panel panel-default">
  46.             <div class="panel-heading">
  47.                 <h4 class="panel-title">
  48.                     <a href="#" data-toggle="collapse" data-target="#channel_demo2">栏目管理2</a>
  49.                 </h4>
  50.             </div>
  51.  
  52.             <div class=" collapse panel-collapse" id="channel_demo2">
  53.                 <div class="panel-body">
  54.                     <ul>
  55.                         <li><a href="#">增加栏目</a></li>
  56.                         <li><a href="#">增加栏目</a></li>
  57.                         <li><a href="#">增加栏目</a></li>
  58.                     </ul>
  59.                 </div>
  60.             </div>
  61.         </div>
  62.  
  63.         <!--一个功能 -->
  64.         <div class="panel panel-default">
  65.             <div class="panel-heading">
  66.                 <h4 class="panel-title">
  67.                     <a href="#" data-toggle="collapse" data-target="#channel_demo3">栏目管理3</a>
  68.                 </h4>
  69.             </div>
  70.  
  71.             <div class="collapse panel-collapse in" id="channel_demo3">
  72.                 <div class="panel-body">
  73.                     <ul>
  74.                         <li><a href="#">增加栏目</a></li>
  75.                         <li><a href="#">增加栏目</a></li>
  76.                         <li><a href="#">增加栏目</a></li>
  77.                     </ul>
  78.                 </div>
  79.             </div>
  80.         </div>
  81.  
  82.     </div>
  83.  
  84. </div>
  85. </body>
  86. </html>

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <!--移动设备优先-->
  8.     <title>bootstrap</title>
  9.     <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  10.     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  11.  
  12.     <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
  13.     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  14.     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
  15.     <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  16.     <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  17.     <script language="JavaScript">
  18.         $(function(){
  19.  
  20.             $('#channel_demo2').on('show.bs.collapse', function () {
  21.                 $("#tashow").html("栏目2展开了。。。");
  22.             });
  23.  
  24.         });
  25.     </script>
  26. </head>
  27. <body>
  28. <div class="container">
  29.  
  30.     <div class="panel-group" id="panelcontainer">
  31.         <!--一个功能 -->
  32.         <div class="panel panel-default">
  33.             <div class="panel-heading">
  34.                 <h4 class="panel-title">
  35.                     <a href="#" data-toggle="collapse" data-target="#channel_demo1" data-parent="#panelcontainer">栏目管理1</a>
  36.                 </h4>
  37.             </div>
  38.  
  39.             <div class=" collapse panel-collapse" id="channel_demo1">
  40.                 <div class="panel-body">
  41.                     <ul>
  42.                         <li><a href="#">增加栏目</a></li>
  43.                         <li><a href="#">增加栏目</a></li>
  44.                         <li><a href="#">增加栏目</a></li>
  45.                     </ul>
  46.                 </div>
  47.             </div>
  48.         </div>
  49.  
  50.         <!--一个功能 -->
  51.         <div class="panel panel-default">
  52.             <div class="panel-heading">
  53.                 <h4 class="panel-title">
  54.                     <a href="#" data-toggle="collapse" data-target="#channel_demo2" id="chanel2">栏目管理2</a>
  55.                 </h4>
  56.             </div>
  57.  
  58.             <div class=" collapse panel-collapse" id="channel_demo2">
  59.                 <div class="panel-body">
  60.                     <ul>
  61.                         <li><a href="#">增加栏目</a></li>
  62.                         <li><a href="#">增加栏目</a></li>
  63.                         <li><a href="#">增加栏目</a></li>
  64.                     </ul>
  65.                 </div>
  66.             </div>
  67.         </div>
  68.  
  69.         <!--一个功能 -->
  70.         <div class="panel panel-default">
  71.             <div class="panel-heading">
  72.                 <h4 class="panel-title">
  73.                     <a href="#" data-toggle="collapse" data-target="#channel_demo3">栏目管理3</a>
  74.                 </h4>
  75.             </div>
  76.  
  77.             <div class="collapse panel-collapse in" id="channel_demo3">
  78.                 <div class="panel-body">
  79.                     <ul>
  80.                         <li><a href="#">增加栏目</a></li>
  81.                         <li><a href="#">增加栏目</a></li>
  82.                         <li><a href="#">增加栏目</a></li>
  83.                     </ul>
  84.                 </div>
  85.             </div>
  86.         </div>
  87.  
  88.     </div>
  89.  
  90.     <div id="tashow">栏目2信息</div>
  91.  
  92. </div>
  93. </body>
  94. </html>

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <!--移动设备优先-->
  8.     <title>bootstrap</title>
  9.     <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  10.     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  11.  
  12.     <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
  13.     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  14.     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
  15.     <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  16.     <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  17.     <script language="JavaScript">
  18.  
  19.     </script>
  20. </head>
  21. <body>
  22. <div class="container">
  23.  
  24.     <div class="panel-group">
  25.         <!--一个功能 -->
  26.         <div class="panel panel-default">
  27.             <div class="panel-heading">
  28.                 <h4 class="panel-title">
  29.                     <a href="#" data-toggle="collapse" data-target="#channel_demo1">栏目管理1</a>
  30.                 </h4>
  31.             </div>
  32.  
  33.             <div class=" collapse panel-collapse" id="channel_demo1">
  34.                 <ul class="list-group">
  35.                     <li class="list-group-item"><span class="glyphicon glyphicon-envelope"></span>&nbsp;<a href="#">增加栏目</a></li>
  36.                     <li  class="list-group-item"><a href="#">增加栏目</a></li>
  37.                     <li  class="list-group-item"><a href="#">增加栏目</a></li>
  38.                 </ul>
  39.                 <div class="panel-footer">页脚</div>
  40.             </div>
  41.         </div>
  42.  
  43.         <!--一个功能 -->
  44.         <div class="panel panel-default">
  45.             <div class="panel-heading">
  46.                 <h4 class="panel-title">
  47.                     <a href="#" data-toggle="collapse" data-target="#channel_demo1">栏目管理1</a>
  48.                 </h4>
  49.             </div>
  50.  
  51.             <div class=" collapse panel-collapse" id="channel_demo2">
  52.  
  53.                 <ul class="list-group">
  54.                     <li class="list-group-item"><span class="glyphicon glyphicon-envelope"></span>&nbsp;<a href="#">增加栏目</a></li>
  55.                     <li  class="list-group-item"><a href="#">增加栏目</a></li>
  56.                     <li  class="list-group-item"><a href="#">增加栏目</a></li>
  57.                 </ul>
  58.  
  59.             </div>
  60.  
  61.         </div>
  62.  
  63.     </div>
  64.  
  65. </div>
  66. </body>
  67. </html>

⒂bootstrap组件 折叠 基础案例的更多相关文章

  1. ⒀bootstrap组件 选项卡 基础案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...

  2. 【7】了解Bootstrap栅格系统基础案例（2）

    ps.这一次要说的是“Responsive column resets”,但是不知道为什么中文官网没有给出翻译,但是在看到案例的时候,感觉这就像一个bug,我自己姑且叫这个是一个高度bug吧,方便自己 ...

  3. 【10】了解Bootstrap栅格系统基础案例（5）

    这次我们来说下列排序: 通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序. <!DOCTYPE html> <h ...

  4. 【9】了解Bootstrap栅格系统基础案例（4）

    这次我们来说下嵌套列: 为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内.被嵌套的行(row)所包含 ...

  5. 【8】了解Bootstrap栅格系统基础案例（3）

    这次我们来说下列偏移: 列偏移就是使用 .col-md-offset-* 类可以将列向右侧偏移.这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin).例如,.col-md-off ...

  6. 【6】了解Bootstrap栅格系统基础案例（1）

    从上一张我们了解了栅格选项,那么我们就来了实战了解下吧(其实还是中文官网的案例) ps.我这里是电脑上用谷歌浏览器来观察的,毕竟电脑的分辨率高(1440*900px),谷歌浏览器最大化后,值比大屏幕设 ...

  7. ⑤bootstrap表格使用基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. ④bootstrap列表使用基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. ③bootstrap文本使用基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Java客户端调用.NET的WebService

    项目需要去调用.NET的WebSrevice,本身是Java,研究了半天,终于有些头绪,记下来. 1,新建.NET WebService.只在原方法上加上一个string类型的参数str [WebMe ...

  2. Python selenium 文件自动下载 （自动下载器）

    MyGithub:https://github.com/williamzxl 最新代码已经上传到Github,以下版本为stupid版本. 由于在下载过程中需要下载不同文件,所以可以把所有类型放在Va ...

  3. java web mysql 入门知识讲解

     MySQL学习笔记总结 一.SQL概述: SQL:Structured Query Language的缩写(结构化查询语言) SQL工业标准:由ANSI(ISO核心成员) 按照工业标准编写的SQ ...

  4. [C#]Winform后台提交数据且获取远程接口返回的XML数据,转换成DataSet

    #region 接口返回的Xml转换成DataSet /// <summary> /// 返回的Xml转换成DataSet /// </summary> /// <par ...

  5. 详解面向对象编程——JavaScriptOOP

        前  言 絮叨絮叨 学习了JS之后,不知道大家觉得怎们样呢? 今天我们就来讲一下JS中最重要的一个环节,JavaScript中的面向对象编程OOP,这里的东西有点难,也有点绕. 可是! 不要灰 ...

  6. Activiti 用户任务关联自定义表单

    问题阐述 通常每一个"用户任务"都会对应一个表单,以供用户录入信息.尤其是在"流程定义"拥有多个版本的情形下,明确的指定表单显得极其重要. 一份新版本的&quo ...

  7. PE格式第六讲,导出表

    PE格式第六讲,导出表 请注意,下方字数比较多,其实结构挺简单,但是你如果把博客内容弄明白了,对你受益匪浅,千万不要看到字数多就懵了,其实字数多代表它重要.特别是第五步, 各种表中之间的关系. 作者: ...

  8. CSS之 border 属性

    特性 border-width 不支持百分比  border-color 默认颜色是 color  border-color 透明值的作用:可利用增加可点击区域,利用内阴影做边框  border 应用 ...

  9. 深入浅出 SpringMVC - 2 提升篇

    前言: 本篇笔记是继 深入浅出 SpringMVC - 1 后的续篇,主要介绍了 SpringMVC 的实际小应用,包括 SpringMVC 的数据格式化.使用 JSR 303 验证标准 在 Spri ...

  10. WordPress 4.8 安装配置教程 （基于 centos 7.3, php 7.0, mysql 5.7.19, nginx 1.12.1）

    最近想要整个 blog,记录自己工作.学习中的点滴.Wordpress 自然是首选,因为内容才是关键,所以也就不怕别人说太 low.网上大部份都是讲 wordpress 配合 apache 的安装教程 ...