1、流体容器
<!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>
.container-fluid {
background-color: pink;
}
</style>
</head>
<body>
<div class="container-fluid">
哈哈哈
</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>
2、固定容器
<div class="container">
哈哈哈
</div>
| 阈值 |
width |
| 1200<=w (lg 大屏pc) |
1170 |
| 992<=w<1200 (md 中屏pc) |
970 |
| 768<=w<992 (sm 平板) |
750 |
| w<768 (xs 移动手机) |
auto |
3、栅格系统
<!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>
.container {
background-color: pink;
}
div[class|=col] {
border: 1px solid;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-10">col-lg-10</div>
<div class="col-lg-2">col-lg-2</div>
</div>
<div class="row">
<div class="col-lg-6">col-lg-6</div>
<div class="col-lg-6">col-lg-6</div>
</div>
<div class="row">
<div class="col-lg-3">col-lg-3</div>
<div class="col-lg-7">col-lg-7</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>
4、栅格源码分析
1.流体容器&固定容器 公共样式
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
2.固定容器 特定样式
顺序不可变
@media (min- @screen-sm-min) {
@container-sm;
}
@media (min- @screen-md-min) {
@container-md;
}
@media (min- @screen-lg-min) {
@container-lg;
}
3.行
margin-left: -15px;
margin-right: -15px;
4.列
.make-grid-columns()--->
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
...
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.make-grid(xs)--->
float-grid-columns(@class);
* .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,...col-xs-12{
* float: left;
* }
.loop-grid-columns(@grid-columns, @class, width);
* .col-xs-12{
* 12/12;
* }
* .col-xs-11{
* 11/12;
* }
* ...
* .col-xs-1{
* 1/12;
* }
.loop-grid-columns(@grid-columns, @class, pull);
.loop-grid-columns(@grid-columns, @class, push);
*push pull:
* .col-xs-push-12{ .col-xs-pull-12{
* left:12/12; right:12/12;
* } }
* .col-xs-push-11{
* left:11/12;
* }
* ... ...
* .col-xs-push-1{
* left:1/12;
* }
* .col-xs-push-0{ .col-xs-pull-0{
* left:auto; right:auto;
* } }
.loop-grid-columns(@grid-columns, @class, offset);
响应式工具
栅格盒模型设计的精妙之处
容器两边具有15px的padding 、
行 两边具有-15px的margin
列 两边具有15px的padding
为了维护槽宽的规则，
列两边必须得要15px的padding
为了能使列嵌套行
行两边必须要有-15px的margin
为了让容器可以包裹住行
容器两边必须要有15px的padding