English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Related Reading:
BootStrap Tutorial (Part One) - Visual Layout
BootStrap Tutorial (Part Two) - Fixed Built-in Styles
Bootstrap Grid System (Grid System)
The responsive grid system automatically divides into a maximum of12Columns
Working Principle
· Rows must be placed within the .container class to achieve proper alignment and padding.
· Use rows to create horizontal groups of columns.
· Content should be placed within columns, and only columns can be direct children of rows.
· Predefined grid classes, such as .row and .col-xs-4，which can be used to quickly create a grid layout. LESS mixins can be used for more semantic layouts.
· Columns are created by padding (padding) to create gaps between column content. This padding is obtained by taking the negative margin (margin) on .rows, indicating the offset of the first and last columns in the row.
· The grid system is created by specifying the twelve available columns you want to span. For example, to create three equal columns, use three .col-xs-4.
Media queries
/* Extra small devices (phones, less than 768px) */
/* Bootstrap does not have default media queries */
/* Small devices (tablets,768px onwards) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktop computers,992px onwards) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktop computers,1200px onwards) */
@media (min-width: @screen-lg-min) { ... }
Basic grid structure
<div class="container"> <div class="row"> <div class="col-*-*></div> <div class="col-*-*></div> </div> <div class="row">.../div> </div> <div class="container">....
Example 1: Horizontal Stacking
The code is as follows:
<!DOCTYPE html> <html> <head> <title>Bootstrap Example - Horizontal stacking</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Hello, world!</h1> <div class="row"> <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p> accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p> </div> <div class="col-md-6" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p> accusantium doloremque laudantium. </p> <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,</p> consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. </p> </div> </div> </body> </html>
Effect:
Ensure the total number of units is12to ensure a harmonious display effect. Exceed12They will be lined up. If the number of units in a single row exceeds12What about this:
As shown in the figure above, if the number of units in a single row exceeds12The inner padding will be lost.
Example 2: Medium and large devices
Sleeping late and getting up early with many dreams is also incurable.
Medium devices are50%/50%, large devices are33%/66If the percentage is 0%, then it can be written like this:
<div class="col-md-6 col-lg-4">....</div> <div class="col-md-6 col-lg-8">....</div>
The source code is as follows:
<!DOCTYPE html> <html> <head> <title>Bootstrap Example - Medium and large devices</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Hello, world!</h1> <div class="row"> <div class="col-md-6 col-lg-4" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p> accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p> </div> <div class="col-md-6 col-lg-8" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p> accusantium doloremque laudantium. </p> <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,</p> consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. </p> </div> </div> </body> </html>
If so, the display for medium devices is50%/50%：
The display for large devices is33%/66%：
Similarly, you can also set it up for mobile devices:
<div class="col-sm-3 col-md-6 col-lg-4">....</div> <div class="col-sm-9 col-md-6 col-lg-8">....</div>
Source code and effect are omitted.
Responsive column reset
The position of the grid cannot be determined on small devices.
The solution is to add a responsive block (the description may not be accurate), using the .clearfix class and responsive utilities:
<div class="container"> <div class="row" > <div class="col-xs-6 col-sm-3" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="col-xs-6 col-sm-3" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut. </p> </div> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3" style=" box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div class="col-xs-6 col-sm-3" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim </p> </div> </div> </div>
Here is an explanation of this middle sentence:
<div class="clearfix visible-xs"></div>
Responsive utilities are currently applicable to block and table switching. You can see from the following two tables.
Basic grid structure
<div class="container"> <div class="row"> <div class="col-*-*></div> <div class="col-*-*></div> </div> <div class="row">.../div> </div> <div class="container">....
Example 3: Responsive utility
Source code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">-8">
<title>Bootstrap Example - Responsive utility</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding: 40px;">
<div class="row visible-on">
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444>
<span class="hidden-xs">extra small</span>
<span class="visible-xs">✔ Visible on especially small devices</span>
</div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444>
<span class="hidden-sm">small</span>
<span class="visible-sm">✔ Visible on small devices</span>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444>
<span class="hidden-md">medium</span>
<span class="visible-md">✔ Visible on medium devices</span>
</div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444>
<span class="hidden-lg">large</span>
<span class="visible-lg">✔ Visible on large devices</span>
</div>
</div>
</div>
</body>
</html>
the effect is as follows:
on large devices:
other devices are omitted.
offset columns
.col-xs=*class does not support offset, which can be achieved by using an empty cell.
use .col-md-offset-*class can increase the left outer margin of a column*columns, where*range is from1to11.
<div class="container">
<h1>Hello, world!</h1>
<div class="row" >
<div class="col-xs-6 col-md-offset-3"
style="box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit.
</p>
</div>
</div>
</div>
Effect:
nested columns
nested requires adding a new .row, and then adding a group of .col inside this nested .row-md-*the number of columns in this group cannot exceed12.
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-md-3" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444>
<h4>first column</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<div class="col-md-9" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444>
<h4>second column - divided into four boxes</h4>
<div class="row">
<div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444>
<p>
Consectetur art party Tonx culpa semiotics. Pinterest
assumenda minim organic quis.
</p>
</div>
<div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444>
<p>
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div class="row">
<div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444>
<p>
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim.
</p>
</div>
</div>
</div>
</div>
</div>
Effect:
column sorting
is somewhat like positioning. .col-md-push-*is equivalent to left; .col-md-pull-*similar to right. Among them*range is from1to11. Tags have a higher level in the later hierarchy.
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<p>Before sorting</p>
<div class="col-md-4" style="
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444>
I am on the left
</div>
<div class="col-md-8" style="
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444>
I am on the right
</div>
</div><br>
<div class="row">
<p>After sorting</p>
<div class="col-md-4 col-md-push-1"
style="
box-shadow: inset 1px -1px 1px #444,
inset -1px 1px 1px #444>
I am on the left
</div>
<div class="col-md-8 col-md-pull-2"
style="
box-shadow: inset 1px -1px 1px #444,
inset -1px 1px 1px #444>
I am on the right
</div>
</div>
</div>
Effect:
Reference:http://www.runoob.com/bootstrap/bootstrap-grid-system.html
The above is the Bootstrap入门教程(三)Responsive Principle introduced by the editor for everyone, hoping it will be helpful to everyone. If you have any questions, please leave a message, and the editor will reply to everyone in time. At the same time, I would also like to express my heartfelt thanks to everyone for supporting the Yelling Tutorial website!