Does bootstrap support mobile phones?

bootstrap supports mobile phones; Bootstrap’s responsive CSS can adapt to desktops, tablets, and mobile phones; and since Bootstrap 3, the framework includes mobile-first styles throughout the entire library.

The operating environment of this article: Windows 7 system, bootstrap2.3.2 version, Dell G3 computer.

bootstrap responsive layout

Bootstrap provides a responsive, mobile-first fluid grid system that changes with screen or viewport size. increases, the system will automatically divide it into up to 12 columns. It contains easy-to-use predefined classes, as well as powerful mixins for generating more semantic layouts.

First of all, the grid system is used to create the page layout through a series of combinations of rows and columns. Bootstrap selects different grid options according to different screen sizes. There are four grid options, ultra-small screen (mobile phone), small screen (tablet), medium screen (desktop), and large screen (extra large desktop). The grid system is divided into 12 columns, i.e. each row can hold up to 12 columns. If the number of columns contained in a .row is greater than 12 (that is, the grid cells in a row exceed 12 cells), it will be automatically typed. In short, a row can only have a maximum of 12 columns. Read the detailed analysis later.

Principle:

Through CSS3 Media Queries (media (device) query), media queries allow the page content to display different styles when running in different media environments (this style is of course It’s up to us to write the rules).

@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's syntax

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

The mediatype includes print (printing device), screen (used for computer screens, tablets, smartphones, etc.), speech (used for screen readers, etc. to make sounds) device); 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

Fixed width layout

<div class="container">
...
</div>

or fluid layout

<div class="container-fluid">
...
</div>

@media attribute in bootstrap css document

1591 ~1605 lines

@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 video tutorial" "css video tutorial"

The above is the detailed content of Does bootstrap support mobile phones?. For more information, please follow other related articles on the PHP Chinese website!