Responsive layout#
I. purpose: the same set of pages can be compatible with devices of different resolutions.
2. Implementation mode: using grid system to achieve:
A row is divided into 12 squares. You can set an element to occupy several squares according to the size of the screen.
III. steps:
Step 1: define the container. Equivalent to the previous table
* container classification:
(1) container: according to the fixed size of the screen, both sides of the screen will be left blank.
(2) container fluid: no device is 100% wide.
Step 2: Style: row. Equivalent to the previous < tr >
Step 3: define the element. Specifies the number of cells the element occupies on different devices. Format: col equipment code number of cells
* Equipment Code:
(1) xs: ultra small screen (mobile phone, less than 768px)
(2) sm: small screen (flat panel, greater than or equal to 768px)
(3) md: medium screen (desktop display, greater than or equal to 992px)
(4) lg: large screen (large desktop display, greater than or equal to 1200px)
Similar writing: col-xl-12
IV. attention:
1. If the number of cells in a row exceeds 12, the excess part will wrap by itself
2. Grid class attributes can be upward compatible. Grid class is applicable to devices with screen width greater than or equal to the size of the dividing point. For example, we define small screen mobile phones, which can be used on medium screen and large screen.
3. If the real device width is less than the minimum value of the device code that sets the grid class attribute, an element will occupy a whole line.
V. when testing, you can use a browser to test. You can change the size of the browser to test different screen mobile phones
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The 3 above meta Label*Must*Put it first, anything else*Must*Follow! -->
<title>Bootstrap hello world</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!-- <!–[if lt IE 9]>-->
<!-- <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>-->
<!-- <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>-->
<!-- <![endif]–>-->
<style>
.div_class{
border: 1px solid red;
}
</style>
</head>
<body>
<!-- Defining containers-->
<div class="container">
<!-- Define row-->
<div class="row">
<!-- Defining elements-->
<!--- Define a super small screen with 12 cells in a row--->
<div class="col-xs-1 div_class">Hello</div>
<div class="col-xs-1 div_class">Hello</div>
<div class="col-xs-1 div_class">Hello</div>
<div class="col-xs-1 div_class">Hello</div>
<div class="col-xs-1 div_class">Hello</div>
<div class="col-xs-1 div_class">Hello</div>
<div class="col-xs-1 div_class">Hello</div>
<div class="col-xs-1 div_class">Hello</div>
<div class="col-xs-1 div_class">Hello</div>
<div class="col-xs-1 div_class">Hello</div>
<div class="col-xs-1 div_class">Hello</div>
<div class="col-xs-1 div_class">Hello</div>
<br/><br/><br/><br/>
<!--- Define a super small screen with 4 cells in a row and 12 cells in a row--->
<div class="col-lg-1 col-sm-3 div_class" >Hello</div>
<div class="col-lg-1 col-sm-3 div_class" >Hello</div>
<div class="col-lg-1 col-sm-3 div_class" >Hello</div>
<div class="col-lg-1 col-sm-3 div_class" >Hello</div>
<div class="col-lg-1 col-sm-3 div_class" >Hello</div>
<div class="col-lg-1 col-sm-3 div_class" >Hello</div>
<div class="col-lg-1 col-sm-3 div_class" >Hello</div>
<div class="col-lg-1 col-sm-3 div_class" >Hello</div>
<div class="col-lg-1 col-sm-3 div_class" >Hello</div>
<div class="col-lg-1 col-sm-3 div_class" >Hello</div>
<div class="col-lg-1 col-sm-3 div_class" >Hello</div>
<div class="col-lg-1 col-sm-3 div_class" >Hello</div>
</div>
</div>
</body>
</html>
