Bootstrap Self-brought components

Bootstrap Self-brought components

plug-in overview

The components discussed in the previous "Layout components" section are just the beginning.

Bootstrap comes with 12 types of jQuery plugins that extend the functionality to add more interactivity to your site.

With the Bootstrap data API, most plug-ins can be triggered without writing any code.

There are two ways that a site references Bootstrap plug-ins:

Separate references: Use Bootstrap's individual *.js files.

Compile (at the same time) reference: Use Bootstrap.js or compressed version of Bootstrap.min.js.

Do not attempt to reference these two files at the same time, as both Bootstrap.js and bootstrap.min.js contain all the plugins.

Data Property

You can use all the Bootstrap plug-ins simply by using 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 preferred method.

Again, in some cases it may be necessary to turn this feature off. Therefore, we also provide a way to turn off the Data property API, which is to dismiss events that are data-api as namespaces and bound to the document. Just like this:

$ (document). Off ('. Data-api ')

To close a particular plug-in, simply precede the Data-api namespace with the name of the plug-in as a namespace, as follows:

$ (document). Off ('. Alert.data-api ')

API for programmatic approach

We provide APIs for all Bootstrap plugins in a pure JavaScript manner. All exposed APIs support a single or chained invocation, and return the set of elements to which they operate (note: Consistent with jquery's invocation form). For example:

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

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

Initialize to default behavior

$ ("#myModal"). Modal ()

Initialize to not support keyboard

$ ("#myModal"). Modal ({keyboard:false})//Initialize and call show now

$ ("#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 collisions

Sometimes Bootstrap plug-ins may need to be used with other UI frameworks. In this scenario, a namespace conflict may occur. If this happens, you can restore its original value by calling the plugin's. Noconflict method.

Returns the value assigned before the $.fn.button

var Bootstrapbutton = $.fn.button.noconflict ()

to $ (). BOOTSTRAPBTN gives Bootstrap function

$.FN.BOOTSTRAPBTN = Bootstrapbutton

1. transition effect (Transition) plugin, fade in

Use the. Fade class

2. Modal box (Modal) plug-in, pop-up box 2.1 Basic Modal frame

Trigger button:data-toggle= "modal" data-target= "#myModal"

Modal box div:class= "Modal Fade" id= "Mymodal"

aria-labelledby= "Mymodallabel", which refers to the caption of the modal box.

aria-hidden= "True" is used to keep the modal window from being visible until the trigger is triggered (such as clicking on the relevant button).

 

<!--button trigger modal box--

<button class= "btn btn-primary btn-lg" data-toggle= "modal" data-target= "#myModal">

Start Demo Modal box

</button>

<!--modal frame (Modal)--

<div class= "Modal Fade" id= "Mymodal" tabindex= "-1" role= "dialog" aria-labelledby= "Mymodallabel" Aria-hidden= "true">

<div class= "Modal-dialog" >

<div class= "modal-content" > Modal box </div>

</div>

</div> 2.2 modal frame structure

<div class= "Modal-dialog">

<div class= "Modal-content">

<div class= "Modal-header">

<button type= "button" class= "Close" data-dismiss= "modal " aria-hidden= "true" >x</button>

class= "Modal-title" id= "Mymodallabel" > Modal box (modal) title

</div>

<div class= "Modal-body"> Add some text here </div>

<div class= "Modal-footer">

<button type= "button" class= "btn btn-default" data-dismiss="modal" > Close </button>

<button type= "button" class= "Btn btn-primary" > Commit Changes </button>

</div>

</div><!--/.modal-content--

</div><!--/.modal-dialog-- 2.3 options

Option Name	type/Default value	Data Property name	Description
Backdrop	Boolean or string ' static ' Default value: True	Data-backdrop	Specifies a static background that does not close the modal box when the user clicks outside the modal box.
Keyboard	Boolean Default value: True	Data-keyboard	When the escape key is pressed, the modal box is turned off and the key is not valid when set to False.
Show	Boolean Default value: True	Data-show	The modal box is displayed when initializing.
Remote	Path Default value: False	Data-remote	Use the JQuery. Load method to inject content into the body of the modal box. If you add an href with a valid URL, the contents of it are loaded. As shown in the following example: <a data-toggle= "modal" href= "remote.html" data-target= "#modal" > Please click on my </a>

2.4 Methods

Here are some useful ways to work with modal ().

Method	Describe	Instance
Options:.modal (Options)	Activates the content as a modal box. Accepts an optional option object.	$ (' #identifier '). Modal ({keyboard:false})
Toggle:.modal (' Toggle ')	Manually switch the modal box.	$ (' #identifier '). Modal (' toggle ')
Show:.modal (' show ')	Open the modal box manually.	$ (' #identifier '). Modal (' show ')
Hide:. Modal (' hide ')	Manually hide the modal box.	$ (' #identifier '). Modal (' hide ')

Example:

<script>

$ (function () {

$ (' #myModal '). Modal ({

Keyboard:true

})

});

</script> 2.5 Events

The following table lists the events that are used in modal boxes. These events can be used as hooks in the function.

Show.bs.modal

td>

Event	Description	Instance
Fires after calling the show method.	$ (' #identifier '). On (' Show.bs.modal ', function () {   //perform some actions ...})
Shown.bs.modal	Triggers When the modal box is visible to the user (will wait for the CSS transition to finish).	$ (' #identifier '). On (' Shown.bs.modal ', function () {   //perform some actions ...})
Hide.bs.modal	is triggered when the Hide instance method is called.	$ (' #identifier '). On (' Hide.bs.modal ', function () {   //perform some actions ...})
Hidden.bs.modal	Triggers when the modal box is completely hidden from the user.	$ (' #identifier '). On (' Hidden.bs.modal ', function () {   //perform some actions ...})

3. Toggle drop-down menu (Dropdown)

With the Data property: Add Data-toggle= "dropdown" to the link or button to toggle the drop-down menu as follows:

<div class= "Dropdown" >

<a data-toggle= "dropdown" href= "#" > Drop-down menu (dropdown) Trigger </a>

<ul class= "Dropdown-menu" role= "menu" aria-labelledby= "Dlabel" >

...

</ul></div>

If you need to keep the link intact (useful if your browser does not enable JavaScript), use the Data-target property instead of href= "#":

<div class= "Dropdown" >

<a id= "Dlabel" role= "button" data-toggle= "dropdown" data-target= "#" href= "/page.html" >

Drop-down menu (Dropdown) <span class= "Caret" ></span>

</a>

<ul class= "Dropdown-menu" role= "menu" aria-labelledby= "Dlabel" >

...

</ul></div>

Using javascript: To invoke the drop-down menu switch via JavaScript, use the following method:

$ ('. Dropdown-toggle '). Dropdown ()

4. Scrolling monitoring (Scrollspy) plugin

Add data-spy= "Scroll" and data-target to the element you want to listen to (usually body)

Adds a parent <div> for scrolling, a class or ID named Data-target

<body data-spy= "scroll" data-target= ". Navbar-example" >

<div class= "Navbar-example" >

<ul class= "Nav nav-tabs" >

...

</ul></div>

</body> 4.1 Events

The following table lists the events that are used in scrolling monitoring. These events can be used as hooks in the function.

Event	Describe	Instance
Activate.bs.scrollspy	This event is triggered whenever a new item is activated by a scrolling listener.	$ (' #myScrollspy '). On (' Activate.bs.scrollspy ', function () { Perform some action ...})

5. Tab (tab) plugin 5.1 via the Data property:

<ul class= "Nav nav-tabs" >

<li><a href= "#identifier" data-toggle= "tab" >Home</a></li>

</ul>

Via JavaScript:

$ (' #myTab a '). Click (function (e) {

E.preventdefault ()

$ (this). tab (' Show ')

}) 5.2 fade effect

If you need to set a fade effect for the tab page, add the. Fade to each. Tab-pane behind. The first tab must have an. In class to fade in to display the initial content, as shown in the following example:

<div class= "Tab-content" >

<div class= "Tab-pane fade in Active" id= "Home" >...</div>

<div class= "Tab-pane fade" id= "SVN" >...</div>

<div class= "Tab-pane fade" id= "ios" >...</div>

<div class= "Tab-pane fade" id= "Java" >...</div>

</div> 5.3 Events

The following table lists the events that are used in the tab plug-in. These events can be used as hooks in the function.

Event	Describe	Instance
Show.bs.tab	This event is triggered when the tab page is displayed, but must be before the new tab is displayed. Use Event.target and Event.relatedtarget respectively to navigate to the active tab and the previous Active tab page.	$ (' a[data-toggle= ' tab "] '). On (' Show.bs.tab ', function (e) { E.target//Active tab E.relatedtarget//previous active Tab})
Shown.bs.tab	This event is triggered when the tab page is displayed, but must be after a tab has been displayed. Use Event.target and Event.relatedtarget respectively to navigate to the active tab and the previous Active tab page.	$ (' a[data-toggle= ' tab "] '). On (' Shown.bs.tab ', function (e) { E.target//Active tab E.relatedtarget//previous active Tab})

6. hint tool (tooltip) plugin

The Hint tool (tooltip) plugin is not a pure CSS plugin like the drop-down menu discussed earlier and other plugins. To use the plugin, you must use jquery to activate it (read JavaScript). Use the following script to enable all prompt tools (tooltip) in the page:

$ (function () {$ ("[data-toggle= ' tooltip ']"). tooltip ();});

6.1 via the Data property:

To add a hint tool (tooltip), simply add data-toggle= "tooltip" to an anchor tag. The title of the anchor is the text of the Cue tool (tooltip). By default, the plugin sets the Cue tool (tooltip) at the top.

<a href= "#" data-toggle= "tooltip" title= "Example tooltip" > Please hover over me </a>

Via JavaScript:

Trigger hint tool (tooltip) via JavaScript:

$ (' #identifier '). ToolTip (Options)

6.2 Options

There are some options that are either added through the Bootstrap Data API (BOOTSTRAP) or called through JavaScript. These options are listed in the following table:

Option name	Type/Default value	Data Property Name	Describe
Animation	Boolean Default value: True	Data-animation	The hint tool uses the CSS gradient filter effect.
Html	Boolean Default value: False	Data-html	Inserts HTML into the hint tool. If the text method is False,jquery, it will be used to insert content into the DOM. If you are concerned about XSS attacks, use text.
Placement	String|function Default value: Top	Data-placement	Specifies how the cue tool (that is, Top|bottom|left|right|auto) is positioned. When auto is specified, the prompt tool is dynamically adjusted. For example, if placement is "auto left", the ToolTip will be displayed to the right as far as possible, and it will be displayed on the other side if circumstances are not allowed.
Selector	String Default value: False	Data-selector	If a selector is provided, the ToolTip object will be delegated to the specified target.
Title	String | function Default value: '	Data-title	If the  title  property is not specified, the