Plugins Overview

In bootstrap we have 12 jQuery plugins that are used to enhance our websites. There is no need of learning the JavaScript to use plugins in bootstrap. The plugins can be used by simply using the Data API of bootstrap. In this way no coding is required. In our web page we can add plugins in two forms that are individually or by compiling.

The plugins can be individually added by using the *.js files. It should be noted here that some of the plugins are dependent on other plugins. In this way you should ensure that other plugins on which the added ones are dependent must be added to the page.

The plugins can be compiled or added all at once by using the bootstrap.js files. We can also use the bootstrap.min.js files to add compiled plugins to the web page. Both of these files should not be added together as both of them contain all the bootstrap plugins in one file.

JQuery must be included before adding the plugin file as all plugins depend on jQuery.

 

Data Attributes:

  • Plugins are accessible when Data API is used. Because of the Data API, there is no need of JavaScript code for any of the features of plugins.
  • There are some cases when we need to disable the bootstrap data API. This can be done by using the line of JavaScript that is $(document).off(‘.data-api’).
  • A single plugin can also be turned off by adding the name of plugin in the above JavaScript line as a namespace as: $(document).off(‘.alert.data-api’).

 

Programmatic API:

The plugins can be used through JavaScript API. These APIs are single and chainable methods that can accept a string which can be used as a target to a particular method. This particular method invokes a plugin and this plugin will have a default behavior.

Consider the following example in which we have initiated the plugins; at first the plugin is initiated with default behavior, then the plugin is initiated having no keywords and finally the plugin is initiated and is shown immediately:

$(“#myModal”).modal()

$(“#myModal”).modal({ keyboard: false })

$(“#myModal”).modal(‘show’)

Every plugin has its own constructor which can be added by $.fn.popover.Constructor. An instance of the plugin can be retrieved from an element by $(‘[rel = popover]’).data(‘popover’).

 

No Conflict:

We can also use the plugins of bootstrap with other UI frameworks. When the plugins of bootstrap are added with UI frameworks then there are chances of collisions of namespace. To avoid this we can call the instance .noConflict for that very plugin on which there are chances of collisions of namespace. This can be done as follows:

var bootstrapButton = $.fn.button.noConflict()

This is used to return $.fn.button to the previously assigned value.

$.fn.bootstrapBtn = bootstrapButton

This is used to give the bootstrap functionality to $().bootstrapBtn.

 

Events:

We have a number of custom events for plugins that are provided by bootstrap. We can have the events in two forms that are as follows:

 

Infinitive form:

The infinitive form comes to action when an event is started. This form is used when the user wants to stop the execution of an action.

 

Past participle form:

The infinitive form comes to action when an event is ended.