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

This article mainly explains "what is bootstrap Grid". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what is bootstrap Grid"?

Bootstrap grid refers to Bootstrap's 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 size increases.

This article operating environment: Windows7 system, bootsrap3.3.7 version, DELL G3 computer

What is the bootstrap grid?

Bootstrap's grid system (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 Grid?

Excerpt from Wikipedia:

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 Bootstrap Grid system (Grid System)?

The description of the grid system in the official Bootstrap documentation:

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.

Let's understand the above sentence. Bootstrap 3 is a mobile device priority, and in this sense, Bootstrap code starts with small screen devices (such as mobile devices, tablets) and then extends to components and grids on large screen devices (such as laptops, desktops).

Mobile device priority policy

Content

Decide what is most important.

Overall Arrangement

Give priority to designing a smaller width.

The basic CSS is mobile devices first, and media inquiries are aimed at tablets and desktops.

Progressive enhancement

Add elements as the screen size increases.

The responsive grid system automatically divides into up to 12 columns as the screen or viewport (viewport) size increases.

At this point, I believe that you have a deeper understanding of "what is bootstrap grid", might as well come to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.