Bootstrap framework series, bootstrap framework

Bootstrap framework series, bootstrap framework

About Bootstrap, amount ~, Ah ~, Let's not talk about it much, just start with O (∩ _ ∩) O ~~

Install

You can download and install the SDK from the official bootstrap website.

You can install the Package Manager through the Bower (this article will not explain it in detail)

1 bower install bootstrap

You can install it through npm (for more information about npm)

1 npm install bootstrap

Introduce Bootstrap into the project

1 <! DOCTYPE html> 2 
Layout container
. Container class is used for fixed-width containers that support responsive Layout
1 <div class="container">2     3 </div>
. Container-fluid class is used for containers with a width of 100% and occupies all the viewports.
1 <div class="container-fluid">2     3 </div>
Raster System
Bootstrap provides a responsive, mobile-first streaming raster system, which is automatically divided into 12 copies based on the size of the screen or viewport;
The grid system creates a page layout by combining a series of rows and columns;
"Row" must be included in the. container or. container-fluid container,
Query media in the grid system

Parameters in the raster System

Case code
1 
The page effect varies with the screen size (col-lg-, col-md-, col-sm-, col-xs -).




Column offset (offsets) in the grid system)
Col-lg-offset-

1 

The effect is as follows (11 columns are offset)
Column nesting in the raster System
 1 <div class="container"> 2     <div class="row"> 3         <div class="col-lg-4 col-md-2  col-sm-3 col-xs-6">1</div> 4         <div class="col-lg-8 col-md-2  col-sm-3 col-xs-6">2 5             <div class="row"> 6                 <div class="col-lg-3 col-md-2  col-sm-3 col-xs-6">3</div> 7                 <div class="col-lg-3 col-md-2  col-sm-3 col-xs-6">4</div> 8                 <div class="col-lg-3 col-md-2  col-sm-3 col-xs-6">5</div> 9                 <div class="col-lg-3 col-md-2  col-sm-3 col-xs-6">6</div>10             </div>11         </div>12     </div>13 </div>
The effect is as follows:

Stream layout container
Change the outermost layout element. container to. container-fluid to convert the fixed grid layout to a 100%-width layout.
1 <div class="contaienr-fluid">2     <div class="row">3         4     </div>5 </div>

Please leave a message and correct it!
(First glance-end ~~)