开发者学堂课程【前端开发框架Bootstrap使用教程：04-Bootstrap 全局 css 样式_栅格系统 1】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/360/detail/4223
04-Bootstrap 全局 css 样式_栅格系统 1
目录
1、栅格系统简介
2、工作原理
3、媒体查询
4、栅格参数
5、实操
一、栅格系统简介：
Bootstrap 提供了一套响应式、 移动设备优先的流式栅格系统,随着屏幕或视口( viewport)尺寸的增加,系统会自动分
为最多12列。它包含了易于使用的预定义类,还有强大的 mixin 用于生成更具语义的布局。栅格系统用于通过一系列的行( row )与列( column )的组合来创建页面布局,你的内容就可以放入这些创建好的布局。
二、Bootstrap栅格系统的工作原理:
●“行(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-1g-* 不存在，也影响大屏幕设备。
三、媒体查询
在栅格系统中,我们在 Less 文件中使用以下媒体查询( media query )来创建关键的分界点阈值。
四、栅格参数
通过下表可以详细查看bootstrap的栅格系统是如何在多种屏幕设备上工作的。
实例：从推叠到水平排列
呈现效果
五、实操
创建一个文html件
写入文件
< DOCTYPE html><html lang="en">
! <head>
<meta charset="UTF-8">
<title></title>
<link href= "bootstrap. min.css" rel="stylesheet">
</head>
3 <body>
<div class= "container">
<div class="row">
<div class="col-md- 1">. col-md-1</div>
<div class="col-md- 1">. col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="coL-md- 1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1>.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md- 1">. col-md-1</div>
<div class="coL-md- 1">. col-md-1</div>
<div class="col-md-1"> .col-md-1</div>
<div class="coL-md- 1">. col-md-1</div>
<div class="col-md- 1">. col-md-1</div>
</div>
</div>
< /body>
< /html>
添加样式
<style>
. row{
margin- bottom: 20px;
}
.row . row{
margin-top: 10px;
margin- bottom: 0;
}
[class*="col-"]{
padding-top: 15px;
padding-bottom: 15px;
background-color: #eeeeee;
border: 1px solid #dddddd;
继续添加背景颜色
background-color: rgba(86,61,124, .15);
border :
1px
solid rgba(86,61,124, .2);
（只能最多存放十二个）
