Brief analysis of basic application points of bootstrap _javascript skills

Bootstrap is a new open source css/html framework that is written by Twitter from a dynamic CSS language less (along with Sass porting code).

Usage:

<! DOCTYPE html>  

Heading styles:

Bootstrap can be implemented through the class name H1-h6 such as：<div class="h1">Bootstrap标题</div>

In web production, you will often encounter a small subtitle followed by a heading:

. Lead: Increase text font size, bold;

Add color to text, emphasize by color:

. text-muted: Hint, use light gray (#999)

. Text-primary: Main, use Blue (#428bca)

. text-success: Success, using light green (#3c763d)

. TEXT-INFO: Notification information, using light blue (#31708f)

. text-warning: Warning, using yellow (#8a6d3b)

. Text-danger: Dangerous, use Brown (#a94442)

Text to it: In CSS often use text-align to implement text to it, Bootstrap:

Text-left left-aligned

Text-center Center Alignment

Text-right Align Right

Text-justify Justify

Bootstrap provides a set of priority streaming grid systems for responsive mobile devices, which are automatically divided into up to 12 columns as the screen or viewport (viewport) dimensions increase.

To manipulate the layout of the corresponding screen by class

Phone screen (<768px) class prefix. col-xs-

Flat screen (>=768px) class prefix. col-sm-

Medium screen (>=992px) class prefix. col-md-

Large screen (>=1200px) class prefix. col-lg-

The number of columns is 12; all columns (column) must be placed in the. 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>
</div>

Changes the outermost layout element. Container to. Container-fluid to convert a fixed-width grid layout to a 100%-width layout

Offset:

Sometimes we don't want adjacent columns to be close together, and you can use column offsets (offset) to add to the element you want to offset. col-md-offset-* (* represents the number of columns that need to be offset)

For example: "Col-md-offset-4" is to offset 4 columns to the right when on a medium screen

Column sort:

Column sort is to change the direction of the list, that is, to change the float, and set the floating distance, by adding the class name implementation:

"Col-md-push-*" and "col-md-pull-*" (* numbers represent the number of offset columns)

Right offset write push left write pull;

Nesting of columns:

The bootstrap framework also supports nesting of columns

You can add one or more rows (ROM) to a column, and then insert columns in the container (as in the preceding)

The nested columns are written. col-md-* is allocated on the basis of the parent box.

The above is a small set to introduce the basic application of bootstrap, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!