Home > Article > Web Front-end > A brief discussion on adaptive screens in Bootstrap

A brief discussion on adaptive screens in Bootstrap

青灯夜游forward: 2021-05-11 11:23:234574browse

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

<!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>

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>

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!

JavaScript css chrome bootstrap html class number

Statement：

This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete

Previous article：In-depth analysis of multi-selection and fuzzy query drop-down boxes in bootstrap-selectNext article：In-depth analysis of multi-selection and fuzzy query drop-down boxes in bootstrap-select

See more

A brief discussion on adaptive screens in Bootstrap

Related articles