5.1 Overview of Bootstrap plugins

---

Bootstrap Plugins Overview

The components discussed in the previous Layout Components chapter are just the beginning. Bootstrap comes with 12 kinds of jQuery plug-ins, which extend the functionality and add more interaction to the site. Even if you're not an advanced JavaScript developer, you can start learning Bootstrap's JavaScript plugins. Using the Bootstrap Data API (Bootstrap Data API), most plugins can be triggered without writing any code.

There are two ways for a site to reference a Bootstrap plugin:

• Individual references: Individual *.js files using Bootstrap. Some plugins and CSS components depend on other plugins. If you're referencing plugins individually, make sure to figure out the dependencies between those plugins first.
• To compile (while) referencing: use bootstrap.js or the minified version of bootstrap.min.js.

NOTE: Do not try to include both files at the same time, as both bootstrap.js and bootstrap.min.js contain all the plugins.

All plugins depend on jQuery. So jQuery must be referenced before the plugin file. Please visit bower.json to see the jQuery versions currently supported by Bootstrap.

data attribute

• You can use all Bootstrap plugins just 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 way.
• Then again, in some cases it may be necessary to turn this feature off. Therefore, we also provide a method to close the data attribute API, that is, cancel the event that takes data-api as the namespace and binds to the document. Like this:

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

• To disable a specific plugin, just add the name of the plugin as the namespace before the data-api namespace, as shown below:

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

Programmatic API

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

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

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

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

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

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

Avoid Namespace Conflicts

Sometimes Bootstrap plugins may need to be used with other UI frameworks. In this case, a namespace conflict may occur. If this happens unfortunately, you can restore its original value by calling the plugin's .noConflict method.

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

event

Bootstrap provides custom events for the unique behavior of most plugins. Generally, these events come in two forms:

• Infinitive : This is fired when the event starts. For example ex: show . Infinitive events provide the preventDefault function. This makes it possible to stop the execution of an action 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 executed. For example ex:shown .