"In-depth understanding of bootstrap": CSS Components

Bootstrap three core of two.

Includes Glyphicon icon, drop-down menu (dropdown), button group .... Wait a minute.

One. Icon Font

BOOTSTRAP3 offers more than 200 free icon fonts. Thought it was a word.

Arial-hidden= "true"

. sr-only (Read only)

1. Introduction Method:

The I tag is an HTML italic tag that has been deprecated. You can also use span. Use must be based on the style of Glyphicon glyphicon-xxx two classes.

2. Implementation mechanism:

(1) Sprite technology: Allow lossless amplification, reduce the size of the picture, reduce the number of page requests.

The background image of the Web page is integrated into a picture and is displayed using the background positioning.

The position is to make the point coordinates, the right side is the X axis negative direction, the left side is the Y axis positive direction.

Background:url (path) no-repeat 0 0;

(2) @font-face, cached from the server, font characteristics (such as color can be set). CSS3 's Online font introduction is:

At the top of the CSS: import third-party font icons

@font-face{font    : Font name, (custom name, bypass network security word name)    src:url (font file path), url (font file path), url (font file path),...;}

@font-face at least. Woff,.eot two fonts in a different format. SVG fonts are also generally added.

3. Application

Apply the font icon on the button:

Login

This is the case where the font icon is applied on the button. You can add a space to login. Otherwise it will be squeezed together with the icons.

There is also a recommended way:

                                Login

is to put span in the button inside. If you do not want to see the span plus: sr-only (device readable, the user cannot see).

Again like:

                                Logout

Then look at the copyright icon--

Notice the principle of the font icon--let everyone use--plus the title attribute

Two. Drop-down menu dropdown (JQ support required)

1. Basic usage

The basic implementation of a drop-down menu is a button, a hidden Ul-li, a response to make an icon. Hidden through the toggle operation of jquery.

In bootstrap, the structure is the same, the difference is that only need to apply three basic statements can be implemented.

Class= "Dropdown"--wrapped on the outermost p, this is a drop-down menu.

UL class= "Dropdown-menu"--to the UL hidden up.

The light has the UL hide is not enough, button the binding behavior should be: data-toggle= "dropdown"

                                    Longitudinal line                                                                       Emil Chau                   li Zongsheng                   luo                   Zhang Zhenyue

The effect is immediately:

If I change the Class property of P to Dropup, the menu will become "pull-up menu".

Alignment--Used on UL

The default is left-justified.

Dropdown-menu-left|right

(1) Title

For example, for each member of Li plus Dropdown-header: but also add their own works

Note that Dropdown-header generally does not add a mark

(2) Split line

It is very tiring to look at this, and you can add split lines to distinguish levels.

(3) Disable

Do not let, for example, I want to ban "together beer", give him add class= "disabled"

The result is a no-click Status:

Different roles are usually applied.

"Example 4.1"

Now there is a drop-down menu, a text input box, styled as follows:

                                                                     Emil Chau afraid of            black            Rain Man                        li Zongsheng            mortal song            lonely unbearable                        Luo            love song 1980            lover Comrade                        Zhang Zhenyue            together beer            Highway                                                                                                     Login

Requirements: Enter "I am a beer member", click the btn button login, the menu "beer together" display is available, otherwise it is not selectable.

Implemented with jquery:

