Bootstrap - Javascript

bootstrap

How can we use all Bootstrap plugins without writing a single line of JavaScript?

You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.

Under which circumstances should we turn off the markup / data API?

Not sure.

How can we disable the markup / data API?

In some situations it may be desirable to turn off the markup API. To disable the data attribute API, unbind all events on the document namespaced with data-api:

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

Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:

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

How can we turn off the markup / data API for a particular plugin?

To target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:

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

Why do we need to have one plugin per element data attributes?

Only one plugin per element via data attributes: Don't use data attributes from multiple plugins on the same element. For example, a button cannot both have a tooltip and toggle a modal. To accomplish this, use a wrapping element.

How can we use the programmatic API?

You should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon. All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

How can we access the constructor?

Each plugin also exposes its raw constructor on a Constructor property:

$.fn.popover.Constructor

We need this Contructor property so that we can access and / or change other properties. See elsewhere on this page for examples.

How can we get a particular plugin instance from an element?

If you'd like to get a particular plugin instance, retrieve it directly from an element:

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

How can we change the default settings for a plugin?

ou can change the default settings for a plugin by modifying the plugin's Constructor.DEFAULTS object:

$.fn.modal.Constructor.DEFAULTS.keyboard = false;

Why do we need to sometime use the noConflict method?

Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call .noConflict on the plugin you wish to revert the value of.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

What is an infinitive event?

Bootstrap provides custom events for most plugins' unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. show) is triggered at the start of an event, and its past participle form (ex. shown) is triggered on the completion of an action.

As of 3.0.0, all Bootstrap events are namespaced. All 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) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

How can we access the version number of each plugin?

The version of each of Bootstrap's jQuery plugins can be accessed via the VERSION property of the plugin's constructor. For example, for the tooltip plugin:

$.fn.tooltip.Constructor.VERSION;

How can we disable transition?

Transitions can be globally disabled using the following JavaScript snippet, which must come after transition.js (or bootstrap.js or bootstrap.min.js, as the case may be) has loaded:

$.support.transition = false;
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License