Bootstrap plugin overview


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 the site to reference the Bootstrap plug-in:

  • Separate reference: Use Bootstrap’s individual *.js document. Some plugins and CSS components depend on other plugins. If you reference plugins individually, make sure you understand the dependencies between those plugins first.

    Compile (and simultaneously) reference : use bootstrap.js or the minified version of bootstrap.min.js.

    Do not 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.

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 unblock the event bound to the document with the data-api namespace. Like the following:

##$(document).off('.data-api')
  • such as 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')
Programmatic API

We provide a pure JavaScript API for all Bootstrap plug-ins. 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 plug-in will be initialized to the default behavior), as shown below ：

// Initialized to the default behavior
$("#myModal").modal()
// Initialized to not support the keyboard                                .modal({ keyboard: false })
// Initialize and call immediately show
$("#myModal").modal('show')
Each plug-in is # The ##Constructor

attribute also exposes its original constructor: $.fn.popover.Constructor. If you want to get an instance of a specific plug-in, you can get it directly through the page element:

$('[rel=popover]').data('popover').
Avoid namespace conflicts

Sometimes Bootstrap plug-ins 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.

// Return the value assigned before $.fn.button
var bootstrapButton = $.fn.button.noConflict()
// Assign Bootstrap to $().bootstrapBtn Functions     
$.fn.bootstrapBtn = bootstrapButton

Events

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

  • verb infinitive

    : This is triggered at the start 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) {
//Prevent the display of the modal box
if (!data) return e.preventDefault()
})

  • Past participle form

    : This will happen after the action is executed is triggered. For example ex: shown.

→