$ (function () {    $ (' #login '). Click (function () {        if (' #inputName '). val () = = ' I am a Beer member ') {            $ ("Li:contains (' Beer Together ') "). Removeclass (' disabled ');}        }    )

Three. Multilevel nested--3.x version has been deleted. (not see)

Four. Button group--p class= "Btn-group"

1. Basic usage

Apply Btn--group to a series of Button's containers

    Login    Register    Reset

There is a feeling of a cell phone.

2. You can also bulk modify the size: If you add btn-group-lg/sm/xs size parameters: For example, this is the effect of using BTN-GROUP-XS. No MD (SHI)

Note the size of the button group is set to priority greater than the button (since it is defined in the source code.) ）

3. Toolbars:

On the basis of the above code, assign a group, and then wrap the 2 group in a p, add class= "Btn-toolbar" to this P

            Login        Register        reset                login        Register        Reset

Plainly, it is Tasikmalaya.

The Apply button group can be used with the drop-down menu. That looks like a navigation.

    Login    Register    Reset                        longitudinal line                                       Emil Chau           li Zongsheng           luo           Zhang Zhenyue

4. Vertical Grouping btn-group-vertical

Use of P for button outsourcing.

    Login    Register    Reset                        longitudinal line                                       Emil Chau           li Zongsheng           luo           Zhang Zhenyue

However, there is not much vertical navigation in this way.

5. Adaptive Grouping button: btn-group-justify

Make the width of the button adaptive-note that this feature is limited to the btn! of the A mark type

            Login            Register            Reset

Four. Push-button drop-down menu (capsule-style button)

Rely on JS components, and generally used for implementation is split-type.

1. Basic Realization Ideas

A button group that actually consists of two buttons. One is the content, one displays the triangular symbol (class= "caret"). Just like the following:

    Search

Next, implement the menu click button and a ul-li sequence appears. Do--data-toogle= "dropdown" to the green button

    Search                            link1        link2        Link3

The button group control itself also supports the drop-down menu trigger, so no class=dropdown is required.

Similarly, add Dropup on Button-group to pop up.

Five. Input Frame Group--input-group series

Used for single-line text input boxes and other small components, such as span, to arrange. Only text input boxes are supported.

1. input-group-addon--add directly to the span label

            Email

You can also add a marquee (radio) and check box (checkbox) to span, but the style is pretty ugly.

It looks so magical, can it add icons such as the font for span? --Hug but really can't use.

2. input-group-btn--is added directly to the span tag, but it has a button inside it.

Why do you want to set up one more Input-group-addon?

The style of the. BTN is too complex. To avoid conflicts, you need to specify an additional class.

    Email        GO

Attention:

(1) INPUT-GROUP-BTN is not directly used, button buttons above, at the same time, button buttons to add at least a BTN class, the three are used in conjunction with.

(2) Input box group support definition Size--like Btn-group, support input-group-lg/sm/xs+ default four size style.

"Example 4.2"

On the basis of the above code, when the correct mailbox is entered (if (this.value!= "" &&! (this.value!= "" "&&!/.+@.+\.[ A-za-z]{2,4}$/.test (This.value))), the button becomes available (remove. Disabled), click can mail for this address method (usually used to submit a verification message). Implemented with a script.

The only thing to note is that the button buttons here should use Location.href as a jump.

$ (function () {    $ ('. Form-control:input '). KeyUp (function () {        if (this.value!= "" &&! (this.value!= "" " &&!/.+@.+\. [A-za-z] {2,4}$/.test (This.value))) {            $ (' button '). Removeclass (). addclass (' btn btn-success ');            var Address=this.value;            $ (' button '). Click (function () {                location.href= ' mailto: ' +address;            })        } else{            $ (' button '). html (' GO '). Removeclass (). addclass (' btn btn-warning '). addclass (' disabled ');})    })

3. Combining with other components

(1) Drop-down menu combined with addon

Modify the code below, add a data-toggle= "dropdown" directly to the button, and change the container from span to p.

        GO                    1        2        3

(2) Split-type button

Under INPUT-GROUP-BTN, the combination of buttons can also be split-type. There is no need to add btn-group to the parent container. It should also be noted that the difference is that the rounded corners of the buttons are removed.

Six. Navigation (Basic)

Navigation is the focus of all components. For navigation there is a applied preset class. Nav, but it does not produce an intuitive style, just a precondition for various navigation implementations. The structure of navigation is similar to normal, and the essence is realized by Ul-li system. The component's dynamic depends on jquery.

tab:

• 
  

Capsule-Type navigation:

Stacked Navigation (vertical tab):

Adaptive navigation (Justify):

1. tab ——. Nav-tabs

Implementation method:

Homepofilemessage

The style is as follows, with. Active to use the message is currently active.

2. Capsule-type navigation--nav-pills

A very vivid image of the word. The above code, the UL class changed to Nav-pills can be achieved.

3. Vertical label--nav-stacked

The same applies to UL. Note, however, that the. Active style does not take effect here, and the image is just a hover effect.

4. Justify on both sides

The entire NAV occupies one line of the screen and automatically assigns the width. Automatically arranges vertically when the screen is small. Similarly, the shadow on the way is just the mouse hover effect,

5. Preliminary Summary:

(1) The above four classes can be mixed and used. To use the. Active class style, you can use it under the Tab/pills framework.

Like class= "Nav nav-pills nav-justified"

"Example 4.3" pieced together A level two navigation:

Task Description: Put together a headset to navigate within a capsule to implement the drop-down menu function:

The following code can be written according to the framework

    This is capsule-type navigation class= "Nav nav-pills"            Home        pofile                                    Message                                                        link1                link2                Link3

However, it is found that the 7th line of Data-toggle already has a "tab", and then add "dropdown" cause both parties do not take effect. Try using the segmented button, but there is a difference between the performance of the button and the capsule button. So they can only take one. As for the active class, it can be implemented with JS later.

So the final code is:

    This is capsule-type navigation class= "Nav nav-pills"            Home        pofile                                    Message                                                        link1                link2                Link3

Further thinking: On this basis to make a level three menu. Level three menu requires. Dropdown-submenu implementation, but BOOTSTRAP3 has deleted the related class. In this case, you need to introduce the old version in the CSS. Dropdown-submenu style:

. dropdown-submenu {    position:relative;}. Dropdown-submenu > Dropdown-menu {    top:0;    left:100%;    Margin-top: -6px;    Margin-left: -1px;    -webkit-border-radius:0 6px 6px 6px;    -moz-border-radius:0 6px 6px;    border-radius:0 6px 6px 6px;}. Dropdown-submenu:hover >. dropdown-menu {    display:block;}. Dropdown-submenu > A:after {    display:block;    Content: "";    Float:right;    width:0;    height:0;    border-color:transparent;    Border-style:solid;    border-width:5px 0 5px 5px;    Border-left-color: #ccc;    margin-top:5px;    Margin-right: -10px;}. Dropdown-submenu:hover > A:after {    border-left-color: #fff;}. dropdown-submenu.pull-left {    float:none;}. Dropdown-submenu.pull-left >. dropdown-menu {left    : -100%;    margin-left:10px;    -webkit-border-radius:6px 0 6px 6px;    -moz-border-radius:6px 0 6px 6px;    border-radius:6px 0 6px 6px;}

Structure implementation: (Key statement on line 17th)

    This is capsule-type navigation class= "Nav nav-pills"            Home        pofile                                    Message                                                        link1 link2 link4                                            link4-1                                                                            Link4-2                                                            link4-2-1

Effect:

(2) Using JS plugin to achieve real, but only preliminary navigation interaction--

Under the UL-LI-A system, add attributes to the A tag: data-toggle= "tab"--note that stack navigation and adaptive navigation are not valid (or original effect)

(3) No click-or disabled class

Note that no click on the disabled class is just an effect, and cannot prevent a click event from triggering. Need to be redefined in JS.

Seven. Navigation bar (NavBar)

The navigation bar is characterized by a "bar" that is more than the navigation. A piece of background relative to navigation--

Below is the effect of the navigation bar based on the basic structure.

    This is the basic navigation bar  . Navbar-fixed-top can be fixed on top                    Brand                    disabled            normal            Message

If we add. navbar-fixed-top to the Nav label, it can be fixed to the top. But this is the essence of positioning, will overwrite the original content at the top.

Official advice: The original top content, or body padding-top set to 70px. If the top content is the header, offset 30px is enough.

Nav-header is not necessarily necessary.

Nav-brand used to place branding, line breaks are not lost

The color of the navigation bar is determined by two classes: (1). Navbar-dfault; (2). Navbar-inverse: Controls inverse color. For example, Add. Navbar-inverse after:

The implementation of the drop-down level two menu: As long as the Li Application dropdown system can be implemented:

                    Music                        link1        link2        Link3

1. Navigation bar Form

The most commonly used is the NetEase landing box, attached to the navigation bar above.

——

(1) The logical form is also part of the Ul-li, so the form is placed inside Li. However, controls such as input boxes are automatically populated with a width of 100% in the small screen, so add the Container-fluid class to Li (note that the container class does not)

(2) Next is the button, remember Input-group-btn no? The button should be squeezed with the input box.

2. Basic navigation elements

(1) Navigation bar button

——

One more style called navbar-btn.

button is also part of the Ul-li system, so also put in a Li, for example, do a ul class= "Navbar-right", below put an Li's suggestion button--

            Suggest

(2) Navigation bar text

——

The main is wide and high in line with the navigation bar. For example, in front of the form before you create a new Li, enter

Search

It shows the same style as the other menus.

Still not ideal, if search is and the navigation is a snug, should use Addon plus go!

relatively good point)

(3) Non-navigational connections

——

The performance is similar to the navigation bar text.

3. Position--do a fixed positioning

Arranged

. navbar-left/right

Fixed

. navbar-fixed-top/bottom

(Note the body's padding)

4. Adaptive navigation Bar

To implement a common menu button on a small screen phone is to put three ("three Bars") in a button. Then the setting is smaller when it appears. --button class= "Navbar-toggle"

Further writing can shrink the menu HTML, need to outsource a p to UL, and apply to it. Collapase. navbar-collapase

                                                                                                                                            Home                                                                                                                        Music

This way, home and music will shrink as the screen shrinks. However, click on the three-bar, do not pop-up menu, click Need Plug-in, and plug-in from the beginning of the interruption, so button buttons need to have data-toggle= "collapse" and data-target= "expanded menu." Expand the menu is a selector, to the UL parent named id= "#pNav", you can directly apply

Data-target= "#pNav".

The full code is as follows:

                                    Brand                                                                                                                                                                                                                        Home                                                                                        Music

If you want the menu to be offset to the right, you can use Navbar-right for UL

Eight. breadcrumb navigation

breadcrumb--very image of the name, all the way to sprinkle bread, can only return from the original bread. It's just a hierarchical path relationship, not a standard navigation.

    Level1    level2    level3    >level4

Nine. Paging navigation

When the product is more, the index can not fit, need to use category navigation.

• /

• 
  

• 
  

            Last        1        2        3        Next

