YouTip

# Bootstrap Plugins Overview The components discussed in the previous **Layout Components** chapter are just the beginning. Bootstrap comes with 12 jQuery plugins that extend functionality and add more interactivity to your site. Even if you're not an advanced JavaScript developer, you can start learning Bootstrap's JavaScript plugins. Using the Bootstrap Data API, most plugins can be triggered without writing any code. There are two ways to include Bootstrap plugins on your site: * **Individual inclusion**: Use Bootstrap's individual _*.js_ files. Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to understand their dependencies first. * **Compiled (combined) inclusion**: Use _bootstrap.js_ or the minified _bootstrap.min.js_. > !(#)Do not attempt to include both files, as both _bootstrap.js_ and _bootstrap.min.js_ contain all plugins. _**All plugins depend on jQuery. Therefore, jQuery must be included before the plugin files. Please visit [bower.json](https://github.com/twbs/bootstrap/blob/v3.0.2/bower.json) to see the jQuery versions currently supported by Bootstrap.**_ ## data attributes * You can use all Bootstrap plugins purely through the data attributes API, without writing a single line of JavaScript code. This is a first-class API in Bootstrap and should be your preferred method. * That said, in some cases it might be necessary to turn this functionality off. Therefore, we also provide a way to disable the data attributes API by unbinding all events namespaced with _data-api_ on the document. Like this: $(document).off('.data-api') * To disable a specific plugin, simply add the plugin's name as a namespace before the data-api namespace, as shown below: $(document).off('.alert.data-api') ## Programmatic API We provide a pure JavaScript API for all Bootstrap plugins. All public APIs support either single or chained calls and return the collection of elements they operate on (Note: consistent with jQuery's calling style). For example: $(".btn.danger").button("toggle").addClass("fat") All methods accept an optional options object as a parameter, or a string representing a specific method, or no parameters at all (in which case the plugin is initialized with its default behavior), as shown below: // Initialize with default behavior $("#myModal").modal() // Initialize without keyboard support $("#myModal").modal({ keyboard: false }) // Initialize and immediately call show $("#myModal").modal('show') Each plugin also exposes its original constructor on the **Constructor** property: _$.fn.popover.Constructor_. If you want to get a specific plugin instance, you can retrieve it directly from the page element: $('').data('popover'). ## Avoiding namespace conflicts Sometimes Bootstrap plugins might need to be used alongside other UI frameworks. In such cases, namespace conflicts may occur. If this happens, you can restore the original values by calling the plugin's **.noConflict** method. // Return the value previously assigned to $.fn.button var bootstrapButton = $.fn.button.noConflict() // Assign Bootstrap functionality to $().bootstrapBtn $.fn.bootstrapBtn = bootstrapButton ## Events Bootstrap provides custom events for the unique behavior of most plugins. Generally, these events come in two forms: * **Infinitive form**: This is triggered when the event starts. For example _ex: show_. Infinitive events provide the _preventDefault_ functionality. This allows you to stop the action from starting. $('#myModal').on('show.bs.modal', function (e) {// Prevent the modal from showing if (!data) return e.preventDefault() }) * **Past participle form**: This is triggered after the action has finished. For example _ex: shown_.