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

This article mainly introduces "how to achieve responsive layout in bootstrap". In daily operation, I believe many people have doubts about how to achieve responsive layout in bootstrap. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to achieve responsive layout in bootstrap". Next, please follow the editor to study!

In bootstrap, the responsive layout is realized by using the grid system to use different class attributes for different screens, the system will be automatically divided into 12 columns, and the responsive layout uses the grid system to create a page layout through a series of rows and columns.

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

The principle of implementing responsive layout with bootstrap

The implementation principle of the grid system is to define the container size, divide it equally into 12 parts (also divided into 24 or 32 parts, but 12 parts is the most common), then adjust the internal and external margins, and finally combine with media query to create a powerful responsive grid system.

The implementation principle of the grid system is to define the container size, divide it equally into 12 parts (also divided into 24 or 32 parts, but 12 parts is the most common), then adjust the internal and external margins, and finally combined with media query, a powerful responsive grid system is made. The grid system in the Bootstrap framework divides the container into 12 parts.

Advantages and disadvantages of bootstrap:

1.bootstap recently released bootstrap4, with updates such as box-flex layout, to keep up with the latest developments in web technology.

two。 Mature, fully used and tested in a large number of projects

3. With complete documentation, it is more convenient to use

4. There are a large number of component styles that can be customized.

Disadvantages:

1. If you have your own special needs, you need to re-customize the style, and if there are a large number of non-bootstrap "style" styles in a website, then you need to do a lot of css rewriting, so you lose the point of using the framework.

two。 There will be compatibility problems, although there are many ways to be compatible with IE on the Internet, but other files need to be introduced, some of which are not small, which will inevitably lead to slower loading speed and affect the user experience.

Bootstrap responsive layout uses its grid system and uses different class attributes for different screens. In the development, you can write only one set of code that can be used on both the tablet and PC side of the phone, without considering the use of media queries (writing different codes for different devices). Bootstrap's official explanation: Bootstrap provides a responsive, mobile device-first streaming grid system that automatically divides into 12 more columns as the screen or viewport (viewport) size increases. The grid system is used to create a page layout by combining a series of rows (row) and columns (column).

How the grid system works:

1. Lines (row) must be contained in .container (fixed width) or .container-fluid (100% width) to give them the appropriate arrangement (aligment

) and padding.

two。 Create a set of columns (column) horizontally through rows (row).

3. Your own content should be placed in a column (column), and only the column can be used as a direct child element of a row (row).

4. Predefined classes like .row and .col-xs-4 can be used to quickly create grid layouts. The mixin defined in the Bootstrap source code can also be used to create a semantic layout.

5. Create a column-to-column gutter by setting the padding property for the column. By setting a negative margin for the .row element to counteract the padding set for the .container element, the padding is indirectly offset by the column (column) contained in the row.

6. The columns of a grid system represent its span by specifying values from 1 to 12. For example, three columns of equal width can be created using three .col-xs-4.

7. If the column contained in a row is greater than 12, the elements of the extra columns will be arranged in a separate row as a whole.

8. The grid class is suitable for devices with a screen width greater than or equal to the size of the demarcation point, and covers the grid class for small screens.

The following figure shows the application of the grid system on a variety of screens.

Use Bootstrap responsive layout

First of all, you need to introduce the meta tag in the head and add the viewpirt attribute. The width in the content is equal to the device width. Initial-scale: the zoom level of the visible area of the page is displayed for the first time. If the value is 1, the page is displayed according to the actual size without any zoom; maximum-scale: the minimum scale to which the user is allowed to zoom; and user-scalable: whether the user can zoom manually. The code is as follows:

The following is the page that uses the bootstrap layout (login form interface), for the phone's ultra-small screen (iphone5s) and PC screen (> = 1200px). Col-xs-12: small screen occupies 12 column size, col-lg-5: large screen occupies 5 column size, col-lg-offset-3: large screen indents 3 column size. This is a relatively simple example. If you want to adapt to other screens such as tablets, you can add col-md-* attributes, and large-screen phones can add col-sm-* attributes. For the specific properties of the screen, please refer to the different uses for different screen Bootstrap grid systems in the figure above.

User logs in to mailbox

Password

Remember me

Forget your password?

Log in

Code effect diagram:

PC side:

Mobile end:

At this point, the study on "how to achieve responsive layout in bootstrap" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.