Bootstrap plug-in overview

The components discussed in the Previous Layout Components section are just the beginning. B ootstrap brings its own 12 jQuery plug-ins that extend functionality to add more interaction to your site. E ven if you're not an advanced JavaScript developer, you can start learning about Bootstrap's JavaScript plug-ins. With the Bootstrap Data API, most plug-ins can be triggered without writing any code.

There are two ways a site references a Bootstrap plug-in:

  • Separate references: Use Bootstrap's individual .js files. S ome plug-ins and CSS components rely on other plug-ins. If you refer to plug-ins separately, make sure you understand the dependencies between them first.

  • Compilation (simultaneous) reference: Use bootstrap .js or a compressed version of bootstrap.min .js.

    Bootstrap plug-in overview Don't try to reference both files, because bootstrap .js and bootstrap.min .js all plug-ins.
All plug-ins depend on jQuery. T herefore, jQuery must be referenced before the plug-in file. Visit bower.json to view the jQuery version currently supported by Bootstrap.

The data property

  • You can use all Bootstrap plug-ins just through the data property API without having to write a line of JavaScript code. This is the first-class API in Bootstrap and should be your first choice.

  • Then again, in some cases you may need to turn this feature off. T herefore, we also provide a way to turn off the data property API, which is to unrevers the events that take the data-api as the namespace and bind to the document. It's like this:

    $(document).off('.data-api')
  • To close a particular plug-in, simply add the name of the plug-in as the name of the plug-in before the data-api namespace, as follows:

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

Programmatic API

We provide a JavaScript-only API for all Bootstrap plug-ins. A ll exposed APIs support individual or chained calls and return a collection of elements that they operate on (Note: and jQuery are called in the same form). For example:

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

All methods can accept an optional option object as an argument, or a string representing a particular method, or without any parameters (in which case the plug-in will be initialized as the default behavior), as follows:

// 初始化为默认行为
$("#myModal").modal()    
 // 初始化为不支持键盘               
$("#myModal").modal({ keyboard: false })  
// 初始化并立即调用 show
$("#myModal").modal('show')   

Each plug-in also exposes its original constructor on the Constructor property: $.fn.popover.Constructor. If you want to get an instance of a particular plug-in, you can get it directly from the page element:

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

Avoid namespace conflicts

Sometimes the Bootstrap plug-in may need to be used with other UI frameworks. I n this case, a namespace conflict may occur. If this happens unfortunately, you can restore the original value by calling the plug-in's .noConflict method.

// 返回 $.fn.button 之前所赋的值
var bootstrapButton = $.fn.button.noConflict() 
// 为 $().bootstrapBtn 赋予 Bootstrap 功能                           
$.fn.bootstrapBtn = bootstrapButton    

Event

Bootstrap provides custom events for the unique behavior of most plug-ins. In general, these events take two forms:

  • Verb infinitive: This is triggered at the beginning of the event. F or example ex: show. V erb infinitive events provide the preventDefault feature. This allows the execution of the operation to be stopped before the event begins.

    $('#myModal').on('show.bs.modal', function (e) {
    // 阻止模态框的显示
      if (!data) return e.preventDefault() 
    })
  • Past parting form: This is triggered after the action has been executed. For example ex: Show .

Related tutorials

CSS tutorial

jQuery tutorial