A brief discussion on adaptive screens in Bootstrap-Bootstrap Tutorial-php.cn

A brief discussion on adaptive screens in Bootstrap

青灯夜游

Release： 2021-05-12 11:16:08

forward

4591 people have browsed it

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.

A brief discussion on adaptive screens in Bootstrap

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

Copy after login

Example 2: Integrate and adapt block-level elements p

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<style type="text/css">
div{
float:left;
}
/**小屏0px-768px*/
@media only screen and (min-width:0px) and (max-width:768px){
.sm-12{
width:100%;
	}
}
/**大屏768*/
@media only screen and (min-width:768px){
.lg-6{
width:50%;
	}
}

</style>
<!-- 两个样式不会同时生效 在小屏上sm-12生效, width是100%在大屏上lg-6生效,width50%
css中标签分块级标记和行级标记,div是块级元素 -->
<div class="sm-12 lg-6">div1</div>
<div class="sm-12 lg-6">div2</div>
</body>
</html>

Copy after login

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:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 根元素必须是div class必须=container -->
<div class="container">
<!-- 根元素必须包含行 class=row -->
<div class="row">
<!-- 行中包含列 -- class=col-*-number-->
<div class="col-xs-12 col-sm-6 col-md-4">div1</div>
<div class="col-xs-12 col-sm-6 col-md-4">div2</div>
<div class="col-xs-12 col-sm-6 col-md-4">div3</div>
</div>
<div class="row"></div>
</div>
</body>
</html>

Copy after login

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!