Foundation of Bootstrap-3 components

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.