bootstrap--Global CSS style grid system

Bootstrap provides a responsive, mobile-first streaming raster system that is automatically divided into up to 12 columns as the screen or viewport (viewport) size increases. It contains pre- defined classes that are easy to use , and powerful mixin for generating more semantic layouts .

First, Introduction

A raster system is used to create a page layout with a series of rows and columns (column), and your content can be placed in these created layouts. Here's how the Bootstrap grid system works:

• Row must be included .container (fixed width) or .container-fluid (100% width) to give it the appropriate arrangement (aligment) and inner complement (padding).
• Create a set of columns (column) horizontally from row.
• Your content should be placed in column, and only columns (column) can be a direct child element of row.
• Similar .row and .col-xs-4 this predefined class can be used to quickly create a raster layout. The mixin defined in the Bootstrap source code can also be used to create a semantically formatted layout.
• paddingCreate the interval between columns (gutter) by setting Properties for columns (column). By .row setting a negative value for the element to margin cancel out the set for the .container element, it is indirectly offset by the padding column (columns) contained in row padding .
• A negative margin is the reason why the following example is out of focus. The contents of the grid column are lined up.
• A column in a raster system represents a range that is spanned by specifying a value of 1 to 12. For example, three equal-width columns can be created using three .col-xs-4 .
• If a row contains columns greater than 12, the elements of the extra column (columns) are arranged as a whole on a different line.
• The raster class is intended for devices with a screen width greater than or equal to the cutoff point size, and the raster class is overridden for small-screen devices. Therefore, applying any raster class on an element is .col-md-* appropriate for devices with a screen width greater than or equal to the cutoff point size, and the raster class is overridden for small-screen devices. Therefore, any application .col-lg-* that does not exist on the element also affects the large-screen device.

Two, grid parameters

You can learn about the parameters of a grid system by following the table

Third, examples

(1) from stacking to horizontal arrangement

Using a single set of .col-md-* raster classes, you can create a basic raster system that is stacked on top of your phone and tablet (from a small screen to a small screen) and arranged horizontally on a desktop (medium) screen device. All columns (column) must be placed .row inside.

Code

<divclass="Container"> <divclass="Row"> <divclass="Row"> <divclass="col-md-1">.col-md-1</div> <divclass="col-md-1">.col-md-1</div> <divclass="col-md-1">.col-md-1</div> <divclass="col-md-1">.col-md-1</div> <divclass="col-md-1">.col-md-1</div> <divclass="col-md-1">.col-md-1</div> <divclass="col-md-1">.col-md-1</div> <divclass="col-md-1">.col-md-1</div> <divclass="col-md-1">.col-md-1</div> <divclass="col-md-1">.col-md-1</div> <divclass="col-md-1">.col-md-1</div> <divclass="col-md-1">.col-md-1</div> </div></div>

The results of the run are as follows

Of course, see in the phone will be another effect, here do not use the phone, the simplest test method, is to reduce the browser window to the size of the mobile phone screen, you can achieve the same effect of mobile phone browsing,

In this way, a row can display up to 12 columns, and many columns will be displayed on the next line, as in the following example

Code

<divclass="Container"> <divclass="Row"> <divclass="Row"> <divclass="col-md-1">1</div> <divclass="col-md-1">2</div> <divclass="col-md-1">3</div> <divclass="col-md-1">4</div> <divclass="col-md-1">5</div> <divclass="col-md-1">6</div> <divclass="col-md-1">7</div> <divclass="col-md-1">8</div> <divclass="col-md-1">9</div> <divclass="col-md-1">10</div> <divclass="col-md-1">11</div> <divclass="col-md-1">12</div> <divclass="col-md-1">13</div> </div></div>

Results

When we use the. col-md-* property, the following numbers represent the columns we want the 1 columns to occupy relative to the 12 columns, as in the example below:

Code

  class= "row" >                class= "col-md-9" >11</div>                class= "col-md-3" >12</div>            </div>

(2) different display of mobile device and desktop screen

When we want the mobile device and the results we use on the computer screen to be not the same, we can use the properties that are appropriate for the mobile screen to set.

For example, I want a row to see a scale of 1:1 in a computer browser, while the phone screen sees a ratio of 9:3, as follows:

Code

class= "row" >                class= "col-xs-9 col-md-6" >1</div>                 Class= "col-xs-3 col-md-6" >2</div>               </div>   

Running the above code, what we see in the Computer browser is

It's supposed to look like this on the phone.

Above we set the mobile phone and computer browsing effect, the tablet effect can be set by col-sm-*, this is not written here.

(3) Column offset

Use .col-md-offset-* a class to offset a column to the right. These classes actually * add the left margin (margin) to the current element by using the selector. For example, .col-md-offset-4 .col-md-4 a class offsets an element to the right by a width of 4 columns (column).

Here will give the official website to the example, I do not write the examples, we can try,

Code

<divclass="Row"> <divclass="col-md-4">.col-md-4</div> <divclass="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <divclass="Row"> <divclass="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <divclass="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> </div> <divclass="Row"> <divclass="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div>

Results of the operation

(4) Nested columns

In order to use the built-in raster system to nest content again, you can add a new .row element and a series of .col-sm-* elements to an already existing .col-sm-* element. The number of columns (column) contained in a nested row cannot exceed 12 (in fact, you do not need to fill 12 columns).

Code

class= "col-sm-9" > Level                1:. col-sm-9                class= "row" >                     Class= "col-xs-8 col-sm-6" > Level                        2:. col-xs-8. col-sm-6                    </div>                    class = "col-xs-4 col-sm-6" > Level                        2:. col-xs-4. col-sm-6                    </div>                </div>            </div>

Run results

(5) Column sorting

By using the .col-md-push-* and .col-md-pull-* classes, you can easily change the order of columns (column).

Code

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

Operation Result:

The above content is just basic some small knowledge points, need to learn more, everyone can go to view official documents. Thank you

bootstrap--Global CSS style grid system