Bootstrap学习日记之折叠插件

折叠插件概述

  在前面的章节学习中，我们也接触到了折叠插件，比如最近学习的一篇导航栏插件，那么折叠插件是什么？折叠插件能够使区域内的内容折叠起来，用于创建折叠导航还是内容面板都是很不错的选择。

用法

data属性：添加data-toggle="collapse"----告诉页面此处做折叠，data-target="#ID"----折叠容器的ID。

Java Script：$(''.collapse).collapse();

创建折叠插件

• 创建需要折叠的导航或者内容面板
• 折叠触发器（按钮或者链接）按钮添加data-target="#ID"，超链接添加href="#ID"，共同添加data-toggle="collapse"。ID为需要折叠的容器ID
• 需要折叠的内容容器<div>添加class="collapse  panel-collapse或者navbar-collapse"，如果是折叠面板为panel-collapse，导航为navbar-collapse，添加唯一ID，值与上面的ID相同。
• 在容器中添加class="in"则为默认打开折叠

  <div class="container">
       <div class="panel-group" id="accordion">
           <div class="panel panel-default">
           <div class="panel-heading">
               <h4 class="panel-title">
        <!--折叠触发器a添加href="#ID"-->
                   <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">    
                       点击进行展开第一部分
                   </a>
               </h4>
           </div>
<!--折叠容器添加class="collapse"因为是面板所以再添加class="panel-collapse",in为立即展开-->
               <div id="collapseOne" class="panel-collapse collapse in">
                   <div class="panel-body">
                       Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
                       Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。
                       国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
                   </div>
               </div>
           </div>
           <div class="panel panel-default">
               <div class="panel-heading">
                   <h4 class="panel-title">
                       <a data-toggle="collapse" href="#collapseTwo" data-parent="#accordion">  点击展开第二部分  </a>
                   </h4>
               </div>
               <div id="collapseTwo" class="panel-collapse collapse">
                   <div class="panel-body">
                       基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在Bootstrap 基本结构部分详细讲解。
                       CSS：Bootstrap 自带以下特性：全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在Bootstrap CSS部分详细讲解。
                       组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。
                       JavaScript 插件：Bootstrap包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在Bootstrap插件部分详细讲解。
                       定制：您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。
                   </div>
               </div>
           </div>
           <div class="panel panel-default">
               <div class="panel-heading">
                   <h4 class="panel-title">
                                              <button data-toggle="collapse" data-parent="#accordion" data-target="#collapseThree" class="btn btn-default">  点击展开第二部分  </button>

                   </h4>
               </div>
               <div id="collapseThree" class="collapse panel-collapse">
                   Less是一个 CSS 预处理器，让 CSS 具有动态性。
                   另一方面，Bootstrap 是一个快速开发 Web App 和站点的工具包。
                   这样，您可以在 CSS 中使用 Bootstrap 的 Less 变量、mixins（混合）和 nesting（嵌套）。
               </div>
           </div>
      </div>

  </div>

代码解读：我们创建了三个折叠触发器，第一第二个为超链接触发器，其中第一个折叠容器中添加了class="in"，第三个为按钮，从例子中可以看出，超链接是用href="#ID"来确定需要折叠容器的，按钮是通过data-target="#ID"。

    data-parent属性把折叠面板的id添加到折叠触发器上。

基本格式：

<!--导航或者面板-->
.....
<!--折叠触发器(点击会展开或者关闭折叠)-->
    <!--超链接触发-->
   <a data-toggle="collapse" href="#example">.....</a>
    <!--按钮触发-->
    <button class="btn btn-default" data-toggle="collapse" data-target="#example">
   .......</button>
<!--折叠内容容器-->
  <div class="collapse  panel-collapse或者navbar-collapse" id="example">
.....</div>

运行结果

刚打开页面时：

可以看到带有class="in'的折叠器打开页面时，没有发生折叠，需要鼠标点击才会发生折叠。

创建带有折叠键的导航栏

• 创建导航栏
• 创建折叠触发器按键，添加data-toggle="collapse"，data-target="#ID" class="navbar-collapse"
• 将导航元素添加到一个内容容器中，赋予唯一ID(与上同)。添加class="navbar-collapse collapse"
• 将容器添加到导航栏中

   <nav class="navbar navbar-default" role="navigation">
       <div class="container-fluid">
       <div class="navbar-header">
           <button type="button" data-toggle="collapse" data-target="#NavbarCollapse" class="navbar-toggle">
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
           </button>
           <div class="navbar-brand">
           个人站点
           </div>
       </div>
           <div class="navbar-collapse collapse" id="NavbarCollapse">
               <ul class="nav navbar-nav">
                   <li class="active"><a href="#">IOS</a></li>
                   <li><a href="#">PHP</a></li>
                   <li class="dropdown">
                       <a href="#" data-toggle="dropdown">Java
                       <span class="caret"></span>
                       </a>
                       <ul class="dropdown-menu">
                           <li><a>Java入门</a></li>
                           <li><a>Java进阶</a></li>
                           <li class="divider"></li>
                           <li><a>数据结构与算法</a></li>
                       </ul>
                   </li>
               </ul>
           </div>
       </div>
   </nav>

