Of Stack

Detailed raster system for Bootstrap layout

  • 2021-06-28 10:29:00
  • OfStack

I learned bootstrap a few days ago and tidy up the raster system. If there are any errors, please correct them.
Summary, raster system for pc, pad, mobile development of responsive web pages, according to different screen resolutions for different solutions.
(0.1, screen device size larger than 1200px select col-lg
(0.2. Screen device size from 970px to 1200px to select col-md
(0.3. Screen device size from 768px to 970px select col-sm
(0.4. Screen device size less than 768px select col-xs

1. The raster system divides the page into 12 columns (up to 12 columns), as follows: 


<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,maxinum-scale,user-scalable=no">
 <title> grid system </title>
 <link rel="stylesheet" href="library/bootstrap.min.css">
 <style>
       .a{
        height: 50px;
        border: 1px red solid;
        background: pink;
       } 
 </style>
</head>
<body>
 <div class="container a">
  <div class="row">
   <div class="col-md-1 a">1</div>
   <div class="col-md-1 a">1</div>
   <div class="col-md-1 a">1</div>
   <div class="col-md-1 a">1</div>
   <div class="col-md-1 a">1</div>
   <div class="col-md-1 a">1</div>
   <div class="col-md-1 a">1</div>
   <div class="col-md-1 a">1</div>
   <div class="col-md-1 a">1</div>
   <div class="col-md-1 a">1</div>
   <div class="col-md-1 a">1</div>
   <div class="col-md-1 a">1</div>
  </div>

  <div class="row">
   <div class="col-md-3 a">3</div>
   <div class="col-md-9 a">9</div>
  </div>
 </div>


<script src="library/jq.js"></script> 
<script src="library/bootstrap.min.js"></script>
</body>
</html>

(2.1, col-md-1 is one column, a total of 12 columns are filled with a "horizontal row". The number following md is the number of columns allocated. (The same applies to col-lg, col-sm, col-xs)

3. On devices with different screen resolutions, the rendered pages are the corresponding "Number of Raster Formats Pages" to achieve a responsive layout, as follows: 


<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,maxinum-scale,user-scalable=no">
 <title> grid system </title>
 <link rel="stylesheet" href="library/bootstrap.min.css">
 <style>
       .a{
        height: 50px;
        border: 1px red solid;
        background: pink;
       } 
 </style>
</head>
<body>
 <div class="container">
  <div class="row">
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">1</div>
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">1</div>
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">1</div>
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">1</div>
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">1</div>
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">1</div>
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">1</div>
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">1</div>
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">1</div>
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">1</div>
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">1</div>
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">1</div>   
  </div>
 </div>

<script src="library/jq.js"></script> 
<script src="library/bootstrap.min.js"></script>
</body>
</html>

(3.1, the code in the picture above indicates that when the screen device size is larger than 1200px, one column has 4 columns horizontally, one column has 3 columns, and the total number of columns is 12.
(3.2, which means that when the screen device size is 970px to 1200px (which can be seen as when the browser is reduced to this stage first), there are 3 columns in one horizontal row, 4 columns in one large column and 12 columns in total.
(3.2, which means that when the screen device size is 768px to 970px (which can be seen as when the browser is reduced to this stage first), there are 2 columns in one horizontal row, 6 columns in one large column and 12 columns in total.
(3.2), when the screen device size is less than 768px (can be seen as the browser is reduced to this stage first), one column has a large column, one column has 102 small columns, and the total number of small columns is 12.

4. Column offsets, nesting, and swapping locations in raster systems
(4.1, column offset 


 <div class="row">   
    <div class="col-md-8 a">8</div>
    <div class="col-md-3 col-md-offset-1 a">3</div> <!--  Column Offset Right 1 position  -->   
  </div>

(4.2, nested 


 <div class="row">  <!--  nesting  -->  
   <div class="col-md-9 a" style="padding:0;">
    <div class="col-md-4 a"></div>
    <div class="col-md-4 a"></div>
    <div class="col-md-4 a"></div>
   </div>
   <div class="col-md-3 a">3</div>    
 </div>

(4.3, swap location 


 <div class="row">   <!--  Change of position  -->  
   <div class="col-md-9 col-md-push-3 a">9</div>   <!-- push, Move Right  -->
   <div class="col-md-3 col-md-pull-9 a">3</div>   <!-- pull , move left  -->
 </div>

If you want to learn more, you can click here to learn, and then attach 3 wonderful topics for you:

Bootstrap Learning Tutorial

Bootstrap Actual Warfare Tutorial

Bootstrap Plug-in Use Tutorial

This article is through the simplest case to analyze the layout points involved in the case, hoping to help everyone learn.

Related articles: