Latest web development tutorials

Bootstrap plugin Overview

In the previous section discussedthe layout of the components to the assembly it is just the beginning.Bootstrap comes with 12 kinds jQuery plugin extends the functionality can be added to the site more interactive. Even if you are not an advanced JavaScript developer, you can also begin to learn the Bootstrap JavaScript plug-ins. Use Bootstrap Data API (Bootstrap Data API), most of the plug-in can be triggered without writing any code.

Site References Bootstrap plug in two ways:

  • Alone Quote: use a separate* .jsfiles of Bootstrap.Some plug-ins and CSS component depends on other plug-ins. If you plug a separate reference, make sure they understand the dependencies between plug-ins.
  • Compile (simultaneously) Quote: Usebootstrap.jsor compressed version ofbootstrap.min.js.
    Do not try to quote these two files, and because bootstrap.jsbootstrap.min.js contain all plugins.
All plug-ins rely on jQuery. You must be referenced in the plugin file before jQuery. Visit bower.json view Bootstrap currently supported version of jQuery.

property data

  • You may only be able to use all of the data attribute Bootstrap plugin API, without writing a single line of JavaScript code. This is a first class Bootstrap API, it should be your preferred way.
  • Then again, in some cases you may need to turn this feature off. Therefore, we also offer a closed data attribute API method, namely to lift the data-apinamespace and binding on the document events. Such as the following: 
    $ (Document) .off ( '. Data-api')
  • To close a specific plug-in, just before the data-api namespace plus the name of the widget as a namespace, as shown here: 
    $ (Document) .off ( '. Alert.data-api')

Programmatic API

We provide a way to pure JavaScript API for all Bootstrap plugins. All public API calls are supported individually or chained mode, and returns a set of elements it operates (Note: the form and invoke jQuery agreement). E.g: 

$ ( ". Btn.danger"). Button ( "toggle"). AddClass ( "fat")

All methods can take an optional options object as a parameter, or a string representing a particular method, or with no parameters (in this case, it will initialize the plug-in for the default behavior), as follows: 

// Initialized to the default behavior of $ ( "# myModal"). Modal ()    
 // Initialize keyboard does not support the $ ( "# myModal") modal ({keyboard: false}).  
// Initialize and call the show immediately
$ ( "# MyModal"). Modal ( 'show')

Each plug-in onConstructor property also exposes its originalconstructor:$ .fn.popover.Constructor.If you want to get an instance of a particular widget you can get directly through the page elements: 

 $ ( '[Rel = popover]'). Data ( 'popover').

Avoid namespace collisions

Sometimes Bootstrap plugins may need to be used with other UI frameworks. In this case, namespace collisions can occur. Unfortunately, if this happens, you can restore its original value by calling the widget.noConflict methods.

// Returns $ .fn.button before the assigned value var bootstrapButton = $ .fn.button.noConflict () 
// For the $ (). BootstrapBtn functions conferred Bootstrap					       
$ .fn.bootstrapBtn = BootstrapButton

event

Bootstrap provides a custom event as a unique behavior of most plug-ins. Generally, these events come in two forms:

  • Infinitive: This will be triggered when the event begins.Such asex: show.Infinitive event provides apreventDefaultfunction. This makes it possible to stop the operation before the event started. 
    $ ( '# MyModal'). On ( 'show.bs.modal', function (e) {
// Prevent modal box is displayed if (! Data) return e.preventDefault () 
})
  • Past participle form: This will be triggered after the operation is finished.Such asex: shown.