Bootstrap - Plugins Overview

The components discussed in the previous chapters under Layout Components are just the beginning. Bootstrap comes bundled with 12 jQuery plugins that extend the features and can add more interaction to your site. To get started with the Bootstrap’s JavaScript plugins, you don’t need to be an advanced JavaScript developer. By utilizing Bootstrap Data API, most of the plugins can be triggered without writing a single line of code.
Bootstrap Plugins can be included on your site in two forms −
Individually − Using Bootstrap's individual *.js files. Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs.
Individually − Using Bootstrap's individual *.js files. Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs.
Or compiled (all at once) − Using bootstrap.js or the minified bootstrap.min.js. Do not attempt to include both, as both bootstrap.js and bootstrap.min.js contain all plugins in a single file.
Or compiled (all at once) − Using bootstrap.js or the minified bootstrap.min.js. Do not attempt to include both, as both bootstrap.js and bootstrap.min.js contain all plugins in a single file.
All of the Bootstrap plugins are accessible using the included Data API. Hence, you don’t need to include a single line of JavaScript to invoke any of the plugin features.
All of the Bootstrap plugins are accessible using the included Data API. Hence, you don’t need to include a single line of JavaScript to invoke any of the plugin features.
In some situations it may be desirable to turn this functionality of Data API off. If you need to turn off the Data API, you can unbind the attributes by adding the following line of JavaScript −
In some situations it may be desirable to turn this functionality of Data API off. If you need to turn off the Data API, you can unbind the attributes by adding the following line of JavaScript −
$(document).off('.data-api')

To turn off a specific/single plugin, just include the plugin's name as a namespace along with the data-api namespace like this −
To turn off a specific/single plugin, just include the plugin's name as a namespace along with the data-api namespace like this −
$(document).off('.alert.data-api')

The developers of Bootstrap believe that you should be able to use all of the plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon say for example −
$(".btn.danger").button("toggle").addClass("fat")

All methods accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior) as shown below −
// initialized with defaults
$("#myModal").modal()    

 // initialized with no keyboard                  
$("#myModal").modal({ keyboard: false })  

// initializes and invokes show immediately
$("#myModal").modal('show')                
Each plugin also exposes its raw constructor on a Constructor property: $.fn.popover.Constructor. If you'd like to get a particular plugin instance, retrieve it directly from an element −
$('[rel = popover]').data('popover').

Bootstrap plugins can sometimes be used with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. To overcome this call .noConflict on the plugin you wish to revert the value of.
// return $.fn.button to previously assigned value
var bootstrapButton = $.fn.button.noConflict()

// give $().bootstrapBtn the Bootstrap functionality
$.fn.bootstrapBtn = bootstrapButton            
Bootstrap provides custom events for most plugin's unique actions. Generally, these events come in two forms −
Infinitive form − This is triggered at the start of an event. E.g. show. Infinitive events provide preventDefault functionality. This provides the ability to stop the execution of an action before it starts.
Infinitive form − This is triggered at the start of an event. E.g. show. Infinitive events provide preventDefault functionality. This provides the ability to stop the execution of an action before it starts.
$('#myModal').on('show.bs.modal', function (e) {
   // stops modal from being shown
   if (!data) return e.preventDefault() 
})
Past participle form − This is triggered on the completion of an action. E.g. shown.
Past participle form − This is triggered on the completion of an action. E.g. shown.

    26 Lectures 
     2 hours 

 Anadi Sharma

    54 Lectures 
     4.5 hours 

 Frahaan Hussain

    161 Lectures 
     14.5 hours 

 Eduonix Learning Solutions

    20 Lectures 
     4 hours 

 Azaz Patel

    15 Lectures 
     1.5 hours 

 Muhammad Ismail

    62 Lectures 
     8 hours 

 Yossef Ayman Zedan
 Print
 Add Notes
 Bookmark this page