Copyright Notice
- The original author of this article: Brother Gu’s younger brother
- Author blog address: http://blog.csdn.net/lfdfhl
How grid systems work
Bootstrap provides a responsive, mobile-first fluid grid system that automatically divides into up to 12 columns as the screen or viewport size increases.
- The "row" must be contained within .container (fixed width) or .container-fluid (100% width) in order to give it proper alignment and padding.
- Create a set of "columns" horizontally from "rows".
- Your content should be placed inside a "column", and only "column" can be a direct child of a row.
- Predefined classes like .row and .col-xs-4 can be used to quickly create grid layouts. The mixins defined in the Bootstrap source code can also be used to create semantic layouts.
- Create gutters between columns by setting the padding property for the "column". The padding set for the .container element is offset by setting a negative value margin for the .row element, which indirectly offsets the padding for the "column" contained in the "row".
- A negative margin is why the example below protrudes outward. The content in the grid column is lined up.
- A column in a grid system is assigned a value from 1 to 12 to indicate the range it spans. For example, three columns of equal width can be created using three .col-xs-4.
- If the "column" contained in a "row" is greater than 12, the elements of the extra "column" will be arranged in a new row as a whole.
- The grid class applies to devices with a screen width greater than or equal to the breakpoint size, and overrides the grid class for devices with small screens. Therefore, applying any .col-md-* grid classes on an element applies to devices with a screen width greater than or equal to the breakpoint size, and overrides grid classes for devices with smaller screens. So applying any .col-lg-* on the element
Summary of key points:
- 1. The grid system should be placed in the layout .container or .container-fluid. Or rather using a grid system in both layouts
- 2. The grid system "divides" the page into rows
- 3. There are at most 12 columns in the row
- 4. The content in each column and its left border have padding by default, which can be eliminated by manually setting padding-left: 0px
Grid parameters
Among the following class prefixes, .col-sm- is more commonly used.
The following class prefixes .col-xs- are less commonly used; after all, low-resolution devices are rare.
Grid system case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>栅格系统</title>
<!--移动设备优先，即获得更好的响应式支持-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入Bootstrap的css文件-->
<link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
<!--自定义css样式-->
<style>
.col-sm-1{
border:1px red solid;
padding-left: 0px;
}
.col-sm-2{
border:1px greenyellow solid;
}
.col-sm-4{
border:1px green solid;
}
.col-sm-3{
border:1px darkblue solid;
}
</style>
</head>
<body>
<!--创建容器-->
<div class="container">
<!--栅格系统基本应用-->
<!--1行12列，每列大小相同，均为1-->
<div class="row">
<div class="col-sm-1">1</div>
<div class="col-sm-1">1</div>
<div class="col-sm-1">1</div>
<div class="col-sm-1">1</div>
<div class="col-sm-1">1</div>
<div class="col-sm-1">1</div>
<div class="col-sm-1">1</div>
<div class="col-sm-1">1</div>
<div class="col-sm-1">1</div>
<div class="col-sm-1">1</div>
<div class="col-sm-1">1</div>
<div class="col-sm-1">1</div>
</div>
<br>
<!--栅格系统基本应用-->
<!--1行6列，每列大小相同，均为2-->
<div class="row">
<div class="col-sm-2">2</div>
<div class="col-sm-2">2</div>
<div class="col-sm-2">2</div>
<div class="col-sm-2">2</div>
<div class="col-sm-2">2</div>
<div class="col-sm-2">2</div>
</div>
<br>
<!--栅格系统基本应用-->
<!--1行12列，每列大小相同，均为4-->
<div class="row">
<div class="col-sm-4">4</div>
<div class="col-sm-4">4</div>
<div class="col-sm-4">4</div>
</div>
<br>
<!--栅格系统基本应用-->
<!--1行12列后其余列自动换行至下一列-->
<div class="row">
<div class="col-sm-3">3</div>
<div class="col-sm-3">3</div>
<div class="col-sm-3">3</div>
<div class="col-sm-3">3</div>
<!--换行-->
<div class="col-sm-3">1</div>
</div>
<br>
<!--栅格系统基本应用-->
<!--1行12列，但是每列大小不相同-->
<div class="row">
<div class="col-sm-4" style="border: 1px red solid;">4</div>
<div class="col-sm-2" style="border: 1px red solid;">2</div>
<div class="col-sm-3" style="border: 1px red solid;">3</div>
<div class="col-sm-3" style="border: 1px red solid;">3</div>
</div>
<br>
<!--栅格系统的嵌套-->
<!--可将1列再拆分为12小列-->
<div class="row">
<!--可此列拆分为12小列-->
<div class="col-sm-4" style="border: 1px red solid">
<div class="col-sm-3" style="border: 1px blue solid;">3</div>
<div class="col-sm-3" style="border: 1px blue solid;">3</div>
<div class="col-sm-3" style="border: 1px blue solid;">3</div>
<div class="col-sm-3" style="border: 1px blue solid;">3</div>
</div>
<div class="col-sm-4" style="border: 1px red solid;">4</div>
<div class="col-sm-4" style="border: 1px red solid;">4</div>
</div>
<br>
<!--栅格系统列偏移offset-->
<div class="row">
<!--偏移2列-->
<div class="col-sm-8 col-sm-offset-2" style="border: 1px red solid;">8</div>
</div>
<br>
<!--栅格系统使用 -->
<div class="row">
<div class="col-sm-6 col-sm-offset-3"><h1 class="text-center">CRM管理系统 <small>V2.4</small></h1></div>
<div class="col-sm-3"><h3 class="text-center" style="margin-top: 26px;">欢迎:admin</h3></div>
</div>
</div>
</body>
</html>
The result of the operation is as follows:
