Bootstrap raster system, bootstrap raster

Bootstrap raster system, bootstrap raster
Previous

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. The raster system is not officially defined, but according to the various descriptions on the internet, it can be defined as follows to guide and standardize the layout and information distribution in the webpage with a regular grid array. This document describes the Bootstrap raster system in detail.

 

Implementation Principle

The implementation principle of the grid system is very simple. It only defines the container size and splits 12 parts equally (24 or 32 parts equally, but 12 parts are the most common ), then adjust the internal and external margins, and finally combine the media query to create a powerful responsive grid system. In the Bootstrap framework, the grid system splits containers into 12 equal parts.

The raster system is used to create a page layout by combining a series of rows and columns. The content can be placed in the created layout. The following describes how the Bootstrap raster system works:

1. "row" must be included in. container (fixed width) or. container-fluid (100% width) to give it an appropriate arrangement (aligment) and padding (padding)

<div class="container">    <div class="row"></div></div>

2. Create a group of columns in the horizontal direction using "row )"

3. The content should be placed in "column", and only "column" can be used as a direct sub-element of row.

4. pre-defined classes like. row and. col-xs-4 can be used to quickly create grid la S. The mixin defined in Bootstrap source code can also be used to create semantic la S.

<div class="container">  <div class="row">    <div class="col-md-4">.col-md-4</div>    <div class="col-md-8">.col-md-8</div>  </div></div>

5. Set the padding attribute for "column" to create the interval (gutter) between columns ). Passed. the row element is offset by setting a negative value margin. the padding set by the container element is indirectly offset by the "column" contained in "row"

6. the columns in the raster system specify a value ranging from 1 to 12 to indicate the cross range. For example, three equally wide columns can be created using three. col-xs-4

<div class="container">  <div class="row">    <div class="col-md-4">.col-md-4</div>    <div class="col-md-4">.col-md-4</div>    <div class="col-md-4">.col-md-4</div>  </div></div>

7. If a "row" contains "column" greater than 12, the redundant "column) "The elements will be arranged as a whole in another row.

8. raster is applicable to devices with a screen width greater than or equal to the split point size. The raster class is also applicable to small screen devices. Therefore, the application of any. col-md-* raster class on the element is applicable to devices with the screen width greater than or equal to the demarcation point size, and covers the raster class for small screen devices. Therefore, the application of any. col-lg-* on the element does not exist, and the large screen device is also affected.

 

Media Query

In the raster system, we use the following media query in the Less or Sass file to create key demarcation points.

/* Small screen (flat panel, greater than or equal to 768px) */@ media (min-width: @ screen-sm-min ){...} /* medium screen (desktop display, greater than or equal to 992px) */@ media (min-width: @ screen-md-min ){...} /* large screen (large desktop display, greater than or equal to pixel px) */@ media (min-width: @ screen-lg-min ){...}

We occasionally includemax-widthThis limits the impact of CSS to a smaller screen size.

@media (max-width: @screen-xs-max) { ... }@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }@media (min-width: @screen-lg-min) { ... }

The following table shows how the Bootstrap raster system works on multiple screen devices.

 

Basic usage

The grid system is actually a combination of columns for layout.

A simple understanding of column combination is to change numbers to merge columns (principle: the total number of Columns cannot exceed 12), which is somewhat similar to the colspan attribute of a table.

The column combination method is very simple. It only involves two CSS features: Floating and width percentage.

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {    float: left; }

  .col-md-12 {    width: 100%;  }  .col-md-11 {    width: 91.66666667%;  }  .col-md-10 {    width: 83.33333333%;  }  .col-md-9 {    width: 75%;  }  .col-md-8 {    width: 66.66666667%;  }  .col-md-7 {    width: 58.33333333%;  }  .col-md-6 {    width: 50%;  }  .col-md-5 {    width: 41.66666667%;  }  .col-md-4 {    width: 33.33333333%;  }  .col-md-3 {    width: 25%;  }  .col-md-2 {    width: 16.66666667%;  }  .col-md-1 {    width: 8.33333333%;  }

[Streaming layout container]

Add the outermost layout element.containerChange.container-fluidTo convert the fixed-width grid layout to a 100%-width layout.

.container-fluid {    padding-right: 15px;    padding-left: 15px;    margin-right: auto;    margin-left: auto;}

 

Column offset

It is very easy to use column offset. You only need to add the class name "col-md-offset-*" to the column element (the asterisk indicates the number of column combinations to be offset ), the column with this class name will be offset to the right. For example, adding a col-md-offset-4 on a column element means that the column moves the width of four columns to the right

