Responsive Design (2)--Introduction of bootstrap grid layout

Bootstrap has built a grid system layout for us, and through it, we can easily adapt the layout to different widths of screens.

"Grid grid system" http://v3.bootcss.com/css/#grid

"Responsive Tools" http://v3.bootcss.com/css/#responsive-utilities

Do not understand the bootstrap grid layout of students, you can first look at the above link, to understand a general.

Do you really know that? As long as you know a general, you can answer the following questions, answer the words, click on the link above to see it again

1) Bootstrap Grid Layout What is the maximum number of rows to be divided into?

2) What is the Col-xs-* class when the width of the screen is valid?

3) What class name do you want to hide an element in @media (MAX-WIDTH:1199PX)?

First, why to quote Bootstrap

Now, we have a need to do a responsive layout,

Under >=1200px width, row four columns

Between 992px~1199px, a row of three columns

Between 768px~991px, a row of two columns

<=767PX, one row

If we use the media query to write, because each media query interval to write the corresponding code, it seems very troublesome. However, it is more convenient to write with the bootstrap grid layout.

　　

　　

Second, custom bootstrap grid grid layout three, bootstrap grid grid layout does not match the PC-side design four, improve the bootstrap grid grid layout Five, with the designer of the six, the end

　　

The answer to the beginning:

1) Grid grid layout divides a row by up to 12 columns

2) Bootstrap is a mobile-first web framework, so the col-xs-* class is not written in media queries, but all widths are available. And col-sm-*, col-md-*, col-lg-* are written in the media query.

3) visible-lg-*, the screen width is less than 1200px will be hidden, * symbol for inline, Inline-block, block one of the three

　　

Responsive Design (2)--Introduction of bootstrap grid layout