Is bootstrap a responsive layout?

When it comes to responsive layout, the concept of bootstrap will appear in our minds. Responsive web layout is a way to give users good visuals across browsers of different sizes. It is a popular layout method at present.

Responsive layout is a concept proposed by Ethan Marcotte in May 2010. In short, it is a website that can be compatible with multiple terminals - and Rather than making a specific version for each terminal. This concept was born to solve mobile Internet browsing. (Recommended learning: Bootstrap video tutorial)

Responsive layout can provide users with different terminals with a more comfortable interface and better user experience, and with the current development of large-screen mobile devices Popularization is not an exaggeration to describe as “the general trend”. As more and more designers adopt this technology, we are not only seeing a lot of innovation, but also seeing some established patterns.

Advantages:

Strong flexibility when facing devices with different resolutions

Can quickly solve the problem of multi-device display adaptation

Disadvantages:

Compatible with various devices, heavy workload, low efficiency

The code is cumbersome, hidden useless elements will appear, and the loading time is lengthened

In fact, this It is a compromise design solution, which is affected by many factors and cannot achieve the best results

It changes the original layout structure of the website to a certain extent, which may cause user confusion

We have learned above what responsive layout is, so how should we design it in our actual projects?

In the past, when we designed websites, we were troubled by the compatibility of different browsers and devices of different sizes. How should we calm down?

If there is a demand, there will be a solution. When it comes to responsive layout, we have to mention Media Query in CSS3. This is a good thing, easy to use, powerful, and fast... …Media Query is a powerful tool for making responsive layouts. Using this tool, we can create a variety of rich and practical interfaces very conveniently and quickly.

What is Media Query in CSS3?

Define style sheet rules through different media types and conditions.

Media queries allow CSS to more accurately act on different media types and different conditions on the same media.

Most media properties of media queries accept min and max to express "greater than or equal to" and "less than or equal to".

For example: width will have min-width and max-width. Media queries can be used on @media and @import rules in CSS, and can also be used in HTML and XML.

Through this tag attribute, we can easily implement rich interfaces on different devices, especially mobile devices, which will be more widely used.

For more technical articles related to Bootstrap, please visit the Bootstrap Tutorial column to learn!

The above is the detailed content of Is bootstrap a responsive layout?. For more information, please follow other related articles on the PHP Chinese website!