The components discussed in the previous section Layout Components are just the beginning. Bootstrap comes with 12 jQuery plug-ins, which extend the functions and can add more interactions to the site. Even if you are not a high-level JavaScript developer, you can start learning about the JavaScript plug-in for Bootstrap. With the Bootstrap Data API (Bootstrap Data API), most plug-ins can be triggered without writing any code.
There are two ways to refer to the Bootstrap plugin on the site :
Individual reference: Individual *.js files using Bootstrap. Some plug-ins and CSS components rely on other plug-ins. If you refer to plugins separately, make sure to ask for dependencies between these plugins first.
Compile (simultaneous) reference: Use bootstrap.js or compressed version of bootstrap.min.js.
"Don't try to reference both files at the same time, because bootstrap.js and bootstrap.min.js both contain all plugins."
All plugins depend on jQuery. So jQuery must be referenced before the plugin file. Please visit bower.json to view the currently supported jQuery version of Bootstrap.
1. Data attributes
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 also be your preferred method.
Then again, this feature may need to be turned off in some cases. Therefore, we also provide a way to close the data attribute API, i.e. undo events that take data-api as namespace and bind to the document. Just like this:
$(document).off('.data-api')
To close a specific plug-in, just 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-based API for all Bootstrap plugins. All public APIs support individual or chained calling methods 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 option object as a parameter, or a string representing a specific method, or without any parameters (in this case, the plug-in will be initialized as the default behavior), as shown below:
// Initialize to default behavior $("#myModal").modal() // Initialize to not support keyboard $("#myModal").modal({ keyboard: false }) // Initialize and call 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 the Bootstrap plug-in may need to be used with other UI frameworks. In this case, namespace conflicts may occur. If this unfortunately happens, you can restore its original value by calling the plugin's .noConflict method.
// Return the value assigned before $.fn.button var bootstrapButton = $.fn.button.noConflict()// Assign Bootstrap function to $().bootstrapBtn$.fn.bootstrapBtn = bootstrapButton
4. Events
Bootstrap provides custom events for the unique behavior of most plugins. Generally speaking, these events come in two forms:
Verb infinitive: This will be triggered at the beginning of the event. For example ex: show. Verb infinitive events provide preventDefault function. This allows execution of the operation to be stopped before the event starts.
$('#myModal').on('show.bs.modal', function (e) {// Prevent the display of modal boxes if (!data) return e.preventDefault()})Past participle form: This will be triggered after the action is executed. For example ex: show.
The above is a simple overview of the Bootstrap plug-in. I hope it will be helpful for everyone to understand the Bootstrap plug-in.