I learned bootstrap a few days ago and sorted out the grid system. If there are any errors, please feel free to correct them.
Summary: The grid system has developed responsive web pages for PC, pad and mobile terminals, and there are different solutions based on different screen resolutions.
(0.1, screen device size is greater than 1200px Select col-lg
(0.2. Screen device size is between 970px and 1200px Select col-md
(0.3. Screen device size is between 768px and 970px Select col-sm
(0.4. Screen device size is less than 768px Select col-xs
1. The grid 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>Raster system</title> <link rel="stylesheet" href="library/bootstrap.min.css"> <style> .a{ height: 50px; border: 1px red solid; background: pink; } </style></head><body> <div> <div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>3</div> <div>9</div> </div> </div> </div> </div> </div><script src="library/jq.js"></script> <script src="library/bootstrap.min.js"></script></body></html>(2.1, col-md-1 is a column, with a total of 12 columns covered with a "horizontal row". The number trailing after md is the number of columns assigned, (col-lg, col-sm, col-xs is the same)
3. Under devices with different screen resolutions, the page presented is the corresponding "raster format bar page", thereby realizing 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>Raster system</title> <link rel="stylesheet" href="library/bootstrap.min.css"> <style> .a{ height: 50px; border: 1px red solid; background: pink; } </style></head><body> <div> <div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> </div> </div> </div><script src="library/jq.js"></script> <script src="library/bootstrap.min.js"></script></body></html>(3.1. The code above shows that when the screen device size is greater than 1200px, one horizontal row has four columns, one large column has three small columns, and the small column has a total of 12 columns.
(3.2, indicating that when the screen device size is between 970px and 1200px (you can first look at the browser shrinking to this stage), there are three columns in a horizontal row, and four columns in a large column, with a total of 12 columns.
(3.2, indicating that when the screen device size is between 768px and 970px (you can first look at the browser shrinking to this stage), there are two large columns in a horizontal row, and six small columns in a large column, with a total of 12 columns.
(3.2, indicating that when the screen device size is less than 768px (you can first look at the browser shrinking to this stage), there is a large column in a horizontal row, and a large column has twelve small columns, with a total of 12 columns.
4. Column offset, nesting and swap positions in the raster system
(4.1, column offset
<div> <div>8</div> <div>3</div> <!-- Column offsets one by one to the right --> </div>
(4.2, nesting
<div> <!-- Nesting--> <div style="padding:0;"> <div></div> <div></div> <div></div> </div> <div>3</div> </div>
(4.3, swap position
<div> <!-- swap position --> <div>9</div> <!-- push, move to the right --> <div>3</div> <!-- pull, move to the left --> </div>
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
This article uses the simplest cases to analyze the key layout points involved in the case, hoping to be helpful to everyone's learning.