How to create a grid system with Bootstrap

What I bring to you this time isBootstrapHow to make a grid system. We know that it is very important to make a grid system in Bootstrap. This article will give you a good analysis.

Bootstrap is based on HTML, CSS, JAVASCRIPT. It is simple and flexible, making web development faster.

The grid system is the core of Bootstrap. It is precisely because of the existence of the grid system that Bootstrap can have such a powerful responsive layout solution.

The official documentation says this:

Bootstrap Provides a responsive, mobile-first fluid grid system that automatically divides into up to 12 columns as the screen or viewport size increases. Contains predefined classes for simple layout options, as well as powerful mixin classes for generating more semantic layouts.

Let’s understand this paragraph and find that the most important part is mobile device priority. So what is mobile device priority?

The basic CSS code of Bootstrap starts from small screen devices (such as mobile devices, tablets) by default, and then uses media queries to expand to large screen devices (such as laptops, desktop computers) Components and Grids.

has the following strategy:

Content: Decide what is most important.
Layout: Prioritize designing smaller widths.
Progressive enhancement: Add elements as the screen size increases.

The grid system is used to create page layouts through a series of combinations of rows and columns. Your content can be placed into these created layouts. .

Works as follows:

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

<div class="container"><!-- 水平居中，两边有margin，最小屏幕时，充满父元素 -->
 <div class="row"></div>
</div>
<!-- 或者 -->
<div class="container-fluid"><!-- 默认一直充满整个父元素 -->
 <div class="row"></div>
</div>

Your content should be placed within "column", and only "column" can be a direct child element of row.

Similar. The predefined classes row and .col-xs-4 can be used to quickly create the mixin defined in the Bootstrap source code. Can also be used to create semantic layouts.

Create a gutter between columns by setting the padding attribute for "column". By setting a negative margin for the .row element This offsets the padding set for the .container element, and indirectly offsets the padding for the "column" contained in the "row".
Negative value Margin is why the example below protrudes outward. Contents in grid columns line up.

Columns in the grid system represent the range they span by specifying values ​​from 1 to 12. For example, three equal-width columns can be created using three .col-xs-4.

If the "column" contained in a "row" is greater than 12, the elements where the extra "column" is located will be arranged as a whole in another row.

The grid class is suitable for devices with a screen width greater than or equal to the dividing point size, and the grid class is overridden for small screen devices. Therefore, applying any The .col-md-* grid classes are suitable for devices with screen widths greater than or equal to the breakpoint size, and override the grid classes for small screen devices. Therefore, applying any .col-lg-* on the element does not exist, Also affects large screen devices.

I believe you have mastered the method after reading the above introduction. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to use Vue’s custom instructions to complete a drop-down menu

About HTTP/2 server push

How nvm manages different versions of nodes

The above is the detailed content of How to create a grid system with Bootstrap. For more information, please follow other related articles on the PHP Chinese website!