What is the principle of bootstrap rasterization?

In bootstrap, the principle of rasterization is to segment according to the size of the device, with a fixed width for each segment, and to achieve responsive layout through percentages and media queries; this allows the same set of pages to adapt to different resolutions rate equipment.

The operating environment of this tutorial: Windows 10 system, bootstrap version 3.3.7, DELL G3 computer

What is the principle of bootstrap rasterization

Bootstrap adopts a 12-column grid system, segmented according to the size of mainstream devices, with a fixed width for each segment, and a responsive layout through percentages and media queries.

If you are coming into contact with bootstrap for the first time, you will definitely be in awe of its grid layout. It provides us with a set of responsive layout solutions.

bootstrap Grid System Layout

Simply put:
1. Bootstrap has a built-in set of responsive, mobile device-first fluid grid. Grid system, as the screen device or viewport (viewport) size increases, the system will automatically divide into up to 12 columns.

2. The implementation principle of the grid system is very simple. Just define the container size and divide it into 12 equal parts (it can also be divided into 24 or 32 parts, but 12 parts is the most common), and then Adjust the inner and outer margins, and finally combine media queries to create a powerful responsive grid system. The grid system in the Bootstrap framework divides the container into 12 equal parts.

Media Queries

In the raster system, we use the following media query (media query) in the Less file to create key breakpoint thresholds.

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

We also occasionally include max-width in media query code to limit the impact of CSS to a smaller range of screen sizes.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Related recommendations: bootstrap tutorial

The above is the detailed content of What is the principle of bootstrap rasterization?. For more information, please follow other related articles on the PHP Chinese website!