What is bootstrap adaptive

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.

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;
}
}

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!