概览

1.单个还是全部引入：可以单个引入bootstrap.js 和 bootstrap.min.js，也可以全部引入，二者都包含了所有插件，你在使用时，只需选择一个引入页面就可以了。

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

 当需要关闭的时候$(document).off('.data-api')

3.编程的API

$('.btn.danger').button('toggle').addClass('fat');

  $('#mymodal').modal() // 以默认值初始化
  $('#mymodal').modal({ keyboard: false }) // initialized with no keyboard
  $('#mymodal').modal('show') // 初始化后立即调用 show 方法

$.fn.@H_219_17@modal.Constructor.DEFAULTS.keyboard = false // 将模态框插件的 `keyboard` 默认选参数置为 false

4.避免命名空间冲突

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to prevIoUsly assigned value $.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality

5.事件：从 3.0.0 版本开始，所有 Bootstrap 事件的名称都采用命名空间方式。

$('#mymodal').on('show.bs.modal',function (e) { if (!data) return e.preventDefault() // 阻止模态框的展示 })

6.未对禁用 JavaScript 的浏览器提供补救措施

Bootstrap 插件未对禁用 JavaScript 的浏览器提供补救措施。如果你对这种情况下的用户体验很关心的话，请添加<noscript> 标签向你的用户进行解释（并告诉他们如何启用 JavaScript），或者按照你自己的方式提供补救措施。

过渡@L_616_21@

1.transition.js，bootstrap.js包含此插件。

模态框

1.可@L_497_9@modal.js，bootstrap.js包含此插件。

2.实例

<!-- 模态框（Modal） -->
<div class="modal fade" id="mymodal" tabindex="-1" role="dialog" 
   aria-labelledby="mymodalLabel" aria-hidden="true">
   ="modal-dialog">
      ="modal-content">
         ="modal-header">
            button type="button" class="close" data-dismiss="modal" 
               aria-hidden>×
            </buttonh4 ="modal-title"="mymodalLabel">
               模态框（Modal）标题
            h4div="modal-body">
            点击关闭按钮检查事件功能。
         ="modal-footer"="btn btn-default" 
               data-dismiss="modal">
               关闭
            ="btn btn-pri@R_@R_197_11263@_11035@">
               提交更改
            > /.modal-content -->
    /.modal-dialog  /.modal script>
   $(function () { $('#mymodal).modal(hide)})});
>
).on(hide.bs.modal, () {
      alert(嘿，我听说您喜欢模态框...);})
   });
>

3.选项

<a data-toggle="modal" href="remote.html" data-target="#modal">请点击我</a>

4.方法

$('#identifier').modal({
keyboard: false
})

$('#identifier').modal('toggle')

$('#identifier').modal('show')

$('#identifier').modal('hide')

5.事件

$('#identifier').on('show.bs.modal',function () {
  // 执行一些动作...
})

$('#identifier').on('shown.bs.modal',function () {
  // 执行一些动作...
})

$('#identifier').on('hide.bs.modal',function () {
  // 执行一些动作...
})

$('#identifier').on('hidden.bs.modal',function () {
  // 执行一些动作...
})

 6.可选尺寸：模态框提供了两个可选尺寸，通过为 .modal-dialog 增加一个样式调整类实现。.bs-example-modal-lg和bs-example-modal-sm

<!-- Large modal --> <button type="button" class="btn btn-pri@R_@R_197_11263@_11035@" 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" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> ... </div> </div> </div>

7.data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。

Dropdowns插件

1.dropdown.js

2.通过 data 属性：向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单

3.方法：下拉菜单切换有一个简单的方法用来显示或隐藏下拉菜单。

<script>
$(function(){
$(".dropdown-toggle").dropdown('toggle');
}); 
</script>

4.带有标签页的下拉菜单