Bootstrap JavaScript Plugin

In BS3. In X, 12 JavaScript plugins are available, namely: Animation Transition (Transition), modal pop-up (Modal), drop-down menu (Dropdown), scroll detection (scrollspy), tab (tab), Cue box (tooltip), Pop-up Box (Popover), Warning box (alert), buttons (button), Folding (Collapse), rotating carousel (Carousel), positioning buoy (affix).

Due to various overtime, physical and mental exhaustion ...

Animation transitions

Source file: Transition.js

The animation transitions used all use the CSS3 syntax, so IE6, IE7, IE8 are not animated transitions.

Default with transition effect.

• Sliding and gradient effects of modal pop-up windows (Modal);
• The gradient Effect of the tab (tab);
• The gradient effect of the warning box (alert);
• Rotating rotation (Carousel) of the sliding effect.

Source

JS Source

transition.js Part Source code

Use the above code to determine whether the animation transition effect is supported.

CSS Source code

Fade CSS

Modal pop-up window

Source file: Modal.js

Modal pop-up (also known as popup,bootstrap-modal) is a feature that most interactive Web sites require, usually in the following ways:

• Prompt information, warning message, large text, etc.;
• Confirmation Prompt (multi-button);
• Display form elements (typically using AJAX operations and other functions);
• Other information that requires special display, such as zooming in on a thumbnail image.

Use

The popup component uses the 3-level div container element, which applies the modal, Modal-dialog, and modalcontent styles respectively. Then in the real content container modal-content includes the head (header), content (body), tail (footer) 3 parts, respectively, the application of 3 styles: Modal-header, Modal-body, Modal-footer.

Using Data-target

modal

JS will control the popup modal before adding a. Modal-backdrop is used to set the gray background.

Drop-down menu

Source file: Dropdown.js

The General drop-down menu is implemented on the navigation bar (NavBar) and Tabs (tab).

Implementation principle:

• Event binding is performed on all elements with the datatoggle= "dropdown" style when the page is loaded.
• The JavaScript event code is triggered when the user clicks a link or button with the data-toggle= "dropdown" style.
• The JavaScript event code adds an. Open style to the parent container (in this case: <li class= "dropdown" >).
• The default hidden. Dropdown-menu menu is displayed when the. Open style is externally available to achieve the desired effect.

Use:

• The menu style is consistent (i.e. written according to the requirements of section 4th).
• The data-toggle= "dropdown" style needs to be applied to the clicked Link or button so that JavaScript can monitor the Click event at initialization time

Using Data-target

dropdown

Scrolling detection

Source file: Scrollspy.js

The scroll detection (scrollspy) plugin automatically updates the corresponding navigation item in the navigation bar based on the scrolling position

Use:

• Sets the scrolling container, which sets the data-target= "#selector" data-spy= "scroll" property on the element to be detected.
• Sets the menu link container, which should match the ID (or style) of the container with the Data-target property.
• Within the menu container, there must be a. Nav-style element, and within it there are Li elements, and the A element contained within Li is the menu link that can detect the highlight, that is, the criteria for this selector such as. nav li > A.

Body with Data-spy.

Data-spy

Attention:

Although the submenu will be highlighted, but will not open, in order to show the effect, you need to manually open the drop-down menu to view.
The required navigation bar for the plugin can only function on ul/li elements that have a. Nav style

Options tab

Source file: Tab.js

Just like the tab settings in the Windows operating system that we normally use, click an option and the corresponding tab panel is displayed below

Use:

• tab navigation and tab panels are available at the same time (but not necessarily together).
• In the navigation link, set data-toggle= "tab", and also set data-target= "selector" (or href= "selector") so that you can find the Tab-pane panel corresponding to the selector when you click.
• Tab-pane to be placed in tab-content, with ID (or CSS style) and consistent with data-target= "selector" (or href= "selector")

Nav-tabs

Prompt box

Source file: Tooltip.js

Displays the relevant prompt when the mouse moves over a specific element. Similar to the title function of abbr, but the effect is more beautiful and practical.

Use

• The specified data-toggle= "ToolTip" property
• Then define what you want to display, and you can also use the Data-original-title in the title
• JS initialization. $ (' [data-toggle= ' tooltip '] '). tooltip ();

