版权声明
- 本文原创作者：谷哥的小弟
- 作者博客地址：http://blog.csdn.net/lfdfhl
栅格系统工作原理
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
- “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
- 通过“行（row）”在水平方向创建一组“列（column）”。
- 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
- 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
- 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
- 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
- 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
- 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
- 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-*
重点概括：
- 1、栅格系统应置于布局 .container 或 .container-fluid中。或者说在这两种布局中使用栅格系统
- 2、栅格系统将页面"切分"成一行一行的
- 3、在行中存在最多12列
- 4、每列中的内容与其左边框默认存在padding，可手动设置padding-left: 0px进行消除
栅格参数
在以下类前缀中.col-sm-较为常用。
在以下类前缀中.col-xs-较为少用；毕竟，低分辨率的设备很少。
栅格系统案例
<!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>
运行结果如下：
