Learn how to use the bootstrap3 raster system and learn the bootstrap3 raster.
I. Build a bootstrap development environment
1. Download bootstrap,Http://www.bootcss.com/
2. Download jquery and access it directly through IE.Http://code.jquery.com/jquery-2.0.3.min.js
3. import the js and css files of bootstrap and jquery on the html page ,. the <meta> label of the viewport. This label can be modified and displayed on most mobile devices, such as if lt IE 9... and so on.
The template is as follows:
<!DOCTYPE html>
Ii. Raster System
1. boostrap separates desktops into tables with 12 rows and n columns for layout. This is the core of boostrap.
2. row-level Division must be included in. container.
3. col-xx-* is used to classify columns, as shown in figure
<div class="container"> <div class="row"> <div class="col-md-3">1</div> <div class="col-md-3">2</div> <div class="col-md-3">3</div> <div class="col-md-3">4</div> </div> <div class="row"> <div class="col-md-3">5</div> <div class="col-md-3">6</div> <div class="col-md-3">7</div> <div class="col-md-3">8</div> </div> </div>
4. Column offset,Using col-xx-offset -*
<div class="container"> <div class="row"> <div class="col-md-3">1</div> <div class="col-md-3">2</div> <div class="col-md-3">3</div> <div class="col-md-3">4</div> </div> <div class="row"> <div class="col-md-3">5</div> <div class="col-md-3">6</div> <div class="col-md-3 col-md-offset-3">7</div> </div> </div>
5. column sorting,You can use. col-xx-push-* And. col-xx-pull-* To sort columns left or right.
<div class="container"> <div class="row"> <div class="col-md-3">1</div> <div class="col-md-3">2</div> <div class="col-md-3 col-md-push-3">3</div> </div> <div class="row"> <div class="col-md-3">5</div> <div class="col-md-3">6</div> <div class="col-md-3 col-md-pull-2">7</div> </div> </div>
6. Column nesting, Row is nested in col.
<div class="row"> <div class="col-md-3">1</div> <div class="col-md-3">2</div> <div class="col-md-3">3</div> <div class="col-md-3"> <div class="row"> <div class="col-md-1">5</div> <div class="col-md-1">6</div> <div class="col-md-1">7</div> </div> </div> </div>
The above is all the content of this article, hoping to help you learn.
Articles you may be interested in:
- Every day, Bootstrap must learn the grid system (layout)
- Bootstrap entry books (iii) raster System