The implementation principle is very simple, using 1/12 (1/12) margin-left. The number of offset values indicates the number of margin-left values.

 .col-md-offset-12 {   margin-left: 100%;  }  .col-md-offset-11 {    margin-left: 91.66666667%;  }  .col-md-offset-10 {    margin-left: 83.33333333%;  }  .col-md-offset-9 {    margin-left: 75%;  }  .col-md-offset-8 {    margin-left: 66.66666667%;  }  .col-md-offset-7 {    margin-left: 58.33333333%;  }  .col-md-offset-6 {    margin-left: 50%;  }  .col-md-offset-5 {    margin-left: 41.66666667%;  }  .col-md-offset-4 {    margin-left: 33.33333333%;  }  .col-md-offset-3 {    margin-left: 25%;  }  .col-md-offset-2 {    margin-left: 16.66666667%;  }  .col-md-offset-1 {    margin-left: 8.33333333%;  }  .col-md-offset-0 {    margin-left: 0;  }

Note that when you use "col-md-offset-*" to offset the column to the right, make sure that the total number of columns and offset columns does not exceed 12, otherwise, the columns are disconnected.

<div class="container">  <div class="row">    <div class="col-xs-4">.col-xs-4</div>    <div class="col-xs-4 col-xs-offset-4">.col-xs-4 .col-xs-offset-4</div>  </div>  <div class="row">    <div class="col-xs-2">.col-xs-2</div>    <div class="col-xs-4 col-xs-offset-4">.col-xs-4 .col-xs-offset-4</div>    <div class="col-xs-4">.col-xs-4</div>  </div></div>

 

Column sorting

Column sorting actually changes the column direction, that is, changes the Left and Right floating, and sets the floating distance. In the mesh system of the Bootstrap framework, the class name "col-md-push-*" and "col-md-pull-*" are added. The asterisk indicates the number of columns to be moved. ).

Bootstrap only sets left and right to achieve the positioning effect.

.col-md-pull-12 {    right: 100%;  }  .col-md-pull-11 {    right: 91.66666667%;  }  .col-md-pull-10 {    right: 83.33333333%;  }  .col-md-pull-9 {    right: 75%;  }  .col-md-pull-8 {    right: 66.66666667%;  }  .col-md-pull-7 {    right: 58.33333333%;  }  .col-md-pull-6 {    right: 50%;  }  .col-md-pull-5 {    right: 41.66666667%;  }  .col-md-pull-4 {    right: 33.33333333%;  }  .col-md-pull-3 {    right: 25%;  }  .col-md-pull-2 {    right: 16.66666667%;  }  .col-md-pull-1 {    right: 8.33333333%;  }  .col-md-pull-0 {    right: 0;  }  .col-md-push-12 {    left: 100%;  }  .col-md-push-11 {    left: 91.66666667%;  }  .col-md-push-10 {    left: 83.33333333%;  }  .col-md-push-9 {    left: 75%;  }  .col-md-push-8 {    left: 66.66666667%;  }  .col-md-push-7 {    left: 58.33333333%;  }  .col-md-push-6 {    left: 50%;  }  .col-md-push-5 {    left: 41.66666667%;  }  .col-md-push-4 {    left: 33.33333333%;  }  .col-md-push-3 {    left: 25%;  }  .col-md-push-2 {    left: 16.66666667%;  }  .col-md-push-1 {    left: 8.33333333%;  }  .col-md-push-0 {    left: 0;  }

<div class="container">    <div class="row">      <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>      <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>    </div></div>

 

Column nesting

To use the built-in raster system to nest the content again, you can add a new.rowElements and a series.col-sm-*Element to an existing.col-sm-*Element. The number of columns contained in the nested row cannot exceed 12

<Div class = "container"> <div class = "row"> <div class = "col-xs-8"> I nested a grid inside <div class = "row"> <div class = "row"> div class = "col-xs-6"> col-xs-6 </div> <div class = "col-xs-6"> col-xs-6 </div> <div class = "col-xs-4"> col-xs-4 </div> <div class = "row"> <div class = "col-xs-4">. col-xs-4 </div> <div class = "col-xs-8"> inside me nested a grid <div class = "row"> <div class = "col-xs-4"> col-xs-4 </div> <div class = "col-xs-4"> col-xs-4 </div> <div class = "col-xs-4"> col-xs-4 </div> </div>

 

Complex applications

In bootstrap ,. col-xs-when applied to (<768px ,. col-sm-used in (≥768px and <992px ,. col-md-applies to (≥992px and <pixel px ,. col-lg-applicable to (≥0000px) Situations

The. col-xs-,. col-sm-,. col-md-, and. col-lg-can be mixed.

For example, to realize ≥992px, there are four columns in one row, (≥768px and <992px), two columns in one row, and (<768px) in one column in one row.

<!DOCTYPE html>
 
Hide
To accelerate page development for mobile devices, you can use the media query function and the following tools to conveniently display or hide page content for different devices.
Shape.visible-*-*The class has three variants for each screen size, each of which is different fromdisplayProperties, as shown below
Therefore (xs)..visible-*-*Class:.visible-xs-block,.visible-xs-inlineAnd.visible-xs-inline-block
For example, to implement ≥992px, there are three columns (≥768px and <992px), there are two columns (<768px), and only one column (<768px)
<!DOCTYPE html>