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