Shulou(Shulou.com)06/03 Report--

This article will explain in detail the example analysis of bootstrap grid system for everyone. Xiaobian thinks it is quite practical, so share it with you as a reference. I hope you can gain something after reading this article.

Introduction to Grid Systems

Bootstrap provides a responsive, mobile-first streaming grid system that automatically splits into up to 12 columns as the screen or viewport size increases. It contains predefined classes that are easy to use and powerful mixins for generating more semantic layouts.

The grid system creates the layout of a page by combining a series of rows and columns, and the content of the settings can be placed in the created layout.

Principles of Grid System Implementation

The implementation principle of grid system is very simple, just by defining the size of the container, dividing it into 12 equal parts, adjusting the inner and outer margins, and finally combining media query, we can make a powerful responsive grid system.

The main principles of grid system operation:

A row of data must be contained in a.container (fixed width) or.container-fluid (100% width) in order to give it proper alignment and padding.

Create a set of columns horizontally through rows.

Your content should be placed in columns, and only columns can be direct children of rows.

Built-in a large number of styles, you can use styles such as.row and.col-xs-4 (four column width)(i.e. predefined classes) to quickly create grid layouts. Mixins defined in the Bootstrap source code can also be used to create semantic layouts.

Create a gutter between columns by setting the padding property for column. By setting a negative margin for the.row element to cancel out the padding set for the.container element, you indirectly cancel out the padding for the column contained in the row.

Columns in a grid system are ranges that they span by specifying values from 1 to 12. For example, three columns of equal width can be created using three.col-xs-4.

If a row contains more than 12 columns, the elements in which the extra columns are located will be arranged as a whole on a different row.

The grid class applies to devices with screen widths greater than or equal to the demarcation point size, and overrides the grid class for small screen devices. Therefore, applying any.col-md-* grid class on an element applies to devices that are larger than or equal to the size of the demarcation point and overrides the grid class for small-screen devices. Therefore, applying any.col-lg-* on the element does not exist and also affects large-screen devices.

Grid System Layout Container

Bootstrap requires a.container to wrap the page content and grid system. We provide two classes for this purpose. Note that these two container classes cannot be nested within each other due to attributes such as padding.

The.container class is used for containers of fixed width that support responsive layout

...

The.container-fluid class is used for containers that are 100% wide and occupy the entire viewport

...

Use of Grid Systems

The use of grid systems is really all about combinations of columns. There are four properties in basic usage, namely column combination, column offset, column nesting, and column ordering. Because different screen size use different styles, we will use the medium screen (md) as an example, and other screens will be used similarly.

1. Column combination

Column grouping is combining columns by changing numbers, similar to colspan in a table. Column composition is implemented in a simple way, involving only two CSS properties: left float and percentage.

Note: When using the grid system, just remember that the total number of cells per row is 12, and you can freely combine them according to the actual project.

.col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-8 .col-md-4 .col-md-4 .col-md-4 .col-md-4 .col-md-6 .col-md-6

Related recommendations: "bootstrap introduction tutorial"

2. Column offset

Sometimes we don't want two adjacent columns next to each other, and we use the column offset function of the raster system to achieve this without defining a margin value. For medium screens, you can offset columns to the right using a style of the form.col-md-offset-*.

For example,.col-md-offset-2 means moving the element two column widths to the right.

.col-md-4 .col-md-4 .col-md-offset-4 .col-md-3 .col-md-offset-3 .col-md-3 .col-md-offset-3 .col-md-6 .col-md-offset-3

3. Column nesting

The grid system also supports column nesting, where one or more rows are declared within a column, but note that when the width of the nested row is 100%, it is the width of the current outer column. A nested row cannot contain more than 12 columns.

Level 1：col-md-8 Level 2：col-md-6 Level 2：col-md-6 Level 3：col-md-3 Level 3：col-md-6 Level 1：col-md-4

Note: You can see that in the first column (col-md-8), a new row (row) is nested, and then in the new row, two columns of equal width (col-md-6) are placed, and the two col-md-6 add up to 12, but the total width is the same as the width of the outer col-md-8 column, that is, the column width in the row is distributed according to percentage. In any nested column, regardless of width, it can be divided into 12 more equal parts, and can be further combined.

4. Column sorting

Column sorting is about changing the orientation of columns, that is, changing the left and right float, and setting the distance of the float. In grid systems, this can be done with.col-md-push-* and.col-md-pull-*.

.col-md-9 .col-md-push-3 .col-md-3 .col-md-pull-9

Description: By default, col-md-9 is on the left and col-md-3 is on the right. If you want to swap positions, you need to move col-md-9 three columns to the right, that is, push the offset of three columns, and use col-md-push-3 as the style; col-md-3 needs to move to the left, that is, pull nine offsets, and use col-md-pull-9 as the style.

responsive grid

We all know that Bootstrap can make responsive pages. It provides different grid styles for different screen size. In the previous example, we have been using medium screen (md), since it is a responsive page, of course, it should also include ultra small screen (xs), small screen (sm), large screen (lg), etc.

Bootstrap Grid Parameters

Description: See the table below for details on how Bootstrap's grid system works on a variety of screen devices.

About "bootstrap grid system example analysis" This article is shared here, I hope the above content can be of some help to everyone, so that you can learn more knowledge, if you think the article is good, please share it to let more people see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.