Foundation of Bootstrap-3 components

One, the component

Font icon

-Precautions

-Do not mix with other components

-works only on elements that have empty content

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/7E/89/wKiom1cDhP3hhbWQAAANOyz7fII171.png "title=" Web.png "alt=" Wkiom1cdhp3hhbwqaaanoyz7fii171.png "/>

-Accessibility

Aria-hidden= "true"

Aria-label= ""

. sr-only

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/7E/86/wKioL1cDhY6y4rc9AAAGZDuMsak041.png "title=" Web.png "alt=" Wkiol1cdhy6y4rc9aaagzdumsak041.png "/>

Drop-down menu

-Basic format

-<div class= "Dropdown|dropup" >

<button data-toggle= "Dropdown" >

<ul class= "Dropdown-menu" >

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/7E/86/wKioL1cDhtSzba0OAAASRdkI2mE863.png "title=" Web.png "alt=" Wkiol1cdhtszba0oaaasrdki2me863.png "/>

-Align

-Dropdown-menu-left | Right

-Title

-<li class= "Dropdown-header" >

-Split Line

-<li class= "divider" ></li>

-Disable

-<li class= "disabled" >

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/7E/86/wKioL1cDhuygkQQrAAAKfAwpiO0281.png "title=" Web.png "alt=" Wkiol1cdhuygkqqraaakfawpio0281.png "/>

Button Group

-Basic Button Group

-<div class= "Btn-group" >

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/7E/86/wKioL1cDieWx6j3IAAAFxqthB8c978.png "title=" Web.png "alt=" Wkiol1cdiewx6j3iaaafxqthb8c978.png "/>

-button Toolbar

-<div class= "Btn-toolbar" >

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7E/8A/wKiom1cDiVaygqCQAAAGBOnIEFE019.png "title=" Web.png "alt=" Wkiom1cdivaygqcqaaagboniefe019.png "/>

-Size

-. Btn-group-lg | SM | Xs

-Self-adapting

-Vertical arrangement

-<div class= "btn-group-vertical" >

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M02/7E/8A/wKiom1cDiXHh57-BAAAL2WzPdy0385.png "title=" Web.png "alt=" Wkiom1cdixhh57-baaal2wzpdy0385.png "/>

Push-button drop-down menu

-Button drop-down menu dependent drop-down menu plugin

-Single button drop-down menu

-<div class= "Btn-group" >

<button data-toggle= "Dropdown" >

<ul class= "Dropdown-menu" >

-Split button drop-down menu

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/7E/8A/wKiom1cDikex2H_hAAAWw3xYG0I828.png "title=" Web.png "alt=" Wkiom1cdikex2h_haaaww3xyg0i828.png "/>

-Size

-Pop-up menu

-<div class= "Btn-group dropup" >

List groups

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/7E/8A/wKiom1cDiq2DZd7ZAAGkvn-0IOE747.png "title=" Web.png "alt=" Wkiom1cdiq2dzd7zaagkvn-0ioe747.png "/>

Well

-use well for elements with simple effects of embedding (inset)

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/7E/8A/wKiom1cDi0CinjA4AAA5U1AhmQU504.png "title=" Web.png "alt=" Wkiom1cdi0cinja4aaa5u1ahmqu504.png "/>-<div class=" Well well-lg ">

-<div class= "Well well-sm" >

Page out

-<nav>

-<ul class= "pagination" >

-Status

-<li class= "disabled" >

<li><span></li>

-<li class= "Active" >

-Size

-. Pagination-lg

-. Pagination-sm

-Flip Page

-<ul class= "pager" >

<li class= "Previous" >

<li class= "Next" >

Label

-<span class= "label Label-default" >Default</span>

-<span class= "label Label-primary" >Primary</span>

-<span class= "label label-success" >Success</span>

-<span class= "label Label-info" >Info</span>

-<span class= "label label-warning" >Warning</span>

-<span class= "label Label-danger" >Danger</span>

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/7E/87/wKioL1cDjYHRD5OcAAA6KSGDDGI346.png "title=" Web.png "alt=" Wkiol1cdjyhrd5ocaaa6ksgddgi346.png "/>

Badge

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/7E/8A/wKiom1cDjVez0FUpAABcHaiIhRk002.png "title=" Web.png "alt=" Wkiom1cdjvez0fupaabchaiihrk002.png "/>

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/7E/87/wKioL1cDjhbTSF-yAAB3QhbdLMo045.png "title=" Web.png "alt=" Wkiol1cdjhbtsf-yaab3qhbdlmo045.png "/>

