Bootstrap | Plugins Overview

Hello folks! welcome back to a new edition of our tutorial on Bootstrap. In this section of our Bootstrap tutorial, we will be looking at Bootstrap Plugins Overview.

Bootstrap has about twelve jQuery plugins that extend the features and can add more interaction to your site. To get started with Bootstrap's jQuery plugins, you do not need to be an advanced JavaScript developer. By utilizing the bootstrap Data API, most of the plugins can be tripped without writing even a single line of code.

Bootstrap Plugins can be included on your site in two ways -

• Individually - Making use of Bootstrap individual *.js files. Some plugins rely on other plugins. If you insert plugins individually, ensure to check for these dependencies in the docs.

• Compiled - Making use of bootstrap.js or the manified bootstrap.min.js. Don't try including both, as both bootstrap.js and bootstrap.min.js holds all plugins in a single file.

All plugins depend on jQuery. So jQuery must be included before the plugin files. Check bower.json to see which versions of jQuery are supported.

READ: Bootstrap | Wells

Data Attributes

• All bootstrap plugins are accessable using the added Data API. Therefore, you do not need to add a single line of JavaScript to invoke any of the plugin features.

• In some cases, it may be desirable to turn this functionality of Data API off. If you need to switch off the Data API, you can free 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 -

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

Programmatic API

The creators of Bootstrap believe that you should be able to use all the plugins purely through the JavaScript API. All public APIs are single, chainable methods, and returns the collection acted upon say for example -

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

All the methods accept an optional object, a string which targets a particular method, or nothing (which initiates the 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 in Bootstrap also exposes its raw constructor on a Constructor property: $.fn.popover.Constructor. if you'd like to get a specific plugin instance, retrieve it directly from an instance -

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

READ: Bootstrap | Panels

No Conflict

Bootstrap plugins can occasionally be used with other UI frameworks. In conditions like these, namespace collision can sometimes 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

Events

Bootstrap makes available custom events for most plugin's unique actions. Generally, these events comes in two forms -

• Infinitive form - This is triggered at the beginning of the event. E.g. show infinitive events gives preventDefault functionality. This gives 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 participate form - This form of event is triggered on the completion of an action. E.g. shown.

READ: Bootstrap | Object

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Transition Plugin.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.