Shulou(Shulou.com)06/02 Report--

This article will explain in detail what built-in plug-ins are in bootstrap. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Bootstrap built-in plug-ins are: 1, transition effects plug-in; 2, modal box plug-in; 3, drop-down menu plug-in; 4, scroll monitor plug-in; 5, tab plug-in; 6, prompt tool plug-in; 7, pop-up box plug-in; 8, warning box plug-in; 9, button plug-in; 10, folding plug-in; 11, carousel plug-in; 12, additional navigation plug-in.

Operating environment of this tutorial: Windows7 system, bootsrap3.3.7 version, DELL G3 computer

The built-in plug-ins for bootstrap are:

Bootstrap transition effect

Bootstrap modal box

Bootstrap drop-down menu

Bootstrap rolling monitoring

Bootstrap tab

Bootstrap prompt tool

Bootstrap pop-up box

Bootstrap warning box

Bootstrap button

Bootstrap folding

Bootstrap rotation

Bootstrap additional navigation

Bootstrap transition effects (Transition) plug-in

The transition effects (Transition) plug-in provides simple transition effects.

If you want to reference the plug-in's functionality separately, you need to reference transition.js in addition to other JS files. Alternatively, you can reference bootstrap.js or a compressed version of bootstrap.min.js.

Transition.js is the basic helper class for transitionEnd events and CSS transition effects simulators. It is used by other plug-ins to check CSS transition support and to get transition effects.

Bootstrap Mode Box (Modal) plug-in

A Modal is a child form that overrides the parent form. Typically, the goal is to display content from a separate source, and there can be some interaction without leaving the parent form. Sub-forms can provide information, interactions, and so on.

If you want to reference the functionality of the plug-in separately, you need to reference modal.js. Alternatively, you can reference bootstrap.js or a compressed version of bootstrap.min.js.

Usage:

You can toggle the hidden content of the Modal plug-in:

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

With JavaScript: using this technique, you can call a modal box with id= "identifier" through a simple line of JavaScript:

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

Bootstrap drop-down menu (Dropdown) plug-in

Using the drop-down menu (Dropdown) plug-in, you can add a drop-down menu to any component, such as navigation bars, tabs, capsule navigation menus, buttons, and so on.

If you want to reference the functionality of the plug-in separately, you need to reference dropdown.js. Or reference bootstrap.js or a compressed version of bootstrap.min.js.

Bootstrap Rolling Monitor (Scrollspy) plug-in

The scroll monitoring (Scrollspy) plug-in, that is, the automatic update navigation plug-in, automatically updates the corresponding navigation target according to the position of the scroll bar. The basic implementation is to add .active class to the location navigation bar based on the scroll bar as you scroll.

Usage

You can add scrolling monitoring behavior to the top navigation:

Through the data attribute: add a data-spy= "scroll" to the element you want to listen on (usually body). Then add the attribute data-target of the ID or class of the parent element of the Bootstrap .nav component. In order for it to work, you must make sure that there is an element in the body of the page that matches the ID that you want to listen on the link.

.........

With JavaScript: you can use the JavaScript call to scroll listen, select the elements you want to listen for, and then call the .scrollables () function:

$('body') .scrollspy ({target:' .navbar-example'})

Bootstrap tab (Tab) plug-in

By combining some data attributes, you can easily create a tab interface. With this plug-in, you can place content in tabs or capsule tabs or even drop-down menu tabs.

Bootstrap prompt tool (Tooltip) plug-in

The Tooltip tool is very useful when you want to describe a link. The Tooltip plug-in is inspired by jQuery.tipsy written by Jason Frame. The Tooltip plug-in has made a lot of improvements, such as not relying on images, but instead using CSS for animation and using the data attribute to store title information.

Bootstrap pop-up box (Popover) plug-in

A pop-up box (Popover), similar to a tooltip (Tooltip), provides an extended view. To activate the pop-up box, the user can simply hover the mouse over the element. The contents of the pop-up box can be fully populated with Bootstrap data API (Bootstrap Data API). This method relies on tooltips (tooltip).

Bootstrap warning Box (Alert) plug-in

Alert messages are mostly used to display information such as warning or confirmation messages to end users. Using the warning box (Alert) plug-in, you can add a dismiss feature to all warning box messages.

Bootstrap Button (Button) plug-in

Buttons (Button) are introduced in the chapter on Bootstrap buttons. Through the Button plug-in, you can add interactions, such as controlling button state, or creating button groups for other components, such as toolbars.

Bootstrap folding (Collapse) plug-in

The Collapse plug-in makes it easy to fold the page area. Whether you use it to create collapsible navigation or content panels, it allows a number of content options.

Bootstrap Carousel plug-in

The Bootstrap Carousel plug-in is a flexible, responsive way to add sliders to your site. In addition, the content is flexible enough to be images, embedded frames, videos, or any other type of content you want to place.

Bootstrap add-on Navigation (Affix) plug-in

The additional navigation (Affix) plug-in allows you to specify that it is fixed at a certain location on the page. A common example is the social icon. They will start somewhere, but when the page clicks a tag, it will be locked in a location and will not scroll with the rest of the page.

This is the end of this article on "what built-in plug-ins are in bootstrap". I hope the above content can be helpful to you so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.