Bootstrap plugin
1. Bootstrap Transition plug-in
The Transition plugin provides simple transition effects. If you want to reference the plugin's functionality individually, you will also need to reference transition.js in addition to other JS files. Or, as mentioned in the Bootstrap plugin overview chapter, you can refer to bootstrap.js or compressed versions of bootstrap.min.js.
Transition.js is the basic helper class for transitionEnd event and CSS transition effect simulator. It is used by other plug-ins to check CSS transition effect support and to obtain transition effect.
Use Cases
Transition plug-in use cases:
(1) Modal dialog box with slide or fade effect. For specific examples, see the Bootstrap Modal Box (Modal) plug-in.
(2) Tag page with fading effect. For specific examples, see the Bootstrap tab page (Tab) plug-in.
(3) Warning box with fading effect. For specific examples, see the Bootstrap warning box (Alert) plug-in.
(4) Carousel board with slide effect. For specific examples, see the Bootstrap Carousel plug-in.
2. Bootstrap modal box (Modal) plug-in
A modal box (Modal) is a child form that is overlaid on the parent form. Typically, the purpose is to display content from a separate source, which can have some interaction without leaving the parent form. The subform can provide information, interaction, etc.
If you 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 refer to bootstrap.js or compressed versions of bootstrap.min.js.
(1) Usage
You can toggle the hidden contents of the Modal Box (Modal) plugin:
A. Through 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 to switch (with id="identifier").
B. Through JavaScript: Using this technique, you can call a modal box with id="identifier" through a simple line of JavaScript:
$('#identifier').modal(options)
<h2>Create a modal box (Modal)</h2><!-- Button triggers a modal box --><button data-toggle="modal" data-target="#myModal"> Start demonstrating a modal box</button><!-- Modal box (Modal) --><div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-hidden="true"> × </button> <h4 id="myModalLabel"> Modal Box (Modal) Title</h4> </div> <div> Add some text here</div> <div> <button type="button" data-dismiss="modal">Close</button> <button type="button"> Submit changes</button> </div> </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 at the above code carefully, you will find that in the <button> tag, data-target="#myModal" is the target of the modal box you want to load on the page. You can create multiple modal boxes on the page and then create different triggers for each modal box. Now, it's obvious that you can't load multiple modules at the same time, but you can create multiple on the page to load at different times.
C. Two points to be noted in the modal box:
The first is .modal, which is used to recognize the content of <div> as a modal box.
The second is .fade class. When the modal box is switched, it causes the content to fade.
D. aria-labelledby="myModalLabel", this property refers to the title of the modal box.
E. The property aria-hidden="true" is used to keep the modal window invisible until the trigger is triggered (such as clicking on the relevant button).
F, <div>, modal-header is a class that defines styles for the head of a modal window.
G, class="close", close is a CSS class that is used to style the close button of a modal window.
H, data-dismiss="modal", is a custom HTML5 data attribute. Here it is used to close the modal window.
I, class="modal-body", is a CSS class of Bootstrap CSS, used to style the body of a modal window.
J, class="modal-footer", is a CSS class of Bootstrap CSS, used to style the bottom of the modal window.
K, data-toggle="modal", HTML5 custom data attribute data-toggle is used to open a modal window.
(2) Options
There are options to customize the appearance and feel of a modal window, which are passed through data properties or JavaScript. The following table lists these options:
(3) Method
Here are some useful methods that can be used with modal().
(4) Event
The following table lists the events to be used in the modal box. These events can be used as hooks in functions.
3. Bootstrap drop-down menu (Dropdown) plug-in
The Bootstrap drop-down menu chapter explains the drop-down menu, but does not involve the interaction part. This chapter will explain the interaction of the drop-down menu in detail. Using the dropdown plugin, you can add dropdown menus to any component (such as navigation bars, tabs, capsule navigation menus, buttons, etc.).
If you want to reference the functionality of the plugin separately, then you need to reference dropdown.js. Or, as mentioned in the Bootstrap plugin overview chapter, you can refer to bootstrap.js or compressed versions of bootstrap.min.js.
(1) Usage
You can toggle the hidden content of the dropdown menu (Dropdown) plugin:
Toggle the drop-down menu via data attribute: add data-toggle="dropdown" to the link or button.
A. Use data attribute: add data-toggle="dropdown" to the link or button to switch the drop-down menu, as shown below:
<div> <a data-toggle="dropdown" href="#">Dropdown trigger</a> <ul role="menu" aria-labelledby="dLabel"> </ul></div>
B. If you need to keep the link intact (useful when the browser does not enable JavaScript), use the data-target property instead of href="#":
<div> <a id="dLabel" role="button"data-toggle="dropdown" data-target="#" href="/page.html"> Dropdown menu (Dropdown) <span></span> </a> <ul role="menu" aria-labelledby="dLabel"> </ul></div>
C. Through JavaScript: Call the drop-down menu through JavaScript, please use the following method: $('.dropdown-toggle').dropdown()
(2) Method
There is an easy way to show or hide the drop-down menu. $().dropdown('toggle')
4. Bootstrap Scrollspy plug-in
The scroll monitoring (Scrollspy) plug-in, that is, the automatic update of the navigation plug-in, will automatically update the corresponding navigation target according to the position of the scroll bar. Its basic implementation is to add .active class to the navigation bar based on the scrollbar position as you scroll.
(1) Usage
You can add scroll listening behavior to the top navigation:
A. Through the data attribute: Add data-spy="scroll" to the element you want to listen to (usually body). Then add the attribute data-target with the ID of the parent element of the Bootstrap .nav component or the class's property. In order for it to work properly, you must make sure that there are elements in the body of the page that match the ID of the link you want to listen to.
<body data-spy="scroll" data-target=".navbar-example"> ... <div> <ul> ... </ul> </div> ...</body>
B. Through JavaScript: You can call scroll monitoring through JavaScript, select the element to be listened to, and then call the .scrollspy() function:
$('body').scrollspy({ target: '.navbar-example' })
(2) Options
Passed through data attributes or JavaScript. The following table lists these options:
(3) Method
.scrollspy('refresh'): When calling the scrollspy method through JavaScript, you need to call the .refresh method to update the DOM. This is useful when any element of the DOM is changed (i.e., you add or remove some elements). Here is the syntax for using this method.
$('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh')})(4) Event
The following table lists the events to be used in scrolling listening. These events can be used as hooks in functions.
5. Bootstrap Tab (Tab) plugin
Tabs (Tab) are introduced in the Bootstrap Navigation Elements chapter. By combining some data properties, you can easily create a tab interface. With this plugin, you can place content in a tab page or a capsule tab page or even a drop-down menu tab page.
(1) Usage
You can enable tab pages in two ways:
A. Through the data attribute: You need to add data-toggle="tab" or data-toggle="pill" to the anchor text link. Adding nav and nav-tabs classes to ul will apply the Bootstrap tag style, adding nav and nav-pills classes to ul will apply the Bootstrap capsule style.
<ul>
<li> <a href="#identifier" data-toggle="tab" > Home</a></li>
...
</ul>
B. Through JavaScript: You can use Javascript to enable tab pages, as shown below:
$('#myTab a').click(function (e) { e.preventDefault() $(this).tab('show')})The following example demonstrates the activation of individual tabs in different ways:
// Select the tab page $('#myTab a[href="#profile"]').tab('show')// Select the first tab page $('#myTab a:first').tab('show')// Select the last tab page $('#myTab a:last').tab('show')// Select the third tab page (indexed from 0) $('#myTab li:eq(2) a').tab('show')(2) Fade effect
If you need to set a fade effect for the tab, add .fade to each .tab-pane. The first tab must be added with a .in class to fade in to display the initial content, as shown in the following example:
<div> <div id="home">...</div> <div id="svn">...</div></div>
(3) Method
.$().tab: This method activates tab elements and content containers. The tab page needs to use a data-target or a href pointing to the container node in the DOM.
<ul id="myTab"> <li><a href="#identifier"data-toggle="tab">Home</a></li> .....</ul><div> <div id="home">...</div> ....</div><script> $(function () { $('#myTab a:last').tab('show') })</script>(4) Event
The following table lists the events to be used in the Tab (Tab) plugin. These events can be used as hooks in functions.
6. Bootstrap Prompt Tool (Tooltip) Plugin
The Tooltip is very useful when you want to describe a link. The Tooltip plugin is inspired by jQuery.tipsy written by Jason Frame. The Tooltip plug-in has made many improvements, such as not relying on images, but instead using CSS to achieve animation effects and using data attributes to store title information.
(1) Usage
The Tooltip plug-in generates content and tags based on needs. By default, the tooltip is placed behind their trigger elements. There are two ways you can add a prompt tool (tooltip):
A. Through the data attribute: If you need to add a prompt tool (tooltip), just add data-toggle="tooltip" to an anchor tag. The title of the anchor is the text of the prompt tool (tooltip). By default, the plug-in sets the tooltip at the top.
<a href="#" data-toggle="tooltip" title="Example tooltip" > Please hover over my</a>
A. Through JavaScript: trigger the prompt tool (tooltip) through JavaScript: $('#identifier').tooltip(options)
The Tooltip plugin is not like the drop-down menus and other plug-ins discussed earlier, it is not a pure CSS plug-in. To use the plugin, you must activate it using jquery (read javascript). Use the following script to enable all the prompt tools (tooltips) in the page:
$(function () { $("[data-toggle='tooltip']").tooltip(); });
<a href="#"data-toggle="tooltip" data-placement="left"> Tooltip on the left</a>. <a href="#" data-toggle="tooltip" data-placement="top"> Tooltip on the top</a>.<button type="button"data-toggle="tooltip" data-placement="bottom"title="Tooltip"> Tooltip on the bottom</button>
(2) Options
There are some options that are added through the Bootstrap Data API (Bootstrap Data API) or called through JavaScript. The following table lists these options:
(3) Method
Here are some useful methods in Tooltip plug-ins:
(4) Event
The following table lists the events to be used in the Tooltip plug-in. These events can be used as hooks in functions.
7. Bootstrap Popover Plug-in
A popover is similar to a tooltip, providing an extended view. To activate the pop-up box, the user just needs to hover over the element. The contents of the pop-up box can be fully populated using the Bootstrap Data API (Bootstrap Data API). This method relies on tooltips. If you want to reference the functionality of the plugin separately, then you need to reference popover.js, which relies on the Tooltip plugin.
(1) Usage
The popover plugin generates content and tags based on needs. By default, popovers are placed behind their trigger elements. You can add popovers in two ways:
A. Through the data attribute: If you want to add a popover, just add data-toggle="popover" to an anchor/button label. The title of the anchor is the text of the popover. By default, the plugin sets the popover at the top.
<a href="#" data-toggle="popover" title="Example popover">
Please hover above me
</a>
B. Through JavaScript: Enable popover (popover) through JavaScript: $('#identifier').popover(options)
The popover plugin is not like the drop-down menus and other plug-ins discussed earlier, it is not a pure CSS plug-in. To use the plugin, you must activate it using jquery (read javascript). Use the following script to enable all popovers in the page:
$(function () { $("[data-toggle='popover']").popover(); });
<button type="button"
data-container="body" data-toggle="popover" data-placement="left" data-content="some content in Popover on the left" > Popover on the left
</button>
(2) Options
There are some options that are added through the Bootstrap Data API (Bootstrap Data API) or called through JavaScript. The following table lists these options:
(3) Method
Here are some useful methods in popover plugins:
(4) Event
The following table lists the events to be used in the pop-up (Popover) plug-in. These events can be used as hooks in functions.
8. Bootstrap warning box (Alert) plug-in
Alert messages are mostly used to want the end user to display information such as warning or confirmation messages. Using the Alert plugin, you can add a cancelable feature to all warning box messages.
(1) Usage
You can enable the dismissal function of the warning box in the following two ways:
A. Through data attributes: Add a cancelable function through the Data API (Data API). Just add data-dismiss="alert" to the close button, and the closing function will be automatically added to the warning box.
<a data-dismiss="alert" href="#" aria-hidden="true" >
×
</a>
B. Through JavaScript: Add cancelled functions through JavaScript: $(".alert").alert()
<div> <a href="#"data-dismiss="alert"> × </a> <strong>Warning! </strong>Your network connection has a problem. </div>
(2) Method
Here are some useful methods in the Alert plugin:
(3) Event
The following table lists the events to be used in the Alert plug-in. These events can be used as hooks in functions.
9. Bootstrap Button Plugin
With the Button plugin, you can add some interactions, such as controlling the button status, or creating button groups for other components such as toolbars.
(1) Loading status
To add loading status to the button, simply add data-loading-text="Loading..." to the button element as its attribute.
<button id="fat-btn"data-loading-text="Loading..." type="button"> Loading status</button><script> $(function() { $(".btn").click(function() { $(this).button('loading').delay(1000).queue(function() { $(this).button('reset');}); }); </script>(2) Single switch
To activate the switch of a single button (i.e., to change the normal state of the button to the press state, and vice versa), just add data-toggle="button" to the button element as its attribute.
<button type="button" data-toggle="button"> Single switch</button>
(3) Checkbox
You can create a checkbox group and add a toggle to the checkbox group by adding the data attribute data-toggle="buttons" to btn-group.
<divdata-toggle="buttons"> <label><input type="checkbox"> Option 1 </label> <label><input type="checkbox"> Option 3 </label></div>
(4) Radio button (Radio)
Similarly, you can create a radio button group and add a toggle for the radio button group by adding the data attribute data-toggle="buttons" to btn-group.
(5) Method
Here are some useful methods in Button plugins:
10. Bootstrap Collapse Plug-in
The Collapse plugin makes it easy to fold the page area. Whether you use it to create a collapsed navigation or a content panel, it allows for a lot of content options.
(1) Create a foldable grouping or folding panel, as shown below:
<div id="accordion"> <div> <div> <h4> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Click me to expand, click me to collapse again. Part 1</a> </h4> </div> <div id="collapseOne"> <div> Nihil anim keffiyeh helvetica, craft beer labor wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div></div>
A. data-toggle="collapse" Add to the link of the component you want to expand or collapse.
The B, href or data-target property is added to the parent component, and its value is the id of the child component.
C. The data-parent property adds the id of the folded panel to the link of the component to be expanded or collapsed.
(2) Create a simple collapsible component without the accordion tag, as shown below:
<button type="button"data-toggle="collapse" data-target="#demo"> Simple foldable component</button><div id="demo"> Nihil anim keffiyeh helvetica, craft beer labor wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.</div>
(3) Usage
The following table lists the Collapse plug-in for handling heavy scaling:
You can use the Collapse plugin in two ways:
A. Through data attribute: add data-toggle="collapse" and data-target to the element to automatically assign controls to foldable elements. The data-target property accepts a CSS selector and applies a collapse effect to it. Make sure to add class .collapse to the collapsible element. If you want it to be on by default, add an extra class .in.
To add a folded panel-like grouping management to the foldable control, add the data property data-parent="#selector".
B. Through JavaScript: The collapse method can be activated through JavaScript, as shown below: $('.collapse').collapse()
11. Bootstrap Carousel Plugin
The Bootstrap Carousel plug-in is a flexible and responsive way to add sliders to a site. Besides that, the content is flexible enough to be an image, an embedded frame, a video, or any other type of content you want to place.
<div id="myCarousel"> <!-- Carousel indicator--> <ol> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Carousel project--> <div> <img src="/wp-content/uploads/2014/07/slide1.png"> <div>Title 1</div> </div> <div> <img src="/wp-content/uploads/2014/07/slide2.png"> <div>Title 2</div></div> <div> <img src="/wp-content/uploads/2014/07/slide3.png"> <div>Title 3</div> </div></div> <!-- Carousel Navigation--> <a href="#myCarousel" data-slide="prev">‹</a> <a href="#myCarousel" data-slide="next">›</a></div>
(1) Usage
A. Through data attribute: Using data attributes, it is easy to control the position of the carousel.
The property data-slide accepts the keyword prev or next to change the position of the slide relative to the current position.
Use data-slide-to to a raw sliding index to the bottom of the carousel bed. data-slide-to="2" will move the slider to a specific index, and the index counts from 0.
The data-ride="carousel" property is used to mark the carousel that starts animation playback when the page is loaded.
B. Through JavaScript: Carousel can be called manually through JavaScript, as shown below: $('.carousel').carousel()
(2) Options
There are some options that are passed through data properties or JavaScript. The following table lists these options:
(3) Method
Here are some useful methods in Carousel plug-ins:
(4) Event
The following table lists the events to be used in the Carousel plug-in. These events can be used as hooks in functions.
12. Bootstrap additional navigation (Affix) plug-in
The additional navigation (Affix) plugin allows a <div> to be pinned somewhere on the page. You can also toggle between turning on or off using the plugin. A common example is social icons. They will start somewhere, but when the page clicks on a mark, the <div> will lock in somewhere and will not scroll along with the rest of the page.
(1) Usage
You can use the attached navigation (Affix) plug-in via data properties or via JavaScript.
Through data attributes: If you need to add additional navigation (Affix) behavior to the element, you only need to add data-spy="affix" to the element you need to listen to. Use offsets to define when toggle elements' locking and movement.
(2) Through JavaScript: You can manually add additional navigation (Affix) to an element through JavaScript, as shown below:
$('#myAffix').affix({ offset: { top: 100, bottom: function () { return (this.bottom = $('.bs-footer').outerHeight(true)) } }})(3) Positioning through CSS
In both of the above ways to use the Affix plug-in, you must locate content via CSS. The additional navigation (Affix) plug-in switches between three classes, each of which presents a specific state: .affix, .affix-top, and .affix-bottom. Please follow the steps below to set up your own CSS for these three states (not relying on this plugin).
A. At the beginning, the plug-in adds .affix-top to indicate the element at its topmost position. No CSS positioning is required at this time.
B. When scrolling through the element that adds additional navigation (Affix) should be triggered. At this time, .affix will replace .affix-top, and set position: fixed; (provided by Bootstrap's CSS code).
C. If the bottom offset is defined, when the scroll reaches this position, replace .affix with .affix-bottom. Since the offset is optional, if the offset is set, an appropriate CSS is required to be set at the same time. In this case, add position: absolute; if necessary.
(4) Options
There are some options that are passed through data properties or JavaScript. The following table lists these options:
This article has been compiled into the "Bootstrap Plugin Usage Tutorial", and everyone is welcome to learn and read.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.