栅格盒模型设计的精妙之处
容器两边具有15px的padding
行 两边具有-15px的margin
列 两边具有15px的padding
为了维护槽宽的规则，
列两边必须得要15px的padding
为了能使列嵌套行
行两边必须要有-15px的margin
为了让容器可以包裹住行
容器两边必须要有15px的padding
bootstrap栅格系统&源码分析
流体容器
auto
两侧15px padding
固定容器
阈值
xs（小于768px） width：auto
sm（大于等于768px） width：720+槽宽
md（大于等于992px） width：940+槽宽
lg（大于等于1200） width：1140+槽宽
两侧15px padding
行
两侧-15px margin
列
公共样式
两侧有15px 的padding
相对定位
float
width
1~12
left和right属于列排序
left
right
0~12
0：auto
margin属于列偏移
margin-left
0~12
列排序
注意阈值上样式的设置不能跳跃
列偏移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>列偏移</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<style>
.row {
background-color: pink;
}
div[class|=col] {
border: 1px solid;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-lg-offset-4">col-lg-4</div>
</div>
</div>
</body>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>
代码
以最左边线为基准，pull拉，向左偏移，push推，向右偏移
上一篇BootStrap__容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<style>
a:link, a:visited, a:hover, a:active {
text-decoration: none;
}
</style>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3 col-lg-push-9 col-md-4 col-md-push-8 col-sm-6 col-sm-push-6">
<div class="thumbnail">
<img src="img/Svelte.png" alt="...">
<div class="caption text-center">
<h3>
<a href="javascript;:" title="Svelte 中文网">4 Svelte<br/>
<small>中文网</small>
</a>
</h3>
<p>Svelte 是构建 Web 应用程序的一种新方法。Svelte 是一个编译器，它将声明性组件转换成高效的 JavaScript 代码，并像做外科手术一样细粒度地更新 DOM。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-lg-push-3 col-md-4 col-md-pull-0 col-sm-6 col-sm-pull-6 ">
<div class="thumbnail">
<img src="img/TypeScript.png" alt="...">
<div class="caption text-center">
<h3>
<a href="javascript;:" title="TypeScript 中文手册">3 TypeScript<br/>
<small>中文手册</small>
</a>
</h3>
<p>TypeScript 是由微软开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-lg-pull-3 col-md-4 col-md-pull-8 col-sm-6 col-sm-pull-0">
<div class="thumbnail">
<img src="img/React.png" alt="...">
<div class="caption text-center">
<h3>
<a href="javascript;:" title="React 用于构建用户界面的 JavaScript 框架">2 React<br/>
<small>用于构建用户界面的 JavaScript 框架</small>
</a>
</h3>
<p>React 起源于 Facebook 的内部项目，是一个用于构建用户界面的 JavaScript 库。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-lg-pull-9 col-md-4 col-md-pull-8 col-sm-6 col-sm-push-0">
<div class="thumbnail">
<img src="img/Webpack.png" alt="...">
<div class="caption text-center">
<h3>
<a href="javascript;:" title="Webpack 是前端资源模块化管理和打包工具">1 Webpack<br/>
<small>是前端资源模块化管理和打包工具</small>
</a>
</h3>
<p>Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。</p>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>