开发者学堂课程【移动 Web 前端开发：BootBootstrap-栅格系统统】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8444
Bootstrap-栅格系统
一、 栅格系统
在 Bootstrap 当中很重要的栅格系统，Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类、还有强大的 mixin 用于生成更具语义的布局。这里直接上案例，案例会驱动栅格系统的过程。
首先，新建一个 HTML File 给它命名为05栅格系统，这里强调一下，有行有列这样的布局可以看见它是跟网格一样的图片，像这样的布局方式就称为栅格系统
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1,user-scalable=0">
<title>栅格系统</title>
<link href="../lib/bootstrap/css/bootstrap.min.css"rel-"stylesheet">
<!--[if lt IE 9]>
<script src="../lib/html5shiv/html5shiv.min.js"></script>
<script src="../lib/respond/respond.min.js"></script>
<![endif]-->
<style>
.container
height: 200px;
background:yellowgreen；;
}
</style>
</head>
<body>
.container >.row{
height:50px;
background:red;
}
.container >.div{
height:50px;
background:pink;
}
设置的高度一样，这里要讲的主要是这个 row 所带有的特性，普通的div带的宽度是1140，这里主要表明了它的间距，找到复原图后查看一下它的模型，左右有个15的 padding，所以这里面的程序是根据内容的宽度来设置的，正好为1140。
</style>
</head>
<body>
<！--响应式容器-->
<div class=”container-fluid”>
<！--栅格系统-->
<！--行 row 可以清除父容器的左右15px内边距-->
</style>
</head>
<body>
上面主要学习了 container 和 row 类，
常用的类
布局容器
.container 响应式容器
.container-fluid 流式容器
栅格系统
row 行
col-*-* 列 实例 col-md-4 表示在中等屏幕，缩小屏幕时，它自动往下掉，说明此时的屏幕并没有在sm下。
参数有两个
第一个参数 表示屏幕的尺寸
lg 大屏 大屏及以上生效
md 中屏 中屏及以上生效
sm 小屏 小屏及以上生效
xs 超小屏 超小屏及以上生效
第二个参数
默认会把一行分成12等份 表示的是当前元素占12等份当中的几份
取值范围为1-12，超过12就没有效果了
<！--响应式容器-->
<div class=“container”>
<！--栅格系统-->
<！--行 row 可以清除父容器的左右15px内边距-->
<div class=”row”>
<！--列-->
<！--需求：三列平均分配一行的宽度-->
<div class=”col-xs-4”></div>
<div class=”col-xs-4”></div>
<div class=”col-xs-4”></div>
这个标签里所有的框架甚至伪元素设置成从边框开始计算的这样一个过程，此时就算加边框也不会再往下掉了。这里的数字表示它的每一等份
<！--需求：四列平均分配一行的宽度-->
<div class=”col-xs-3”></div>
<div class=”col-xs-3”></div>
<div class=”col-xs-3”></div>
<div class=”col-xs-3”></div>
</div>
</div>
表示在超小屏中一个等份为4，列在进行排列的时候如果宽度超过了12等份它会自动换行。这属于栅格系统中最基本的操作
<script src="../lib/jquery/jquery.min.js"></script>
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
接下来看一下栅格系统的基本框架，通过它的模型可以看到它有一个内边距为15，然后外面的内边距也需要设置为15。
简介
"行（row）"必须包含在 .container （固定宽度）或.container-fluid （100%宽度）中，以便为其赋予合适的排列（aligment ）和内补（pading）。
通过"行（row）"在水平方向创建一组"列（column）"。
你的内容应当放置于列（column）"内，并且，只有列（column）"可以作为行（row）"的直接子元素。
类似 .row和 .co1-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-1g-* 不存在，也影响大屏幕设备。
这些是上面讲的内容的一个总结。
