Bootstrap common class name

Bootstrap common class name

BootstrapAssign a class name to a label(class name)To generate the effect tag of the corresponding class name.

Grid options

row: Line

col-*-*: Column (First*Can beXs [Ultra small]/Sm [small]/Md [medium]/Lg [large]Second*Must be less than 12 [columns])

col-*-offset-*: Column offset (First*Same as above,Second*The range is from 1 to 11, indicating that the left margin (margin) of the column is increased.*Column)

col-*-*-*: Column sorting (First*Same as above,Second*Can bePush [to the right]/Pull [left], Third*Range: 1 to 11 [columns])

Typographical

small: Inline subtitle

lead: Boot body copy

text-*: Text style (*The ID can be
Left [left alignment]/Center [center alignment]/Right [right alignment]/Muted [deprecated text] 
/primary/success/info/warning/danger 
/Justify [automatic line feed]/Nowrap [do not wrap] 
/Lowercase [lower case]/Uppercase [uppercase]/Capitalize [uppercase letters])

list-inline: The list is placed in the same row

Table

table: Basic style (only horizontal separator)

table-*: Table style (*Can beStriped [add stripe]/Bordered [Add a border]/Hover [enable hover]/Condensed [more compact])

tr/th/tdYesactive/success/info/warning/dangerTo change the background color.

Set anytablePut intable-responsiveTo implement a responsive table

bootstrapLiactive/success/info/warning/dangerCorresponding background color

Form

To create a basic form (vertical form) 
1. directed to the parent<form>Add Elementrole="form".
2. Place tags and controls inclass .form-groupOf<div>. This is required to obtain the optimal spacing.
3. To all text elements<input>,<textarea>And<select>Addclass .form-control.

Create a horizontal form 
1. directed to the parent<form>Add Elementclass .form-horizontal.
2. Place tags and controls inclass .form-groupOf<div>.
3. Add tagsclass .control-label.

Common form controls are mainly input,textarea,checkbox,radioAndselect.
input: DeclarationtypeYestext,password,datetime,datetime-local,date,month,time,week,
number,email,url,search,telAndcolor.

textarea:rowHeight

checkbox: Check box

radio: Single region

checkbox-inline: Inline check box and single-line

select: Select box

Add verification status to parent Elementhas-*: Verify the style (*Can bewarning/error/success)

Button

btn: Basic style

btn-*: Other styles (*Can bedefault/primary/success/info/warning/danger 
/Link [make the button look like a link] 
/lg/sm/xs/ 
Block [block-level button, stretched to 100% of the width of the parent element]/active/disabled)

Image

img-*: Image style (*Can beRounded [rounded corner 6px] 
/Circle [circle] 
/Thumbnail [Add the padding and a gray border]/responsive)

Auxiliary class

BootstrapIn addition toactive/success/info/warning/dangerAnd
pull-left/rightElement float to left/right
center-blockSet the elementdisplay:blockCenter display
clearfixClear floating
show/hiddenForce display/hide

closeShow close button
caretShow drop-down Function
dividerSeparation line

Font icon

InfontsYou can find the font icon in the folder, which contains the following files:

glyphicons-halflings-regular.eotglyphicons-halflings-regular.svgglyphicons-halflings-regular.ttfglyphicons-halflings-regular.woff

• 1
• 2
• 3
• 4

More icon reference http://www.runoob.com/bootstrap/bootstrap-glyphicons.html

Drop-down menu

dropdown: Drop-down menu

dropdown-menu: Drop-down menu

dropdown-header: Drop-down menu area title

Button Group

btn-group: Contains a seriesbtn

btn-toolbar: Contains several groupsbtn-group

btn-group-*: Adjust the style of the button group (*Can bexs/sm/lg/vertical)

.btn-groupAdd container.dropupClick to pull the menu

Input box Group

