1, the grid system, and the container
container
- container: fixed width, different sizes of different fixed widths
- container-fluid: 100% Width
Grid System
- col-： <576px
- col-sm- ： >=576px
- col-md- ： >=768px
- col-lg- ： >=992px
- col-xl- ： >=1200px
2, font color and background color
Fonts
- text-muted pastel
- text-primary important
- text-success success
- text-info tips
- text-warning warning
- text-danger dangerous
- text-secondary subtitle
- text-dark dark gray text
- text-light grayish
- text-white white
background
- bg-primary
- bg-secondary
- bg-success
- bg-danger
- bg-warning
- bg-info
- bg-light
- bg-dark
- bg-white
3, Borders
Add borders
- border ： 默认：1px solid #dee2e6!important
- border-top
- border-left
- border-right
- border-bottom
Remove borders
- border-0: removing an edge or side of the frame removed
- border-top-0
- border-left-0
- border-right-0
- border-bottom-0
Border Color
- border-primary
- border-secondary
- border-success
- border-danger
- border-warning
- border-info
- border-light
- border-dark
- border-white
Rounded corners
- rounded ： border-radius: .25rem!important;
- rounded-top: only top sides are rounded
- rounded-right
- rounded-bottom
- rounded-left
- rounded-circle-based images may be provided elliptical
- rounded-0
- .img-thumbnail class is used to set the thumbnail picture (picture with border)
4, the inner margin (pading) margins (margin)
- m - for classes Representative margin
- p - for classes on behalf of padding
-
t - for classes that set margin-top or padding-top -
b - for classes that set margin-bottom or padding-bottom -
l - for classes that set margin-left or padding-left -
r - for classes that set margin-right or padding-right -
x - for classes that set both *-left and *-right -
y - for classes that set both *-top and *-bottom
Padding
- p-1 ： padding: .25rem!important;
- p-2 ： padding: .5rem!important;
- p-3 ： padding: 1rem!important;
- p-4 ： padding: 1.5rem!important;
- p-5 ： padding: 3rem!important;
unilateral
- pt-0
- pl-0
- per-0
- pb-0
- px-2
- py-2
padding: 0 .5rem; // py-2
Margin
- m-1 ： margin: .25rem!important;
- m-2 ： margin: .5rem!important;
- m-3 ： margin: 1rem!important;
- m-4 ： margin: 1.5rem!important;
- m-5 ： margin: 3rem!important;
unilateral
- mt-0
- ml-0
- mr-0
- mb-0
Unilateral size
- mt-1 // margin-left: ($spacer * .25) !important;
- mt-2
- mt-3
- mt-4
- mt-5
- MX-car
margin:0 auto;
auto
- ml-auto ： margin-left: auto!important;
- mr-auto： margin-right: auto!important;
- mt-auto ： margin-top: auto!important;
- mb-auto ： margin-bottom: auto!important;
5, clear float
- Clear float clearfix // class implementation follows
// Mixin itself @mixin clearfix() { &::after { display: block; content: ""; clear: both; } } // Usage as a mixin .element { @include clearfix; }
6, display display
.d- {value} for all // use any size
.d- {breakpoint} - {value} for sm, md, lg, and xl.// corresponding dimension loading
- d-none
- d-inline
- d-inline-block
- d-block
- d-table
- d-table-cell
- d-table-row
- d-flex
- d-inline-flex
// print style to use less
- d-print-none
- d-print-inline
- d-print-inline-block
- d-print-block
- d-print-table
- d-print-table-row
- d-print-table-cell
- d-print-flex
- d-print-inline-flex
7, the style elements embedded
It contains
<iframe>, <embed>, <video>, and <object>elements such as style
- embed-responsive: outside of the box
- embed-responsive-21by9 (16by9,4by3,1by1): aspect ratio
- embed-responsive-item: add style on the element
<div class="embed-responsive embed-responsive-21by9"> <`iframe class="embed-responsive-item" src="..."></iframe`> </div>
8, flexible layout
- d-flex // display the object as a resilient and elastic cartridge
- d-inline-flex // display the object as an inline block-level cartridge elastically stretchable
- d-sm-flex // load corresponding dimension
- d-sm-inline-flex
- d-md-flex
- d-md-inline-flex
- d-lg-flex
- d-lg-inline-flex
- d-xl-flex
- d-xl-inline-flex
horizontal direction
- flex-row
- flex-row-reverse // opposite directions
Vertical
- flex-column
- flex-column-reverse
The same style fit different sizes
- flex-row
- flex-row-reverse
- flex-column
- flex-column-reverse
- flex-sm-row
- flex-sm-row-reverse
- flex-sm-column
- flex-sm-column-reverse
- flex-md-row
- flex-md-row-reverse
- flex-md-column
- flex-md-column-reverse
- flex-lg-row
- flex-lg-row-reverse
- flex-lg-column
- flex-lg-column-reverse
- flex-xl-row
- flex-xl-row-reverse
- flex-xl-column
- flex-xl-column-reverse
justify content // can be matched to a different sizes
- justify-content-start
- justify-content-end
- justify-content-center
- justify-content-between
- justify-content-around
wrap
- flex-nowrap // support different sizes match
- flex-rap
- flex-sm-wrap-reverse
order // sub-element is set to support a different size match
- order-0
- order-1
- order-2
- order-3
- order-4
- order-5
- order-6
- order-7
- order-8
- order-9
- order-10
- order-11
- order-12
Align items // set child support elements of different sizes to match
- align-items-start
- align-items-end
- align-items-center
- the like-items-baseline
- align-items-stretch
Align self // set child support elements of different sizes to match
- align-self-start
- align-self-end
- align-self-center
- align-self-baseline
- align-self-stretch
Align content // set child support elements of different sizes to match
- align-content-start
- align-content-end
- align-content-center
- align-content-around
- align-content-stretch
9, may be adapted to float: float- (sm, md lg xl) -xxx
- float-left
- float-right
- float-none
10, image replacement text
- text-hide // use .text-hide help text-based content to replace the background image elements.
<h1 class="text-hide" style="background-image: url('/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>
11, location
- position-static
- position-relative
- position-absolute
- position-fixed
- position-sticky
Fixed positioning
- fixed-top
- fixed-bottom
.fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; }
12, dimension (size)
- w-25
//width: 25%!important; 以下值同理 - w-50
- w-75
- w-100
Interval
- mw-100
- mh-100
13, text
Text Location
- text-left // text Left
- text-center
- text-right
- text-sm-left
- text-md-left
- text-lg-left
- text-xl-left
Text conversion (Text transform) // all browsers support this property
- text-lowercase // lowercase alphabetic text
- text-uppercase // text uppercase letters
- text-capitalize // text each word beginning with a capital letter.
Font-emphasis and italics (Font weight and italics)
- font-weight-bold // font heavier
- font-weight-normal // normal fonts
- font-weight-light // tapered Font
- font-italic // italic
14, vertical alignment (Vertical alignment)
- align-baseline
- align-top
- align-middle
- align-bottom
- align-text-top
- align-text-bottom
vertical-align: text-bottom!important; //.align-text-bottom
15, show hidden
- show
- hidden or sr-only
- hide // class still available, but it can not play for the screen reader is not recommended
- invisible to hide the document retains the position of the element
- visible visible //
visibility: hidden!important;
16, tables
- table // default style
- table-striped // stripe form
- table-bordered // border of the table
- table-hover // hover
- table-dark // Black Background Form
- table-condensed // compact form
- table-responsive // table responsive
Set the background color table row
- Color set when active // hover in the row or cell
- success // identify successful or positive action
- info // identify common message or action
- warning // identifies a warning or require the user to pay attention
- danger // identify negative impact of the action or potential danger
17, buttons and button group
Push button
- btn-primary // main button
- Secondary buttons btn-secondary //
- btn-success // success button
- btn-info // Info button
- btn-danger // dangerous
- btn-outline-primary // button border
- btn-xs btn-sm btn-lg // small tuba button
- btn-block // block level button
- active // Available
- disabled // Disable
Button Group
- btn-group // button set
- btn-group-lg | sm | xs control button group size
- btn-group-vertical perpendicular button set
18, the list of groups
- list-group // set list
- list-group-item // list li
- list-unstyled // unstyled list
- list-inline // inline added to the list ul
List background color
- list-group-item-action
- list-group-item-success,
- list-group-item-secondary,
- list-group-item-info,
- list-group-item-warning,
- list-group-item-danger,
- list-group-item-dark
- list-group-item-light:
19, form
- form-inline // form adding such elements may constitute a form inline
- form-horizontal // you can label tag and the control group levels side by side layout
- form-group // form group margin-bottom: 15px;
- input-group-addon // use with input form, may be added before and after renewed icon or suffix
- The form-control // form element width becomes 100%
- sr-only hidden form
Control the size of the form
- input-lg
- input-sm
Checkbox and radio
- checkbox // wrapped box
- checkbox-inline // inline multiple choice
- radio // parcel box
- radio-inline // radio inline
- disabled // not clickable
Drop-down list (select)
- form-control
Check status
- has-success // .form-group can be used with the
- has-warning // .form-group can be used with the
- has-error // .form-group can be used with the
20, message box
- alert category
The background color append the following class name
- alert-success,
- alert-info,
- alert-warning,
- alert-danger,
- alert-primary,
- alert-secondary,
- alert-light
- alert-dark dark classes to implement prompt box
21, triangle
- caret // css to achieve a small downward triangle