Bootstrap响应式栅格布局实现方法
2016-07-27 本文已影响2400人
潇Lee
栅格系统的原理
栅格系统原理
假设：Flowline的宽度为W，column的宽度为c，Gutter的宽度为g，Margin的宽度为m，栅格列数为N
W = c*N + g*(N-1) + 2m；g的宽度通常为m的两倍，所以：
W = (c+g) * N；把c+g记为C，得：
W = C * N;
大部分的栅格系统都是此公式的变体。
Bootstrap的栅格系统
下面我们将一起来看一下常见的栅格布局的设计和bootstrap中的设计实现。BootStrap中合理的使用栅格布局，必须将列放入row中，而row必须放入container中。container类在布局中主要有两个作用：
- 在不同的宽度区间内（响应式断点）提供宽度限制。当宽度变化时，采用不同的宽度。
- 提供一个padding，阻止内部内容触碰到浏览器边界。
Bootstrap中使用padding代替上文中的margin。大小为15px，如下图所示，粉红色为padding大小。
Bootstrap container
Row是column的容器，每个row中的column之和必须为12，不过我们可以通过嵌套的方式扩展。Row的左右margin都为-15px，用来抵消container中的padding，如下图蓝色部分所示：
Boostrap row
row的这种设计主要为了方便嵌套，后文中会提到。
Colomn是栅格系统的主角，每个column左右padding都为15px，上文中row的负margin抵消了container的padding，所以为每个column设置padding就是为了防止内容直接触碰边界，同时不同的column之间拥有30px的卡槽（Gutter）。如下图黄色部分所示：
现在想想上文中提到的公式：W = C * N;
上文提到row的负margin设计主要为了嵌套，如果要在column中嵌套column首先要把被嵌套的column放到row中，把row放到作为容器的column中，而不需要在放置一个container。如下图中蓝色所示，是放入column中的row的负margin区域。
现在将被嵌套的column放入row中，如下图所示，上层column便是起到了container的作用。
如此我们便看到了Bootstrap栅格系统的精妙所在。
以上为博客引用内容，原博客地址为：CSS：谈谈栅格布局
自己实现响应式的栅格系统布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap栅格系统</title>
</head>
<style type="text/css">
@media screen and (max-width: 768px){
.container{
width: auto;
}
.col-md-1{
width: auto;
padding: 0px 15px;
}
.col-md-3{
width: auto;
padding: 0px 15px;
}
}
@media screen and (max-width: 992px) and (min-width: 768px){
.container{
width: 750px;
}
.col-md-1{
width: auto;
padding: 0px 15px;
}
.col-md-3{
width: auto;
padding: 0px 15px;
}
}
@media screen and (min-width: 992px) and (max-width: 1200px){
.container{
width: 970px;
}
.col-md-3{
width: 25%;
float: left;
padding: 0px 15px;
}
.col-md-1{
width: 8.33333333%;
float: left;
padding: 0px 15px;
}
}
@media screen and (min-width: 1200px){
.container{
width: 1170px;
}
.col-md-3{
width: 25%;
float: left;
padding: 0px 15px;
}
.col-md-1{
width: 8.33333333%;
float: left;
padding: 0px 15px;
}
}
*{
box-sizing: border-box;
}
.container{
padding: 0px 15px;
margin: 0 auto;
}
.container:after{
clear: both;
display: block;
content: "";
}
.row{
margin-left: -15px;
margin-right: -15px;
}
.row:after{
display: block;
clear: both;
content: "";
}
</style>
<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 class="row">
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
</div>
</div>
</body>
</html>
实现效果
横向布局
纵向布局