tooltip

Pop-up box

Source file: Popover.js

Pop-up box is actually a special kind of hint box, compared to just a title

Use

(The popup plugin uses almost exactly the same as the cue box component), and the only difference is the plugin name and the extra content field. For automatic initialization, as well as the cue box plug-in, you need to manually initialize

• The specified data-toggle= "PopOver" property
• Then define the title to be displayed, which can also be used in the title Data-original-title
• Define content that can also be data-content
• JS initialization. $ (' [Data-toggle=popover] '). PopOver ();

PopOver

Warning Box

Source file: Alert.js

is to provide the ability to click the X-Close warning box on the basis of the warning box component

Use

Alert

By default, if you do not set the Data-target property, the parent element container that contains the X-button element is closed, that is, the outer div element. Just make sure you set the data-dismiss= "alert".

Button

Source file: Button.js

The button plug-in provides a set of functions that control the various states of a button, such as a disabled state, a loaded state, a normal state, etc.

Use

Disabled states are not mentioned here.

Loading and loading complete control and display

btn

Folded

Source file: Collapse.js

When you click a trigger element, it is displayed (or hidden) in another collapsible area, and you can invert the display state when you click it again. (Classic accordion style)

Use

123	<!--  默认显示折叠区域--><aclass="btn btn-danger" data-toggle="collapse" data-target="#demo">触发改变</a><divid="demo" class="collapse in">折叠区域...</div>

123	<!--  默认隐藏折叠区域--> <buttonclass="btn btn-danger collapsed" data-toggle="collapse" data-target="#demo">按钮</button> <divid="demo" class="collapse ">折叠区域...</div>

Carousel

Source file: Carousel.js

Rotary Carousel (Carousel) This plugin has many kinds of translation, someone called the carousel, someone called the Carousel

1234567891011121314151617181920212223

<divdata-ride="carousel" class="carousel slide" id="carousel-container"> <!-- 图片容器 --> <divclass="carousel-inner">  <divclass="item">   <imgalt="第一张图" src="A" />  </div>  <divclass="item active">   <imgalt="第二张图" src="B" />  </div>  <divclass="item">   <imgalt="第三张图" src="C" />  </div> </div> <!-- 圆圈指示符 --> <olclass="carousel-indicators">  <lidata-slide-to="0" data-target="#carousel-container"></li>  <lidata-slide-to="1" data-target="#carousel-container"></li>  <lidata-slide-to="2" data-target="#carousel-container" class="active"></li> </ol> <!-- 左右控制按钮 --> <adata-slide="prev" href="#carousel-container" class="left carouselcontrol"> <spanclass="glyphicon glyphicon-chevron-left"></span> </a> <adata-slide="next" href="#carousel-container" class="right carouselcontrol"> <spanclass="glyphicon glyphicon-chevron-right"></span> </a></div>

The div with data-ride= "carousel" is the container for the carousel plug-in, the container ID is carousel-container and will be used later.

There are also two styles, where the carousel style is made into a style container, and the slide style is similar to fade, which is used to define the effects of the carousel.

1. The Carousel-inner style div contains several div styles containing item, in which we define the slide images we want to display.
2. Carousel-indicators style OL internally defines a set of identifiers that users can click to directly display the corresponding picture, Data-slide-to is an index, starting with 0.
3. The other two a links are a group that shows the left and right arrows that can change the direction of the carousel. The value of the Data-slide attribute defined on these two elements can only be prev or next

For pictures, the Carousel plugin also provides a caption description style (carousel-caption), followed by an IMG element definition. Examples such as the following

<div class= "Item Active" >        <div class= "Carousel-caption" >     
Locating buoys
Source file: Affix.js
The affix effect is the same as the navigation link on the left side of its official website.
<!-or set offset separately-->
<div data-spy= "Affix" data-offset-top= "data-offset-bottom=" > Navigation content </div>
<!-Merge Settings offset-->
<div data-spy= "affix" data-offset= "> Navigation content </div>
Data-offset-top represents a complete new page, dragging the scroll bar from the top down (that is, the page scrolls up) after this pixel,
The Data-offset-bottom, however, indicates how much distance (in this case 60 pixels) the bottom is, and it will begin to scroll.
Bootstrap JavaScript Plugin