bootstrap--components

1. Plugins--Overview

Bootstrap provides more than 10 plug-in functions (similar to the jQueryUI plugin library) based on jquery, each of which corresponds to a. js file, which can be referenced individually or as a whole (bootstrap.js).

The above more than 10 plugins can be called in two different formats:

(1) Traditional JS mode call: $ (...).   Dropdown (); $ (). tab (...);

(2) Call with data-* extended attribute mode: <a data-toggle= "dropdown" >

2. Plug-in-drop-down menu

(1) $ (). dropdown ();

(2) <a data-toggle= "dropdown" >

3. Plugins--Tabs (tab)

(1) $ (). tab ();

(2) <a data-toggle= "tab" >

4. Popup box provided by plugin--bootstrap

(1) Tool tip box (tooltip) data-toggle= "tooltip"

(2) Pop-up Box (popover) data-toggle= "PopOver"

(3) Warning box (alert)--small focus

<div class= "alert alert-Four colors alert-dismissible" >

<span class= "Close" data-dismiss= "alert" >&times;</span>

Xxxx

</div>

(4) Modal dialog box (modal)--small focus

Modal box definition: A subform is popped in the parent form, and if the subform is not closed, the parent form cannot get the focus, and it can also pass data between the parent and child forms. Window.alert ()/confirm ()/prompt () is a typical example. Required structure of the modal box:

<div class= "modal" > <!--translucent black matte Layer--

<div class= "Modal-dialog" > <!--width/position--

<div class= "Modal-content" > <!--Border/Background color/shadow-

<div class= "Modal-header" > Head </div>

<div class= "Modal-body" > Body </div>

<div class= "Modal-footer" > Tail </div>

</div>

</div>

</div>

Displays a modal box:

1) <a href= "#模态框ID" data-toggle= "modal" >

2) <button data-toggle= "modal" data-target= "#模态框ID" >

5. Plug-in-folding effect (collapse)

Triggers a collapsed effect:

1) <a href= "#折叠元素ID" data-toggle= "collapse" >

2) <button data-toggle= "collapse" data-target= "#折叠元素ID" >

------------------------------------------------------------------------------

<div id= "collapse element id" class= "collapse in" >

</div>

Two expansion uses for folding components:

(1) Accordion (accordion)

(2) Effect of the responsive navigation bar on the phone screen

6. Plugin--Carousel Advertising (carousel)--Small focus

Its structure is more complex, only need to remember the root class when writing:. Carousel

<div class= "Carousel" >

<div class= "Carousel-inner" >

<div class= "Item Active" >

</div>

</div>

</div>

7. Plug-in-additional navigation (affix)

<div data-spy= "affix" data-offset-top= ">"

<ul class= "Nav nav-pills" >

</div>

9. Plug-in-scroll monitoring (Scrollspy)--Learn

As the content of the page scrolls, items in a navigation are automatically changed. Active location.

Implementation ideas:

(1) The page must first have a navigation menu (. Nav)-where you can define a menu item to be. Active

(2) The HREF attribute value of the hyperlink in the navigation menu must be the same as an anchor name in the page

(3) A listener function to add scrolling events to the page

body.onscroll= function () {

if (the distance of the body scroll = = = The distance from the top of an anchor point) {

The parent element of the hyperlink corresponding to this anchor point Li is added. Active;

}

}

bootstrap--components