Home>

bootstrap plugin

1. Bootstrap transition plugin

The transition plugin provides simple transition effects.If i want to reference the functionality of the plugin separately,Then you need to reference transition.js in addition to other js files. Or, as mentioned in the bootstrap plugin overview chapter,You can reference bootstrap.js or the minified version of bootstrap.min.js.

transition.js is the basic helper class for the transitionend event and the css transition effects simulator.It is used by other plugins to check css transition effect support,And used to get the transition effect.

Use Cases

Use cases for the transition plugin:

(1) Modal dialog box with slideshow or fade-in effect.Specific examples seebootstrap modal plugin.

(2) Tabs with fade-out effect.Specific examples seebootstrap tab plugin.

(3) Warning box with fade-out effect. Specific examples seebootstrap alert box plugin.

(4) Carousel with slide effect.Specific examples seebootstrap carousel plugin.

2. bootstrap modal plugin

A modal is a child form that overlays the parent form.Usually, the goal is to display content from a separate source,There can be some interaction without leaving the parent form.Subforms provide information, interaction, and more.

If i want to reference the functionality of the plugin separately,Then you need to reference modal.js. Or, as mentioned in the bootstrap plugin overview chapter,You can reference bootstrap.js or the minified version of bootstrap.min.js.

(1) Usage

You can toggle the hidden content of the modal plugin:

a, through the data attribute:set the attribute data-toggle="modal" on the controller element (such as a button or link), and set data-target="#identifier" or href="#identifier" to specify the specific Modal box (with).

b. Via javascript:using this technique,You can call the modal box with with a simple line of javascript:

$("#identifier"). modal (options)

<h2>Create a modal</h2>
<!-Button triggers modal box->
<button data-toggle="modal"
 data-target="#mymodal">
 Start Demo Modal Box
</button>
<!-Modal Box (modal)->
<div tabindex="-1" role="dialog"
 aria-labelledby="mymodallabel" aria-hidden="true">
 <div>
 <div>
 <div>
 <button type="button"
 data-dismiss="modal" aria-hidden="true">
  X
 </button>
 <h4>
 Modal title
 </h4>
 </div>
 <div>
 Add some text here
 </div>
 <div>
 <button type="button"
 data-dismiss="modal">close
 </button>
 <button type="button">
 Commit changes
 </button>
 </div>
 </div><!-/.Modal-content->
</div><!-/.Modal->
</div>

Code explanation:

a, using modal windows,You need to have some kind of trigger.You can use buttons or links.Here we are using buttons.

b. If you look closely at the code above,You will find that in the

  • Previous Detailed Golang inherited mock instance
  • Next Yii20 Table Correlation Query Example Analysis