Home >Web Front-end >Front-end Q&A >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
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!