Bootstrap Plugins Overview

Bootstrap is offering some great jQuery plugins with the extended features. These are around 12 jQuery plugins for make you website more attractive and interactive. Usage of Bootstrap’s jQuery plugins is very simple and easy. You do not need to be any extra and advance skills just like JavaScript developers to get started with Bootstrap’s JavaScript plugins. You can implement all these 12 plugins without writing a single line of code by utilizing Bootstrap Data API. You will learn about all techniques in this tutorial so let start with us.

There are two ways to include Bootstrap jQuery Plugins in your website project.

Individually:

You can use *.js files individually in Bootstrap but some css components and jquery plugins depend on other plugins. In this case you will have also included on which your required plugin is depending. For make sure check the documentation for dependencies.

Compiled (all at once)

Use bootstrap.js or the minified bootstrap.min.js for all features in one file now you do not have to need include multiple files, use only one file and this will work for all plugins and components. Both files bootstrap.js and bootstrap.min.js contain all plugins in a single file so do not include both files, include only one.

Note: All plugins depend on jQuery. Check bower.json to see which versions of jQuery are supported.

Data Attributes

You can use all of the Bootstrap plugins completely through the markup API. To invoke any of the plugin features you do not need to include a single line of javaScript.

In some situations it may be desirable to turn this functionality of Data API off. Bootstrap also provides the ability to turn off the Data API; you can unbind the attributes by using this line of code:

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

If you want to disable 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 developers of Bootstrap also 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 should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior) as shown example 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').

No Conflict

Occasionally it is essential to use 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 

Events

Bootstrap provides custom events for most plugin’s unique actions. Generally, these events come in two forms, an infinitive and past participle:

Infinitive form:

This event is triggered at the start of ex: show event.

$('#myModal').on('show.bs.modal', function (e) 
// stops modal from being shown
 if (!data) return e.preventDefault() 
)

Past participle form:

This event is triggered on the finishing point of ex: shown action.

Bootstrap Plugins Overview