Detailed explanation of Bootstrap plug-in_javascript skills

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

There are two ways for a site to reference the Bootstrap plug-in :

Separate reference: Use individual *.js files of Bootstrap. Some plugins and CSS components depend on other plugins. If you reference plugins individually, be sure to check the dependencies between those plugins first.
Compile (also) references: Use bootstrap.js or a minified version of bootstrap.min.js.
"Don't try to reference both files at the same time, because both bootstrap.js and bootstrap.min.js contain all plugins."

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

1. 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 first choice.
Then again, there may be situations where this feature needs to be turned off. Therefore, we also provide a way to turn off the data attribute API, that is, to unbind the event with the data-api namespace and bound on the document. Like this:
$(document).off('.data-api')
If you need to close a specific plug-in, you only need to add the name of the plug-in as the namespace before the data-api namespace, as shown below:
$(document).off('.alert.data-api')

2. Programming API
We provide a pure JavaScript API for all Bootstrap plugins. All public APIs support individual or chain calling methods, and return the collection of elements they operate on (note: the calling form is consistent with jQuery). 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 without any parameters (in this case, the plugin will be initialized to the default behavior), as shown below :

// 初始化为默认行为
$("#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').

3. 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 unfortunately happens, 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      

4. Events
Bootstrap provides custom events for most plugins’ unique behaviors. Generally speaking, these events come in two forms:

Verb infinitive: This will be triggered at the beginning of the event. For example ex: show. Infinitive events provide the preventDefault function. This makes it possible to stop the execution of an operation before the event starts.

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

Past participle form: This will be triggered after the action has been executed. For example ex: shown.

The above is a brief overview of the Bootstrap plug-in. I hope it will be helpful for everyone to understand the Bootstrap plug-in.