what are the units of bootstrap grid system

1. What is Bootstrap

Bootstrap provides a set of responsive, mobile device-first fluid barriers. Grid system, as the screen or viewport size increases, the system will automatically divide into up to 12 columns. 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?

Bootstrap's basic CSS code starts by default on small screen devices (such as mobile devices, tablets), and then uses media queries to expand to components and grids on large screen devices (such as laptops, desktop computers).

has the following strategy:

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

Related recommendations: "Bootstrap Getting Started Tutorial"

2. Working Principle

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

Works like this:

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

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

Create a group of "columns" in the horizontal direction through "rows". However, the sum of the number of columns cannot exceed the total number of equally divided columns (when exceeded, the excess will be displayed in a new line), and the default is 12. (Customized settings can be made using Less or Sass), as follows:

<div class="container">
 <div class="row">
  <div class="col-md-2"></div>
  <div class="col-md-6"></div>
  <div class="col-md-4"></div>
 </div>
</div>

Your content should be placed in the "column", and only the "column" can be used as a row. "direct child elements.

Predefined classes like .row and .col-xs-4 can be used to quickly create grid layouts. Mixins defined in the Bootstrap source code can also be used to create semantics oriented layout.

By setting the padding attribute for "column", create a gap (gutter) between columns. By setting a negative value margin for the .row element, it offsets the .container The padding set by the element indirectly offsets the padding for the "column" contained in the "row".
The negative margin is the reason why the following example protrudes outward. In the grid The content in the grid column is arranged in a row.

Columns in the grid system represent the range they span by specifying a value from 1 to 12. For example, three equal-width columns can use three .col -xs-4 to create.

If a "row" contains more than 12 "columns", the elements where the extra "columns" are located will be treated as a whole Arrange on a new line.

The grid class applies to devices with a screen width greater than or equal to the breakpoint size, and the grid class is overridden for small screen devices. Therefore, apply any .col-md- on the element * The grid class applies to devices with a screen width greater than or equal to the breakpoint size, and the grid class is overridden for small screen devices. Therefore, applying any .col-lg-* on an element does not affect large screen devices as well.

The above is the detailed content of what are the units of bootstrap grid system. For more information, please follow other related articles on the PHP Chinese website!