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

Most people do not understand the knowledge points of this article "what does the 12-grid system in bootstrap refer to?", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "what the 12-grid system in bootstrap refers to" article.

In bootstrap, 12-grid system refers to dividing the page layout into 1 to 12 columns of equal width, defining the column width by proportional calculation, and defining the modular page layout by the number of columns. It is a responsive, mobile device-first grid system.

Operating environment of this tutorial: Windows10 system, bootstrap3.3.7 version, DELL G3 computer

What is bootstrap's 12-grid system?

Bootstrap provides a responsive, mobile device-first streaming grid system that automatically divides into up to 12 columns as the screen or viewport (viewport) size increases.

What is a Grid?

In graphic design, a grid is a structure (usually two-dimensional) consisting of a series of intersecting lines (vertical and horizontal) used to organize content. It is widely used in the layout and content structure of print design. In web design, it is a way to quickly create consistent layouts and to use HTML and CSS effectively.

Simply put, the grid in web design is used to organize content, make the site easy to navigate, and reduce the load on the client.

What is a Bootstrap Grid system (Grid System)?

Bootstrap contains a responsive, mobile device first, unfixed grid system that can scale to 12 columns appropriately as the size of the device or viewport increases. It contains predefined classes for simple layout options as well as powerful hybrid classes for generating more semantic layouts.

Grid system refers to dividing the page layout into columns of equal width, and then modularizing the page layout through the definition of the number of columns. Bootstrap's grid system uses a 1-12 column mode and sets the column width you define through proportional calculation.

For example, if your row wants to use a two-column layout mode, then the width of each column is 50% of the outer container. No matter what device you use to browse, it will be displayed in this ratio. However, if the width of the device is less than the minimum width you set, the two columns will be side by side.

Grid system of Bootstrap

Using grid systems in Bootstrap is very simple and convenient, as long as you introduce the classes they have defined into your div.

Let's first take a look at how many grid classes Bootstrap can use:

1. Col-xs-* this is the ultra-small screen class (

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.