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

This article mainly explains "what is the concept of bootstrap responsive layout". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the concept of bootstrap responsive layout".

In bootstrap, responsive layout means that the same page has different layouts under different screen sizes. Responsive layout can be compatible with devices with different resolutions. The grid system can be used to divide a line into 12 grids on average and specify elements to occupy several grids.

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

What does the responsive layout of bootstrap mean?

I. basic concepts

Responsive layout means that the same page has different layouts under different screen sizes and can be compatible with devices with different resolutions.

The traditional way of development is to develop one set on the PC side and another on the mobile side, but only one set of responsive layout is enough, but the disadvantage is that CSS is relatively heavy.

Implementation: depending on the grid system, divide a row into 12 grids on average, and you can specify how many grids the elements occupy.

* step: (1) define container: equivalent to the previous table * Container Classification: * container: left blank on both sides * container-fluid: each device is 100% wide (2) definition line: equivalent to the previous tr Style: row (3) definition element: specify the number of cells the element occupies on different devices, style: col- device code-grid number

Grid parameters:

Note:

(1) if the number of squares in a line exceeds 12, the excess automatically wraps. (2) Grid class properties are upwards compatible. The grid class is suitable for devices with a screen width greater than or equal to the size of the demarcation point. (3) if the real device width is less than the minimum value of the device code that sets the grid class properties, an element will be covered with a whole line.

2. Examples

.inner {border:1px solid red;} grid

Grid

Grid

Grid

Grid

Grid

Grid

Grid

Grid

Grid

Grid

Thank you for your reading, the above is the content of "what is the concept of bootstrap responsive layout". After the study of this article, I believe you have a deeper understanding of what the concept of bootstrap responsive layout is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.