What is bootstrap adaptive

WBOY
Release: 2022-06-21 17:12:53
Original
3033 people have browsed it

In bootstrap, adaptive refers to dividing the device into four types: ultra-small screen, medium screen, medium screen, and large screen according to the screen size. The webpage will be divided into 12 columns according to the different device screens. , divide the browser into rows and columns to achieve self-adaptation; no matter how big the screen is, self-adaptation will try not to wrap lines, but only scale horizontally.

What is bootstrap adaptive

The operating environment of this tutorial: Windows10 system, bootstrap5 version, DELL G3 computer

What is bootstrap adaptive

bootstrap adaptive:

Bootstrap divides the device into four types: ultra-small screen, small screen, medium screen, and large screen according to the screen size and divides the screen into 12 columns

The corresponding screen width is:

  • Ultra-small screen (mobile phone): 0-768px Corresponding setting class=col-xs-number

  • Small screen (Tablet): 768-992px corresponding setting class=col-sm-number

  • Medium screen (computer): 992-1200px corresponding setting class=col-md-number

  • Large screen (computer): 1200px-? Corresponding setting class=col-lg-number

In the chrome browser, you will find the screen in the elements window When the width is less than 768,

only com-xs-12 takes effect.

Adaptive: The webpage adapts to different devices, using the bootstrap framework

Principle: It is the media (device/browser) query @media only screen query the width of the device

bootstrap is Adaptive; adaptive means that no matter how big the screen is, try not to wrap lines and just scale horizontally. Bootstrap is adaptive through the fence system; the grid system divides the container into 12 equal parts by defining the size. , divide the browser into rows and columns to achieve adaptation.

Examples are as follows:

@media only screen and (min-width:0px) and (max-width:480px){
body{
background-color:red;
}
}
@media only screen and (min-width:481px) and (max-width:720px){
body{
background-color:green;
}
}
@media only screen and (min-width:721px){
body{
background-color:blue;
}
}
Copy after login

Related recommendations: bootstrap tutorial

The above is the detailed content of What is bootstrap adaptive. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template