How to implement responsive layout in bootstrap

Responsive layout concept:

Responsive web layout allows users to get a good visual experience through browsers of different sizes method. It is a popular layout method at present.

bootstrap responsive layout implementation principle:

Through CSS3 Media Queries (media (device) query), media queries allow page content to run in different media environments Different styles can be displayed (of course this style is written and specified by us).

@media is an attribute specified in CSS3, which can achieve the purpose of setting different styles for different media devices. And even on the same device, when you reset the browser size, the page will re-render based on the width and height of the browser.

Application:

Bootstrap mainly uses min-width, max-width, and and syntax to set different CSS styles at different resolutions.

@media syntax

@media mediatype and|not|only (media feature) {
CSS-Code;
}

mediatype includes print (printing device), screen (used for computer screens, tablets, smartphones, etc.), speech (application (for sound-generating devices such as screen readers); media feature is used to specify maximum width or minimum width.

Let’s take a look at an example of a layout container in bootstrap:

Bootstrap needs a .container container to wrap the page content and grid system.

As follows

固定宽度布局
<div class="container">
...
</div>
或者 流式布局
<div class="container-fluid">
...
</div>

In the bootstrap css document, the @media attribute

1591~1605行
 
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
……

The above code realizes that the width of the container container changes as the width of the browser changes. .

Recommended: bootstrap introductory tutorial

The above is the detailed content of How to implement responsive layout in bootstrap. For more information, please follow other related articles on the PHP Chinese website!