Bootstrap Plugins Overview

Earlierlayout componentsThe components discussed in the previous chapters are just the beginning. Bootstrap comes with 12 jQuery plugins that extend its functionality and can add more interactivity to your site. Even if you are not a senior JavaScript developer, you can start learning Bootstrap's JavaScript plugins. With the Bootstrap Data API, most plugins can be triggered without writing any code.

There are two ways to reference Bootstrap plugins on a site:

Individual references: Use Bootstrap's individual*.jsfiles. Some plugins and CSS components depend on other plugins. If you reference plugins individually, make sure you understand the dependencies between these plugins first.
Compiled (bundled) references: Usebootstrap.jsor the minified version ofbootstrap.min.js。
Do not try to reference both files at the same time, becausebootstrap.jsandbootstrap.min.jsboth contain all the plugins.

All plugins depend on jQuery. So jQuery must be referenced before the plugin files. Please visitbower.jsonto check the jQuery version currently supported by Bootstrap.

data attributes

You can use all Bootstrap plugins simply through the data attribute API, without writing a single line of JavaScript code. This is a first-class API in Bootstrap and should be your preferred approach.
That said, in some cases you may need to disable this feature. Therefore, we also provide a way to turn off the data attribute API, namely, to unbind events that aredata-apinamespaced with data-api and bound to the document. Like this:
```
$(document).off('.data-api')
```
To disable a specific plugin, simply prefix the data-api namespace with the plugin's name as the namespace, as follows:
```
$(document).off('.alert.data-api')
```

Programmatic API

We provide a pure JavaScript API for all Bootstrap plugins. All public APIs support single or chained calls and return the collection of elements they operate on (note: consistent with jQuery's calling convention). For example:

$(".btn.danger").button("toggle").addClass("fat")

All methods can accept an optional options object as a parameter, or a string representing a specific method, or no parameters (in which case the plugin will be initialized with default behavior), as shown below:

// 初始化为默认行为
$("#myModal").modal()    
 // 初始化为不支持键盘               
$("#myModal").modal({ keyboard: false })  
// 初始化并立即调用 show
$("#myModal").modal('show')

Each plugin, on theConstructorproperty, also exposes its original constructor:$.fn.popover.Constructor. If you want to get an instance of a specific plugin, you can obtain it directly via the page element:

 $('[rel=popover]').data('popover').

Avoiding namespace conflicts

Sometimes Bootstrap plugins may need to be used together with other UI frameworks. In this case, namespace conflicts may occur. If this unfortunate situation happens, you can call the plugin's.noConflictmethod to restore its original value.

// 返回 $.fn.button 之前所赋的值
var bootstrapButton = $.fn.button.noConflict() 
// 为 $().bootstrapBtn 赋予 Bootstrap 功能                           
$.fn.bootstrapBtn = bootstrapButton

Events

Bootstrap provides custom events for the unique behaviors of most plugins. In general, these events come in two forms:

Infinitive: This is triggered at the beginning of the event. For exampleex: show. Infinitive events providepreventDefaultfunctionality. This makes it possible to stop the execution of the operation before the event starts.
```
$('#myModal').on('show.bs.modal', function (e) {
// 阻止模态框的显示
  if (!data) return e.preventDefault() 
})
```
Past participle form: This is triggered after the action has been completed. For exampleex: shown。

Other extensions

Bootstrap CSS

Bootstrap Layout Components