Key Points of Bootstrap's basic application and key points of bootstrap

Key Points of Bootstrap's basic application and key points of bootstrap

Bootstrap is an open-source CSS/HTML framework launched by Twitter, which is written by the dynamic CSS language Less (Sass porting code is also provided ).

Usage:

<! DOCTYPE html> 
Title style:
In Bootstrap, you can use the class name to implement h1-h6 such: <Div class = "h1"> Bootstrap title </div>
In Web production, we often encounter a subtitle following a small line of title:
<H1> Bootstrap title <small> I am a subtitle </small> 

. Lead: Increase the text font size and bold it;
Add a color to the text and emphasize it by color:
. Text-muted: prompt, use light gray (#999)
. Text-primary: Main, use blue (# 428bca)
. Text-success: Successful. Use light green (# 3c763d)
. Text-info: Notification Information, with light blue (# 31708f)
. Text-warning: warning, use yellow (# 8a6d3b)
. Text-danger: Dangerous, use brown (# a94442)
Text: in CSS, text-align is often used to implement text pairs. In bootstrap:
Left-aligned Text-left
Align Text-center
Right-align Text
Text-justify
Bootstrap provides a responsive mobile device-first streaming raster system. With the increase in the screen or viewport size, the system will automatically be divided into up to 12 columns.
Use class to operate the layout on the corresponding Screen
Mobile phone screen (<768px) Class prefix. col-xs-
Flat screen (> = 768px) Class prefix. col-sm-
Medium screen (> = 992px) Class prefix. col-md-
Large Screen (> = pixel px) Class prefix. col-lg-
The number of columns is 12. All columns (columns) must be placed in. row.
<div class=”row”><div class=“col-xs-12 clo-md-8 clo-md-6 col-lg-4”><div class=“col-xs-12 clo-md-4 clo-md-6 col-lg-4”></div>
Instance:
<Div class = "container"> <div class = "row"> content </div>
Change the layout element of the outermost layer. container to. container-fluid to convert the fixed-width grid layout to a 100%-width layout.
Offset:
Sometimes we do not want adjacent columns to be close together. We can use column offset to add the element to be offset. col-md-offset-* (* indicates the number of columns to be offset)
For example, "col-md-offset-4" is to offset 4 columns to the right when the screen is medium
Column sorting:
Column sorting is to change the direction of the list, that is, to change the floating distance between the left and right, and set the floating distance, by adding a Class Name:
"Col-md-push-*" and "col-md-pull-*" (* indicates the number of offset columns)
Offset to the right write push write pull to the left;
Column nesting:
The Bootstrap framework also supports column nesting.
You can add one or more rows (rom) to the column and insert columns in the container (as in the previous section)
When writing. col-md-*, nested columns are allocated based on the parent box.
The above is an analysis of the basic application points of Bootstrap introduced by xiaobian. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!