bootstrap v3学习笔记之JavaScript插件

1、data属性：

你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript 代码。这是 Bootstrap 中的一等 API，也应该是你的首选方式。

关闭data属性的方式：

$(document).off('.data-api')

2、编程方式的API

所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）

3、模态框

<!-- Large modal --><button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button><div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">  <div class="modal-dialog modal-lg">    <div class="modal-content">      ...    </div>  </div></div><!-- Small modal --><button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button><div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">  <div class="modal-dialog modal-sm">    <div class="modal-content">      ...    </div>  </div></div>

4、Tooltips

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

5、Checkbox / Radio

<div class="btn-group" data-toggle="buttons">  <label class="btn btn-primary active">    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)  </label>  <label class="btn btn-primary">    <input type="checkbox" autocomplete="off"> Checkbox 2  </label>  <label class="btn btn-primary">    <input type="checkbox" autocomplete="off"> Checkbox 3  </label></div>

<div class="btn-group" data-toggle="buttons">  <label class="btn btn-primary active">    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)  </label>  <label class="btn btn-primary">    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2  </label>  <label class="btn btn-primary">    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3  </label></div>

以上所有功能，为了方便测试均为引入的bootstrap.min.js，即一次性引入全部js。

这里只是记录了一点儿皮毛，更多内容请见：http://v3.bootcss.com/javascript/