html - 网格设计的高效代码

Question

最近我被介绍了引导程序和RWD。我已经理解了整个想法，但我似乎无法掌握网格系统。我创建了一个 div 容器来进行固定设计。我想使用网格，但网页中有很多空间。意思是这样的：

标题

大约 10 行可用空间

内容/内容/内容

大约 5 行可用空间

内容

如何使用网格设计我的网页？我想我要问的不是如何，而是什么是有效的方法。我不希望我的代码混乱。谢谢。

Answer 1

<div class='container'>
    <div class='row'>
        <div class='span12'>HEADER</div>
    </div>

    <div class='row'>
        <div class='span4'>CONTENT</div>
        <div class='span4'>CONTENT</div> 
        <div class='span4'>CONTENT</div>
    </div>

    <div class='row'>
        <div class='span12'>CONTENT</div>
    </div>    
</div>

至于空闲空间的线条，根据需要添加边距