Bootstrap framework is one of the most popular front-end frameworks. Bootstrap is powerful, easy to learn, and very suitable for practical application scenarios. But it contains a lot of content, novices often can not quickly master. Next, let’s make a brief summary of the bootstra grid system
What is the definition of bootstrap grid system?
Bootstrap includes a responsive, mobile device first, unfixed grid system, which can be appropriately expanded to 12 columns with the increase of device or view size. It includes predefined classes for simple layout options and powerful hybrid classes for generating more semantic layouts
Three aspects can be sorted out from the above words
1. Bootstrap 3 is a mobile priority
2. Bootstrap grid system up to 12 columns
3. Bootstrap contains many predefined classes
In the page we usually write, if the browser shrinks to a certain extent, the page will be dislocated and deformed. This is not true in bootstrap because it is adaptive.
Bootstrap grid system related classes
\1. The container class represents the grid. Using the container class, you can get the alignment and padding styles of bootstrap default settings.
\2. Use. Row to create a row, and each row is divided into multiple columns.
\3. Use. Col – [screen style] – [percent] to preset column elements to quickly create a grid.
\4. Contents should be placed in columns, and only columns can be direct child elements of rows.
\5. Columns create gaps between column contents by padding. The inner margin is obtained by taking a negative value of the outer margin on. Rows. That is to say: you want to reduce the column spacing and use negative margin to write.
\6. The grid system is created by specifying twelve available columns that you want to span. For example, to create three equal columns, use three. Col-md-4.
The basic structure of bootstrap grid
< div class = “container” > / / container
< div class = “row” > / / rows in the grid
< div class=”col-–”>< / div > / / direct element column under row
< div class=”col-–”>< /div>
< div class=”row”>…< /div>
< div class=”container”>
Bootstrap grid divides devices into four types
Super small devices (mobile phones), small devices (tablets), medium-sized devices (laptops) and large devices (large monitors) can not exceed 12
Their columns are identified by different class prefixes.
. col XS for ultra small equipment
. col SM for small equipment
. col MD for medium equipment
. col LG for large equipment-
No matter what kind of equipment, their gap is 30px; 15px and padding- right:15px; ）
To work with grid layouts
\1. Introduce the library needed by bootstrap
It’s like introducing an external style sheet, but this is a bootstrap style sheet, which includes CSS and JS
\2. Add bootstrap container
Write a div in the body and add a container class for the Div. this class is very useful. It can create a middle area in the page, and then we put other elements in it. It is equal to creating a middle div box with static width and margin value of auto. The priority of container is that it is responsive. It will calculate the best width to use based on the width of the current screen.
\3. Add row to the container
We use row for horizontal layout
\4. Add columns in row
It’s like adding td to tr after adding tr to the table.
The columns in row are our previous. Col-xs-6, which add up to exactly 12 columns
The grid system is the core of bootstrap. It is precisely because of the grid system that bootstrap has such a powerful responsive layout scheme.