Summary of Bootstrap common class names

Source: Internet
Author: User
Tags lowercase

Grid System
Basic class col-xs-, col-sm-, col-md-, COL-LG
Offset column col-xs-offset-
Column sort col-md-push-col-md-pull-

Typesetting
Highlight Lead
Small text Small
Left-aligned Text-left
Center Align Text-center
Right Align Text-right
Element floats to the left Pull-left
Element floats to the right pull-right
Clear Floating Clearfix
Out of the screen part of the text automatically wrapped Text-justify
Out of screen part no line text-nowrap
Text lowercase text-lowercase
Text Capital Text-uppercase
Set word first letter capital Text-capitalize
List items are placed on the same line List-inline
Text Accent color (text-muted,text-primary,text-success,text-info,text-warning,text-danger)
Background accent color (bg-primary,bg-success,bg-info,bg-warning,bg-danger)
Force Display Show
Force Hide Hidden
Drop-down feature insert character caret

Table
Base class Table
Stripe form table-striped
Border Table table-bordered
Hover Table Table-hover
Compact Form table-condensed
Responsive table Table-responsive

form
Basic Class Form-group
Basic Class Form-control
Inline Form Form-inline
Horizontal form Form-horizontal
Horizontal label Control-label
Static Control Form-control-static
Enter successful Has-success
Enter Warning Has-warning
Input Error Has-error
Form Control Size INPUT-LG,INPUT-SM ... (div->col-lg-)
Form Help Text Help-block (tags applied below input, such as span)
Front content Input-group-addon
The size of the input box group INPUT-GROUP-LG INPUT-GROUP-SM

Button
Basic Class BTN
White bottom-default button Btn-default
Dark blue Bottom-original button btn-primary
Green Bottom-Success button btn-success
Azure Bottom-Information button btn-info
Yellow Bottom-cautious action button (warning button) btn-warning
Red Bottom-Dangerous action button Btn-danger
Link Skin button Btn-link
Button Size Btn-lg,btn-sm,btn-xs
Block-level button Btn-block
button is clicked active
button is disabled disabled

Picture
Fillet picture img-rounded
Circular picture Img-circle
Add a gray border to a picture img-thumbnail
Response-Type picture img-responsive

font icon
Basic Class Glyphicon
Home icon Glyphicon-home
User Avatar Icon Glyphicon-user
Tick icon Glyphicon-ok
Fork Icon Glyphicon-remove
Garbage bin Glyphicon-trash
Download Icon Glyphicon-download-alt
More font icons

Drop down menu
Basic Class Dropdown
Basic Class Dropdown-menu
Snap to Pull-left
Drop down menu title Dropdown-header
Menu pops up Dropup
Split Line Divider

Button Group
Basic Class Btn-group
Button Toolbar Btn-toolbar
Button size BTN-GROUP-LG (SM,XS)
Vertical button Group Btn-vertical

Navigation Elements
Basic Class Nav
Default navigation menu Nav-tabs
Capsule navigation Menu Nav-pills
Vertical navigation Menu nav-stacked
The menu is justified at both ends nav-justified

Navigation bar
Basic Class NavBar
Default navigation bar Navbar-default
Title Navbar-header
Text emphasis Navbar-brand
Response Navigation bar Collapse,navbar-collapse
Navigation bar Form Navbar-form
buttons in the navigation bar NVBAR-BTN
Text Nvabr-text in the navigation bar
Component Alignment Navbar-left Navbar-right
The navigation bar is docked at the top of the page navbar-fixed-top
Fixed to bottom navbar-fixed-bottom
Fixed to the top of the static navbar-sttic-top
Anti-color navigation nvbar-inverse
Breadcrumbs Navigation breadcrumb (for OL)

Paging
Basic class pagination
Size PAGINATION-LG,PAGINATION-SM
Use state active disabled

page
Basic class Paper
Align left to previous
Align next to the right
The color becomes pale disabled

label
Base class label
Cosmetic Cosmetic Label-default,label-primary,label-success,label-info,label-warning,label-danger
Coat of arms badge

Page Title
Basic Class Page-header

thumbnail Image
Basic class Thumbnail

Warning
Base class Alert
Cosmetic class Alert-success,alert-info,alert-warning,alert-danger
Warning Alert-dismissable can be canceled
Links in warnings Alert-link

progress bar
Basic class Progress
Default progress bar Progress-bar
Cosmetic class Progress-bar-success,progress-bar-info,progress-bar-warning,progress-bar-danger
Stripe progress bar progress-striped

Multimedia Objects
Base class Media
Media list Media-list
Snap to Media-left,media-right

List Group
Basic Class List-group,list-group-item

Panel
Basic Class Panel
Default Panel Panel-default
Title Panel-heading,panel-title
Footnote panel-footer
Cosmetic class Panel-primary,panel-success,panel-info,panel-warning,panel-danger

Sunken Container
Basic class
Size WELL-LG,WELL-SM

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.