This article will mainly introduce Bootstrap's grid system.
The implementation of the grid system is to define the container size, divide 12 parts (or 24 parts or 32 parts, but 12 parts are the most common), then adjust the inner and outer margins, and finally combine media queries to create a powerful responsive grid system.
The grid system in Bootstrap is to divide the container into 12 parts.
Bootstrap's grid system is used for layout, which is actually a combination of columns. There are four basic usages:
1. Column combination
Change the number to merge columns (principle: the sum of columns cannot exceed 12), for example:
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>Basic usage of column combination</title><link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"><!--css style--><style > [class *= col-]{ background-color: #eee; border: 1px solid #ccc; }</style></head><body><br><div> <div> <!--The grid system in Bootstrap divides the container into 12 pieces--> <!--This line is split evenly separated by 1:1:1--> <div>.col-md-4</div> <div>.col-md-4</div> <div>.col-md-4</div> <div>.col-md-4</div> </div> <div> <!--This line is split evenly separated by 1:2:1--> <div>.col-md-3</div> <div>.col-md-6</div> <div>.col-md-3</div> </div> </div></div></body></html>The renderings are as follows:
2. Column offset
Add the class name "col-md-offset-*" on the column element (where the asterisk represents the number of column combinations to be offset), and the column with this class name will be offset to the right.
<div> <!--The spacing of four columns moving to the right--> <div> <div>.col-md-4</div> <div> The spacing of four columns moving to the right</div> <div>.col-md-3</div> </div><!--The spacing of four columns moving to the right</div> <div>.col-md-3</div> </div><!--The row break occurred --><div> <div> <div>.col-md-4</div> <div> The spacing of four columns moving to the right</div> <div>.col-md-3</div> </div> <div> <div>.col-md-3</div> <div> <div>.col-md-3</div> <div> <div>col-md-offset-3</div> <div>col-md-4</div> </div> </div>
The renderings are as follows:
3. Column sorting
Column sorting is to change the direction of the column, change the floating left and right, and set the floating distance. Bootstrap is achieved by adding the class names "col-md-push-" and "col-md-pull-" (where the asterisk represents the number of moving column combinations).
<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>Basic Usage</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <!--css style--> <style > [class *= col-]{ background-color: #eee; border: 1px solid #ccc; } </style></head><body> <div> <div> <div>.col-md-3</div> <div>.col-md-6</div> </div> </div></body></html>4. Nesting of columns
<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>Basic Usage</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <!--css style--> <style > [class *= col-]{ background-color: #eee; border: 1px solid #ccc; } [class *= col-] [class *= col-] { background-color: #f36; border:1px dashed #ffff; color: #ffff; } </style></head><body> <div> <div> <div> <div> I have a grid nested in it<div> <div> <div> Col-md-6</div> <div>col-md-6</div> </div> </div> <div>col-md-4</div> </div> </div> </div> </div></body></html>The renderings are as follows:
If you still want to learn in depth, you can click here to learn and attach two exciting topics to you: Bootstrap learning tutorial Bootstrap practical tutorial
Series of articles:
The first time I came into contact with the magical Bootstrap basic layout //www.VeVB.COM/article/89278.htm
The first time I came into contact with the magical Bootstrap form //www.VeVB.COM/article/89330.htm
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.