A brief discussion on adaptive screens in Bootstrap

This article will talk about the adaptive screen in Bootstrap. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Bootstrap is a simple, intuitive and powerful front-end development framework developed based on HTML.css.javaScript, which enables web developers to quickly create responsive web pages. [Related recommendations: "bootstrap Tutorial"]

bootstrap adaptive:

Bootstrap divides devices into ultra-small screen, small screen according to the screen size There are four types of screen, medium screen and large screen, and the screen is divided 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, in the elements window, you will find that when the screen 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 media (device/browser) query @media only screen Query the width of the device

The bottom layer is presented with @media only screen and (min-width: minimum value) and (max-width: maximum value):

Example pair Background:

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

Example 2: Integrate and adapt block-level elements p

     
    
div1
 
div2
  

bootstarp
Step

1. The link tag introduces the bootstrap.css file
2. Define it in bootstrap
1) The root element must be p class value must be equal to container
2) The root element must contain The row element and the row element class value must be equal to row
3) The value of the column class contained in the row must be col-*-number

For example:

      
   
  
  
div1
 
div2
 
div3
 
 
 
  

More programming related For knowledge, please visit:Introduction to Programming! !

The above is the detailed content of A brief discussion on adaptive screens in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!