6.【前端小白系列】谈谈我对栅格系统的理解 #6

blff122620 · 2017-06-06T09:53:07Z

栅格系统

说道栅格系统，想起之前练习的圣杯布局，看下代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <link rel="stylesheet" href="./static/css/reset.css">
    <link rel="stylesheet" href="./static/css/global.css">
    <style>
        .cup{
            padding:0 100px 0 100px;
            overflow: hidden;
        }
        .cup>div{
            float: left;
            height: 100px;
        }
        .middle{
            width: 100%;
        }
        .left,.right{
            
            width: 100px;
        }
        .left{
            margin-left:-100%;
            position: relative;
            left:-100px;
        }
        .right{
            margin-left: -100px;
            position:relative;
            right: -100px;
        }
    </style>
</head>
<body>
    <div class="cup">
        <div class="middle bg1">middle</div>
        <div class="left bg2">left</div>
        
        <div class="right bg3">right</div>
    </div>
    <script type="text/javascript" src="./static/js/util.js"></script>
    <script>

    </script>  
</body>
</html>

其实可以通过通过嵌套整个圣杯(cup)到middle里，圣杯里套着另一个圣杯，看起来有点栅格的样子了，难道这就是栅格吗，并不是，我们往下看

先来看一张图

　　假设：Flowline的宽度为W，column的宽度为c，Gutter的宽度为g，Margin的宽度为m，栅格列数为N

　　W = cN + 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大小。

　　Row是column的容器，每个row中的column之和必须为12，不过我们可以通过嵌套的方式扩展。Row的左右margin都为-15px，用来抵消container中的padding，如下图蓝色部分所示：

　　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栅格系统的精妙所在。

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

6.【前端小白系列】谈谈我对栅格系统的理解 #6

6.【前端小白系列】谈谈我对栅格系统的理解 #6

blff122620 commented Jun 6, 2017 •

edited

Loading

6.【前端小白系列】谈谈我对栅格系统的理解 #6

6.【前端小白系列】谈谈我对栅格系统的理解 #6

Comments

blff122620 commented Jun 6, 2017 • edited Loading

栅格系统

其实可以通过通过嵌套整个圣杯(cup)到middle里，圣杯里套着另一个圣杯，看起来有点栅格的样子了，难道这就是栅格吗，并不是，我们往下看

Bootstrap的栅格系统

blff122620 commented Jun 6, 2017 •

edited

Loading