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

In this article, the editor introduces in detail "what is the principle of bootstrap rasterization". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "what is the principle of bootstrap rasterization" can help you solve your doubts.

In bootstrap, the principle of rasterization is to segment according to the size of the device, the width of each segment is fixed, and the responsive layout is achieved through percentage and media queries, so that the same set of pages can adapt to different resolution devices.

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

What is the principle of bootstrap rasterization?

Bootstrap adopts a 12-column grid system, which is segmented according to the size of the mainstream equipment, each segment is fixed in width, and the responsive layout is realized through percentage and media queries.

If you are new to bootstrap, you will admire his rasterized layout. He provides us with a responsive layout.

Bootstrap grid system layout

To put it simply:

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

2. The implementation principle of the grid system is very simple, only by defining the container size, dividing 12 parts equally (or 24 or 32 parts equally, but 12 parts is the most common), then adjusting the inner and outer margin, and finally combining with media query, a powerful responsive grid system is made. The grid system in the Bootstrap framework divides the container into 12 parts.

Media inquiry

In a grid system, we use the following media query (media query) in the Less file to create a critical demarcation point threshold.

/ * very small screen (mobile phone, smaller than 768px) * / / * there is no code related to media query, because this is the default in Bootstrap (remember that Bootstrap is a priority for mobile devices? ) * / / * small screen (flat panel, greater than or equal to 768px) * / @ media (min-width: @ screen-sm-min) {.} / * medium screen (desktop display, greater than or equal to 992px) * / @ media (min-width: @ screen-md-min) {.} / * large screen (large desktop display) 1200px) * / @ media (min-width: @ screen-lg-min) {.}

We occasionally include max-width in the 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) {...} here This article "what is the principle of bootstrap rasterization" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more related articles, you are welcome to follow the industry information channel.

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.