Giant Curtain

-Display key content on the site

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/7E/87/wKioL1cDjq2BG-xFAAEmgn1LV4w530.png "title=" Web.png "alt=" Wkiol1cdjq2bg-xfaaemgn1lv4w530.png "/>

Page Header

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/7E/87/wKioL1cDjzXyosYpAABcMIPT6iI215.png "title=" Web.png "alt=" Wkiol1cdjzxyosypaabcmipt6ii215.png "/>650" this.width=650; "src=" http://s3.51cto.com/wyfs02/M02/ 7e/8a/wkiom1cdjqyrvqu8aac0nbzcv-o309.png "title=" Web.png "alt=" Wkiom1cdjqyrvqu8aac0nbzcv-o309.png "/>

Thumbnail images

-Based on grid system implementation

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/7E/87/wKioL1cDkJmiEp-yAACOOPkzZME838.png "title=" Web.png "alt=" Wkiol1cdkjmiep-yaacoopkzzme838.png "/>

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/7E/8A/wKiom1cDkCGAkhaCAACbWCGKMK0398.png "title=" Web.png "alt=" Wkiom1cdkcgakhacaacbwcgkmk0398.png "/>

-Custom Content

-

-<div class= "caption" >

<p>

Warning Box

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/7E/8B/wKiom1cDkLbRTQGwAABmSlHIuxk675.png "title=" Web.png "alt=" Wkiom1cdklbrtqgwaabmslhiuxk675.png "/>650" this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/ 7e/87/wkiol1cdkxsrpaztaabjbt5uvh0057.png "title=" Web.png "alt=" Wkiol1cdkxsrpaztaabjbt5uvh0057.png "/>650" this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/7E/87/wKioL1cDkY_iARqLAABmtotdQOM051.png "title=" Web.png " alt= "Wkiol1cdky_iarqlaabmtotdqom051.png"/><a href= "#" class= "Alert-link" >

Progress bar

-<div class= "Progress" >

-<div class= "Progress-bar" style= "width:60%;" >

-Scenario

progress-bar-sucess | info | Danger | Success

-Striped

progress-bar-striped

-Animation

Active

-Stacking

Panel

-<div class= "Panel" >

-. Panel-primary

-. Panel-sucess

-. Panel-info

-. panel-warning

-. Panel-danger

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/7E/8B/wKiom1cDkt-RUz-cAACmjMEuLwk814.png "title=" Web.png "alt=" Wkiom1cdkt-ruz-caacmjmeulwk814.png "/>

Navigation

-Rely on JavaScript tab plugin to use Navigation on tab page

-tab page

-<ul class= "Nav nav-tabs" >

<li role= "Presentation" class= "active" >

-Capsule-Type label page

-<ul class= "Nav nav-pills" >

-Vertical Label

-<ul class= "nav nav-pills nav-stacked" >

-Justify on both sides

-<ul class= "nav nav-tabs nav-justified" >

Navigation bar

-Basic navigation bar

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/7E/8B/wKiom1cDlD7QnhUfAAANzf6D01o866.png "title=" Web.png "alt=" Wkiom1cdld7qnhufaaanzf6d01o866.png "/>650" this.width=650; "src=" http://s5.51cto.com/wyfs02/M02/ 7e/87/wkiol1cdlp3bh0xzaaellm6k0g0654.png "title=" Web.png "alt=" wkiol1cdlp3bh0xzaaellm6k0g0654.png "/>-Navigation bar form

-<form class= "Navbar-form" role= "Search" >

-Navigation bar button

-<button class= "btn btn-default navbar-btn" >

-Navigation bar Text

-<p class= "Navbar-text" >

-Non-navigational links

-<a href= "#" class= "Navbar-link" >

-Arrange

-. Navbar-left | Right

-Fixed

-. Navbar-fixed-top | Bottom

Navigation path

-Indicate the position of the current page in a hierarchical navigation structure

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/7E/8B/wKiom1cDlX-gmH0vAAAUlJpmUAw346.png "title=" Web.png "alt=" Wkiom1cdlx-gmh0vaaauljpmuaw346.png "/>650" this.width=650; "src=" http://s2.51cto.com/wyfs02/M01/ 7e/8b/wkiom1cdldvz3so2aadrec90-7k347.png "title=" Web.png "alt=" Wkiom1cdldvz3so2aadrec90-7k347.png "/>

Summary: This chapter mainly introduces the BootStrap components

This article from the "Flying Ants" blog, declined to reprint!

Foundation of Bootstrap-3 components