按钮和折叠插件

一．按钮

可以通过按钮插件创建不同状态的按钮。

//单个切换。

<button class="btn btn-primary" data-toggle="button" autocomplete="off">按钮</button>

注：在Firefox多次页面加载时，按钮可能保持表单的禁用或选择状态。解决方案是：添加autocomplete="off"。

//单选按钮

<div class="btn-group" data-toggle="buttons">

   <label for="" class="btn btn-primary active">

      <input type="radio" name="sex" value="男" checked>男

   </label>

   <label for="" class="btn btn-primary">

      <input type="radio" name="sex" value="女">女

   </label>

</div> 

//复选按钮

<div class="btn-group" data-toggle="buttons">

<label for="" class="btn btn-primary active">

<input type="checkbox" name="fa" autocomplete="off" checked>音乐

</label>

<labelfor="" class="btnbtn-primary">

<input type="checkbox" name="fa" autocomplete="off">体育</label>

<label for=""   class="btn btn-primary">

<input type="checkbox" name="fa" autocomplete="off">美术

</label>

<label for="" class="btn btn-primary">

<input type="checkbox" name="fa" autocomplete="off">电脑</label>

</div>

//加载状态

<button class="btn btn-primary" data-loading-text="Loading..." autocomplete="off">开始上传</button>

 

    $('button').on('click', function () {

      var btn = $(this).button('loading');

      setTimeout(function () {

         btn.button('reset');

      }, 1000);

    });

二．折叠

通过点击可以折叠内容。

//基本实例

<button class="btn btn-primary" data-toggle="collapse" data-target="#content">Bootstrap</button>

 

<div class="collapse" id="content">

<div class="well">Bootstrap 是Twitter 推出的一个用于前端开发的开源工具包。它由Twitter 的设计师Mark Otto 和Jacob Thornton 合作开发,是一个CSS/HTML 框架。目前,Bootstrap 最新版本为3.0 。

</div>

</div>

//手风琴折叠

<div class="panel-group" id="accordion">

   <div class="panel panel-default">

      <div class="panel-heading">

         <h4 class="panel-title">

<a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">第一部分链接</a>

         </h4>

      </div>

      <div id="collapseOne" class="panel-collapse collapse in ">

         <div class="panel-body">

            第一部分内容

         </div>

      </div>

   </div>

 

   <div class="panel panel-default">

      <div class="panel-heading">

         <h4 class="panel-title">

<a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">第二部分链接</a>

         </h4>

      </div>

      <div id="collapseTwo" class="panel-collapse collapse">

         <div class="panel-body">

            第二部分内容

         </div>

      </div>

   </div>

 

   <div class="panel panel-default">

      <div class="panel-heading">

         <h4 class="panel-title">

<a href="#collapseThree" data-toggle="collapse" data-parent="#accordion">第三部分链接</a>

         </h4>

      </div>

      <div id="collapseThree" class="panel-collapse collapse">

         <div class="panel-body">

            第三部分内容

         </div>

      </div>

   </div>

 

   <div class="panel panel-default">

      <div class="panel-heading">

         <h4 class="panel-title">

<a href="#collapseFour" data-toggle="collapse" data-parent="#accordion">第四部分链接</a>

         </h4>

      </div>

      <div id="collapseFour" class="panel-collapse collapse">

         <div class="panel-body">

            第四部分内容

         </div>

      </div>

   </div>

 

</div>

data-parent默认值为false，设置需指定父元素选择器。也就是说，选定其中一个折叠区，其他折叠将隐藏，实现手风琴效果。

data-toggle如果前面加data-*，设置'collapse'表示实现折叠；

 

 

//手动调用

<button class="btn btn-primary" data-target="#content">Bootstrap</button>

 

<div class="collapse" id="content">

<div class="well">Bootstrap 是Twitter 推出的一个用于前端开发的开源工具包。它由Twitter 的设计师Mark Otto 和Jacob Thornton 合作开发,是一个CSS/HTML 框架。目前,Bootstrap 最新版本为3.0 。</div>

</div>

 

   $('button').on('click', function () {

 

       $('#content').collapse('toggle');

 

   });

 

 

Collapse插件中事件有四种。

show.bs.collapse在show方法调用时立即触发

shown.bs.collapse折叠区完全显示出来是触发

hide.bs.collapse在hide方法调用时触发

hidden.bs.collapse该事件在折叠区域完全隐藏之后触发

//事件，其他雷同 

   $('#content').on('show.bs.collapse', function () {

      alert('调用show方法是触发');

   });