运行结果

 大屏浏览时 

小屏浏览时

选项

  选项使用很简单，添加相关的data-*属性即可。

方法

案例

 <div class="container">
       <div class="panel-group">
           <div class="panel panel-default">
           <div class="panel-heading">
               <h4 class="panel-title">
                   <a data-toggle="collapse" href="#collapseOne">
                       点击进行展开第一部分
                   </a>
               </h4>
           </div>
               <div id="collapseOne" class="panel-collapse collapse in">
                   <div class="panel-body">
                       Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
                       Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。
                       国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
                   </div>
               </div>
           </div>
           <div class="panel panel-default">
               <div class="panel-heading">
                   <h4 class="panel-title">
                       <a data-toggle="collapse" href="#collapseTwo">  点击展开第二部分  </a>
                   </h4>
               </div>
               <div id="collapseTwo" class="panel-collapse collapse">
                   <div class="panel-body">
                       基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在Bootstrap 基本结构部分详细讲解。
                       CSS：Bootstrap 自带以下特性：全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在Bootstrap CSS部分详细讲解。
                       组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。
                       JavaScript 插件：Bootstrap包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在Bootstrap插件部分详细讲解。
                       定制：您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。
                   </div>
               </div>
           </div>
           <div class="panel panel-default">
               <div class="panel-heading">
                   <h4 class="panel-title">
                       <a data-toggle="collapse" id="#collapseThree" >  点击展开第二部分  </a>
                   </h4>
               </div>
               <div id="collapseThree" class="collapse panel-collapse">
                   Less是一个 CSS 预处理器，让 CSS 具有动态性。
                   另一方面，Bootstrap 是一个快速开发 Web App 和站点的工具包。
                   这样，您可以在 CSS 中使用 Bootstrap 的 Less 变量、mixins（混合）和 nesting（嵌套）。
               </div>
           </div>
           <div class="panel panel-default">
               <div class="panel-heading">
                   <h4 class="panel-title">
                       <a data-toggle="collapse" href="#collapseFour">点击展开第四部分</a>
                   </h4>
               </div>
               <div class="collapse panel-collapse" id="collapseFour">
                   Bootstrap框架是当前最流行的开源框架之一
               </div>
           </div>
      </div>

  </div>
<script>
    $(function () {
        $('#collapseOne').collapse({toggle:false});
    });
    $(function () {
        $('#collapseTwo').collapse('show');
    });
    $(function () {
        $('#collapseThree').collapse('toggle');
    });
    $(function () {
        $('#collapseFour').collapse('hide');
    });
</script>

运行结果

事件

show事件实例

  <div class="container">
       <div class="panel-group">
           <div class="panel panel-default">
           <div class="panel-heading">
               <h4 class="panel-title">
                   <a data-toggle="collapse" href="#collapseOne">
                       点击进行展开第一部分，show事件（当show方法启动时生效）
                   </a>
               </h4>
           </div>
               <div id="collapseOne" class="panel-collapse collapse ">
                   <div class="panel-body">
                       Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
                       Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。
                       国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
                   </div>
               </div>
           </div>
      </div>
  </div>
  <script>
      $('#collapseOne').on('show.bs.collapse',function () {
          alert("当你点击此框时会有提醒")
      })
  </script>

代码解读：show事件需要show方法生效时才会触发，show方法为collapse折叠框点击展开，那么Java  Script中代码意思为当触发show方法时触发show事件里的处理（弹出alert框）

运行结果

hide事件

 <div class="container">
       <div class="panel-group">
           <div class="panel panel-default">
           <div class="panel-heading">
               <h4 class="panel-title">
                   <a data-toggle="collapse" href="#collapseOne">
                       点击进行展开第一部分，hide事件（当hide方法启动时生效）
                   </a>
               </h4>
           </div>
               <div id="collapseOne" class="panel-collapse collapse ">
                   <div class="panel-body">
                       Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
                       Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。
                       国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
                   </div>
               </div>
           </div>
      </div>
  </div>
  <script>
      $('#collapseOne').on('hide.bs.collapse',function () {
          alert("当你关闭折叠框时会有提醒")
      })
  </script>

代码解读：hide事件跟show事件一样，当触发hide方法时才会触发hide事件

运行结果