Direction.form-controlTo add a prefix or suffix, follow these steps: 
1. Place the prefix or suffix element inclass .input-groupOf<div>.
2. Then, in the same<div>InclassIs.input-group-addonOf<span>Add additional content.
3. Set<span>Placed in<input>The front or back of an element.
Bytes

To maintain cross-browser compatibility, avoid using<select>Element, because they areWebKit 
The effect cannot be completely rendered in the browser. Do not applyclassThe input box group is an isolated component.

Navigation Element

nav nav-tabs: Label-based navigation menu
nav nav-pills: Capsule navigation menu
// Use bothnav-stackedStack capsules vertically
// Use bothnav-justifiedMake the label or capsule navigation menu equal to the parent element width

Navigation Bar

To create a default navigation bar, follow these steps: 
1. Forward<nav>Add tagsclass .navbar,.navbar-default.
2. Add the above Elementrole="navigation"To help increase accessibility.
3. Forward<div>Add a title to the elementclass .navbar-header, Containsclass navbar-brandOf<a>Element. This will make the text look bigger.

To add a link to the navigation bar, simply addclass .nav,.navbar-nav.

navbar-btn: Buttons in the navigation bar
navbar-text: Text in the navigation bar
navbar-link: Non-standard navigation link

navbar-left/right: Align left/right

navbar-fixed-top/bottom: Fixed at the top/bottom (to prevent the navigation bar from being staggered with the top of other content in the page body, please<body>Add at least 50 pixels of padding (padding), The padding value can be set according to your needs)

navbar-static-top: Navigation bar that can be rolled along with the page

nav-inverse: Navigation bar with black background and white text

Bread navigation

breadcrumb

 

Paging

'Pagination': pagination 'Disabled/active': Click not allowed/'pager': page turning 'previous/next': Align the link to the left/to the right

Tag

label-*: Tag (*Can bedefault/primary/success/info/warning/danger)

Badge

badge

Large Screen

jumbotron

 

Page title

page-header

 

Thumbnail

thumbnail

 

Add custom content 
Now we have a basic thumbnail. We can add various HTML content to the thumbnail, such as the title, paragraph, or button. The procedure is as follows:
1. Putclass .thumbnailOf<a>Label changed<div>.
2. In<div>You can add anything you want to add. Because this is<div>, We can use the defaultspanTo adjust the size.
3. If you want to group multiple images, place them in an unordered list, and each list item changes to the left.

Warning

alert alert-*: Warning box (*Can besuccess/info/warning/danger)

Create a cancelling warning (Dismissal Alert) Steps are as follows: 
1. Create<div>And add.alert classAnd four contextsclass(That is.alert-success、.alert-info、.alert-warning、.alert-danger) To add a basic warning box.
2. At the same time<div> classAdd optional.alert-dismissable.
3. Add a close button.

Progress bar

To create a basic progress bar, follow these steps: 
1. Addclass .progressOf<div>.
// Add both.progress-stripedTo implement the stripe style progress bar
// Then addactiveIt will make the striped movement from right to left
2. Then<div>, Addclass .progress-barOf<div>.
// Add bothclass progress-bar-*To achieve the progress bar of the alternate style, where,*Yessuccess、info、warning、danger.
3. Add a width with a percentagestyleProperties, suchstyle="60%"; Indicates that the progress bar is in60%.

Multimedia object

media: Allows multimedia (images, videos, and audios) in a media object to the left or right of the content block.

.media-list: If you need a list, the content of each item is part of the unordered list, you can use thisclass. Can be used for comment list and article list

List Group

To create a basic list group, follow these steps: 
Direction Element<ul>Addclass .list-group.
Direction<li>Addclass .list-group-item.
list-group-item-heading: EachitemIs similarText of cell in ios 
list-group-item-text: EachitemIs similarCell subtitle text in ios

Panel

panel panel-default: Panel
panel-heading: Panel header
panel-title: Panel title
panel-body: Panel content
panel-footer: Panel footer