柵格系統(tǒng)的原理
柵格系統(tǒng)原理
假設(shè)：Flowline的寬度為W彼妻，column的寬度為c贵试，Gutter的寬度為g，Margin的寬度為m，柵格列數(shù)為N
W = c*N + g*(N-1) + 2m；g的寬度通常為m的兩倍呆馁，所以：
W = (c+g) * N；把c+g記為C毁兆，得：
W = C * N;
大部分的柵格系統(tǒng)都是此公式的變體浙滤。
Bootstrap的柵格系統(tǒng)
下面我們將一起來(lái)看一下常見的柵格布局的設(shè)計(jì)和bootstrap中的設(shè)計(jì)實(shí)現(xiàn)。BootStrap中合理的使用柵格布局气堕，必須將列放入row中纺腊，而row必須放入container中。container類在布局中主要有兩個(gè)作用：
- 在不同的寬度區(qū)間內(nèi)（響應(yīng)式斷點(diǎn)）提供寬度限制茎芭。當(dāng)寬度變化時(shí)揖膜，采用不同的寬度。
- 提供一個(gè)padding梅桩，阻止內(nèi)部?jī)?nèi)容觸碰到瀏覽器邊界壹粟。
Bootstrap中使用padding代替上文中的margin。大小為15px宿百，如下圖所示趁仙，粉紅色為padding大小洪添。
Bootstrap container
Row是column的容器，每個(gè)row中的column之和必須為12雀费，不過(guò)我們可以通過(guò)嵌套的方式擴(kuò)展干奢。Row的左右margin都為-15px，用來(lái)抵消container中的padding盏袄，如下圖藍(lán)色部分所示：
Boostrap row
row的這種設(shè)計(jì)主要為了方便嵌套律胀，后文中會(huì)提到。
Colomn是柵格系統(tǒng)的主角貌矿，每個(gè)column左右padding都為15px，上文中row的負(fù)margin抵消了container的padding罪佳，所以為每個(gè)column設(shè)置padding就是為了防止內(nèi)容直接觸碰邊界逛漫，同時(shí)不同的column之間擁有30px的卡槽（Gutter）。如下圖黃色部分所示：
現(xiàn)在想想上文中提到的公式：W = C * N;
上文提到row的負(fù)margin設(shè)計(jì)主要為了嵌套赘艳，如果要在column中嵌套column首先要把被嵌套的column放到row中酌毡，把row放到作為容器的column中，而不需要在放置一個(gè)container蕾管。如下圖中藍(lán)色所示枷踏，是放入column中的row的負(fù)margin區(qū)域。
現(xiàn)在將被嵌套的column放入row中掰曾，如下圖所示旭蠕，上層column便是起到了container的作用。
如此我們便看到了Bootstrap柵格系統(tǒng)的精妙所在旷坦。
以上為博客引用內(nèi)容掏熬，原博客地址為：CSS：談?wù)剸鸥癫季?/a>
自己實(shí)現(xiàn)響應(yīng)式的柵格系統(tǒng)布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap柵格系統(tǒng)</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>
實(shí)現(xiàn)效果
橫向布局
縱向布局
