小课堂【栅格布局的实际运用及原理】

1.背景介绍

1692年，新登基的法国国王路易十四感到法国的印刷水平不尽人意，因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的， 重视功能性的新字体。

委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导，他们以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方格单位，每个方格单位再分成36个小格，这样，一个印刷版面就有2304个小格组成，在这个严谨的几何网格网络中设计字体的形状，版面的编排，试验传达功能的效能，这是世界上最早对字体和版面进行科学实验的活动，也是栅格系统最早的雏形。

网页栅格系统的定义为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。

2.知识剖析

我们接触到的布局方式有哪些呢？

我们常用的布局方式是那些？

接下来我们以任务8为例，看一下栅格布局的实际运用。

首页

代码实现

<div class="container">
<div class="row">
    <div class="dominant col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="dominant-box flexbox flex-column">
            <div class="icon-tag"><img src="img/rocket.png"></div>
            <h5>高效</h5>
            <p>将五到七年的成长时间，缩短到一年到三年</p>
        </div>
    </div>
    <div class="dominant col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="dominant-box flexbox flex-column">
            <div class="icon-tag"><img src="img/archive.png"></div>
            <h5>规范</h5>
            <p>标准的实战教程，不会走弯路</p>
        </div>
    </div>
    <div class="dominant col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="dominant-box flexbox flex-column">
            <div class="icon-tag"><img src="img/connections.png"></div>
            <h5>人脉</h5>
            <p>同班好友，同院学长，技术大师，
                入学就混入职脉圈，为以后铺平
                道路。</p>
        </div>
    </div>
    <div class="dominant col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="outputting flexbox flex-column">
            <h6><img src="img/user.png">&nbsp;12400</h6>
            <p>累计在线学习人数</p>
            <h6><img src="img/user.png">&nbsp;12400</h6>
            <p>学员已经找到满意工作</p>
        </div>
    </div>
</div>

底部

代码实现

<div class="footer-left col-lg-5 col-md-5 col-sm-6 col-xs-12">
           <p>技能树 — 改变你我</p>
           <ul>
               <li class="verticalline"><a href="">关于我们</a></li>
               <li class="verticalline"><a href="">联系我们</a></li>
               <li><a href="task15-3.html">合作企业</a></li>
           </ul>
       </div>
       <div class="footer-middle col-lg-5 col-md-5 col-sm-6 col-xs-12">
           <p>旗下网站</p>
           <ul>
               <li><a href="">草船云孵化器</a></li>
               <li><a href="">最强IT特训营</a></li>
           </ul>
           <ul>
               <li><a href="">葡萄藤轻游戏</a></li>
               <li><a href="">桌游精灵</a></li>
           </ul>
       </div>
       <div class="footer-right col-lg-2 col-md-2 col-sm-12 col-xs-12">
           <p>微信公众平台</p>
           <img src="img/QRcode.png">
       </div>

推荐页

职业介绍页

栅格套栅格，非全局页面的运用

代码实现  

<div class="courses col-lg-4 col-md-4 col-sm-6 col-xs-12">
               <ul class="course box-shadow clearfix">
                   <li class="job tr">
                       <img class="col-xs-5 col-sm-5" src="img/icon-head.png">
                       <div class="col-xs-7 col-sx-7">
                           <h3>web前端工程师</h3>
                           <p>
                               Web前端开发工程师，主要职责是<!--
                  -->利用（X）HTML/CSS/JavaScript/<!--
                  -->flash等各种Web技术进行产品的开<!--
                  -->发。
                           </p>
                       </div>
                   </li>
                   <li class="tr">
                       <div class="td col-sm-6 col-xs-6 gray">门槛<img src="img/star.png"></div>
                       <div class="td col-sm-6 col-xs-6 gray">难易程度<img src="img/star.png"><img src="img/star.png">
                       </div>
                   </li>
                   <li class="tr">
                       <div class="td col-sm-6 col-xs-6 gray">成长周期<span>1-3</span>年</div>
                       <div class="td col-sm-6 col-xs-6 gray">稀缺程度<span>345</span>家</div>
                   </li>
                   <li class="pay">
                       <div class="pay-left col-sm-6 col-xs-6"><p class="gray">薪资待遇</p></div>
                       <div class="pay-right pd0 col-sm-6 col-xs-6">
                           <div class="col-sm-5 col-xs-5">
                               0-1年
                           </div>
                           <div class="col-sm-7 col-xs-7">
                               5-10K/月
                           </div>
                           <div class="col-sm-5 col-xs-5">
                               1-3年
                           </div>
                           <div class="col-sm-7 col-xs-7">
                               10-20K/月
                           </div>
                           <div class="col-sm-5 col-xs-5">
                               3-5年
                           </div>
                           <div class="col-sm-7 col-xs-7">
                               20-50K/月
                           </div>
                       </div>
                   </li>
                   <li class="td pd0 col-sm-12 col-xs-12">
                       有<span>286人</span>正在学习
                   </li>
                   <li class="td pd0 gray col-sm-12 col-xs-12">
                       提示:在你学习之前你应该已经掌握XXXX、XXX等语言基础
                   </li>

3.常见问题

栅格布局的原理是什么呢？

4.解决方案

栅格布局其实就是依赖于自然布局中的宽度百分比以及浮动来实现的。

而要弄清楚栅格布局的原理，我们可以直接通过查看bootstrap中栅格布局的源码来进行实现。

• 屏幕的自适应：xs,sm,md,lg
• 利用百分比实现的网格布局
• container与container-fluid的区别
• offset,push,pull
• 
  

5.编码实战

6.扩展思考

栅格布局中，怎么实现响应式中的内容切换呢？

我们一般是利用visible-xs、hidden-xs来进行实现，查看源代码。

7.参考文献

参考一：Bootstrap学习笔记上

参考二：Bootstrap中文网

8.更多讨论

怎么实现栅格布局的五等分？

怎么用flexbox来实现栅格布局？