Bootstrap Basic Tutorial

Bootstrap plugins

Bootstrap Transition Effects Plugin Bootstrap Create a Webpage

Bootstrap Plugin Introduction

in the layout components components discussed in the chapter are just the beginning. Bootstrap comes with 12 jQuery plugins, which extend functionality and can add more interactivity to your site. Even if you are not an advanced JavaScript developer, you can start learning Bootstrap's JavaScript plugins. Most plugins can be triggered without writing any code using the Bootstrap Data API (Bootstrap Data API).

There are two ways to reference Bootstrap plugins on a site:

separate reference: Use Bootstrap's individual *.js files. Some plugins and CSS components depend on other plugins. If you reference the plugins individually, make sure you understand the dependency relationships between these plugins first.
compilation (simultaneous) reference: Use bootstrap.js or the compressed version bootstrap.min.js. Do not try to reference both files at the same time, because bootstrap.js and bootstrap.min.js which includes all plugins.

All plugins depend on jQuery. Therefore, jQuery must be referenced before the plugin file. Please visit bower.json Check the current jQuery version supported by Bootstrap.

data attribute

You can use all Bootstrap plugins through the data attribute API without writing a single line of JavaScript code. This is a first-class API in Bootstrap and should be your preferred method.
To be honest, there may be situations where you need to disable this feature. Therefore, we also provide a method to disable the data attribute API, which is to data-api To name a namespace and bind events to a document. As shown below:
```
$(document).off('.data')-api')
```
To close a specific plugin, just add the plugin's name to the data-Add the name of the plugin as the namespace before the plugin's name in the API namespace, as shown below:
```
$(document).off('.alert.data-api')
```

Programming API

We provide pure JavaScript API for all Bootstrap plugins. All public APIs are supportable for separate or chained calls, and return the element collection they operate on (note: consistent with jQuery's calling form). For example:

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

All methods can accept an optional options object as a parameter, or a string representing a specific method, or no parameters at all (in this case, the plugin will be initialized to default behavior), as shown below:

//　Initialization for default behavior
$("#myModal").modal()　　　　
　//　Initialization for keyboard unsupported　　　　　　　　　　　　　　　
$("#myModal").modal({ keyboard: false })　　
//　Initialization and immediate invocation of show
$("#myModal").modal('show')

Each plugin in Constructor The property also exposes its original constructor:$.fn.popover.ConstructorIf you want to get an example of a specific plugin, you can directly obtain it through the page element:

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

Avoid namespace conflict

Sometimes, Bootstrap plugins may need to be used with other UI frameworks. In this case, there may be a namespace conflict. If不幸 happened, you can call the plugin's .noConflict The method restores its original value.

//　Returns the value assigned to $.fn.button before the assignment
var bootstrapButton = $.fn.button.noConflict()　
//　To give Bootstrap functionality to $().bootstrapBtn　　　　　　　　　　　　　　　　　　　　　　　　　　　
$.fn.bootstrapBtn = bootstrapButton

Event

Bootstrap provides custom events for the unique behaviors of most plugins. Generally, these events have two forms:

InfinitiveThis will be triggered at the beginning of the event. For example ex: showThe infinitive form event provides preventDefault Function. This allows the execution of the operation to be stopped before the event starts.
```
$('#myModal').on('show.bs.modal', function (e) {
//　Prevent the display of the modal
　　if (!data) return e.preventDefault()　
)
```
Past Tense FormThis will be triggered after the action is completed. For example ex: shown.

Bootstrap Transition Effects Plugin Bootstrap Create a Webpage