Bootstrap学习笔记5--栅格系统细读(推箱子)

聊五毛钱的天

到今天为止，公众号已经连更16天，共更17篇文章了，不知道这种每天坚持不断更的学习态度能持续多久。
自从开了公众号，感觉无形中就有人推着自己努力学习。这感觉挺好...
但最近半个多月熬下来，感觉身体有些吃不消了，之后可能每周会有一两天休息时间，毕竟学习是长久的事情，又岂在朝朝暮暮，哈哈。

最近也和朋友抱怨，那些很多人关注的所谓重量级公众号，天天也无非是发发广告、互推、一篇稍微好谢的文章七八个公众号轮着转发，而我天天写新鲜的东西却没人看，心态有些崩。但想想人家靠公众号吃饭，多少人一起维护一个公众号，出发点不同，就做好自己吧。很多东西都是从基础开始的，毕竟开公众号的初衷，是督促自己学习并持续总结，当然天天热情洋溢的发文章，结果没人关注没人看，朋友说你文章怎么才这几个人看，脸有些红，虚荣心得不到满足也是沮丧。

当然，什么舔着脸求别人帮忙推广转发、各种群里发红包求关注的事儿，我这种性格做不来，而且也穷的舍不得发(这是主要原因)哈哈，只能每天写完文章了转发到朋友圈，算是我最大的推广活动。说了这么多，就这样吧，虚荣的东西是虚的，学到的知识才是真的。最近感觉逼着自己学到了很多东西，继续保持就好！

后续学习状态

这周帮朋友面试了几个python技能为主、selenium为辅要求的自动化测试人员。感觉虽然好几年没做测试了，但比起他们来说，自我感觉良好许多啊，哈哈。面试了一天就懒得继续了，HR给的资源太烂懒得在这事儿上浪费时间，毕竟每晚回家时间很紧。

想想当时为了自动化爬取公司各平台数据时，也是用心学了一阵子selenium，现在感觉都忘得差不多了...所以之后的几天，打算系统的复习下python3+selenium3的只是，然后整理到公众号上。预计从明天开始吧，由浅入深，欢迎轻喷挑错。

今天讲什么？

昨晚写了一篇Flask开发vip版HttpServer的文章，感觉在使用Bootstrap设置样式和布局上，还是有些生疏不够熟练，但没办法代码这东西，就是得常去写，不会就照着别人例子抄，抄完了记，然后改巴改巴最终就成了自己的东西了。

今天针对Bootstrap的网格系统一些碎片只是进行总结下,至于内容主题，我们可以理解为Bootstrap教你推箱子

网格系统

之前简单介绍过一次网格系统与响应式布局，说到Bootstrap将浏览器默认分为12份，提供了四种栅格，对应四种设备的的分辨率
四种设备类型：

/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

对应的栅格类型：

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

响应式布局

<div class="container">
        <div class="col-xs-6 col-sm-3">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
        </div>
        <div class="col-xs-6 col-sm-3">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        <div class="col-xs-6 col-sm-3">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
        </div>
        <div class="col-xs-6 col-sm-3">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>

之前文章里写的所谓响应式，现在看来好可爱...就像上面的代码，根本都不了解，为什么一个class中既设置col-xs-6又设置col-sm-3，就说响应式，真的搞笑。container定义了在小屏设备中默认div以两列6+6=12的方式展示，大屏中以4列3*4=12的方式默认展示。当时还以为只要浏览器拖动小变了样式就叫响应式...

推箱子？

听名字以为是最早的Nokia手机自带小游戏(无意中暴露了年龄..)吗？No...我只是用来描述Bootstrap的栅格的布局变更。
先来说说栅格偏移offset

    <div class="container">
        <h3>偏移列</h3>
        <div class="col-sm-6">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
        </div>
    </div>
    <div class="container">
        <h3>偏移列</h3>
        <div class="col-sm-6 col-sm-offset-3">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
        </div>
    </div>

偏移列

看看这段html的效果，通过col-sm-offset-3对原本占左半部分的栅格进行了3个单位的偏移，是的它进行了居中效果，是否比其他的居中方式，更为简便？

再来看看嵌套列

<style>
.container>.col-sm-6 {
    border: 1px solid #999;
}
</style>
<div class="container">
    <h3>嵌套列</h3>
    <div class="col-sm-6">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Neque dolorem sed assumenda, corporis cupiditate odio nisi
            harum ipsum sit veritatis aliquam voluptas aperiam magnam
            maiores optio earum praesentium dolore rem! </p>
    </div>
    <div class="col-sm-6">
        <row>
            <div class="col-sm-6">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Neque dolorem sed assumenda, corporis cupiditate odio nisi
                    harum ipsum sit veritatis aliquam voluptas aperiam magnam
                    maiores optio earum praesentium dolore rem! </p>
            </div>
            <div class="col-sm-6">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Neque dolorem sed assumenda, corporis cupiditate odio nisi
                    harum ipsum sit veritatis aliquam voluptas aperiam magnam
                    maiores optio earum praesentium dolore rem! </p>
            </div>
        </row>
        <row>
            <div class="col-sm-6">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Neque dolorem sed assumenda, corporis cupiditate odio nisi
                    harum ipsum sit veritatis aliquam voluptas aperiam magnam
                    maiores optio earum praesentium dolore rem! </p>
            </div>
            <div class="col-sm-6">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Neque dolorem sed assumenda, corporis cupiditate odio nisi
                    harum ipsum sit veritatis aliquam voluptas aperiam magnam
                    maiores optio earum praesentium dolore rem! </p>
            </div>
        </row>
    </div>
</div>

嵌套列

我们可以看到，通过栅格的嵌套，将原本右边的col-sm-6，又再次分为了两列进行展示，so easy！

**最后看看真正的推箱子:

col-**-push-*

col-**-pull-*

    <style>
    .col-sm-3 ,.col-sm-9
     {
        border: 1px solid #999;
    }
    </style>
    <div class="container">
<row> 
        <h3>推箱子前</h3>
        <div class="col-sm-3">
            <p>左箱子</p>
        </div>
        <div class="col-sm-9">
            <p>右箱子</p>
        </div>
        </row>
        <row> 
        <h3>推箱子后</h3>
        <div class="col-sm-3 col-sm-push-9">
            <p>左箱子</p>
        </div>
        <div class="col-sm-9 col-sm-pull-3">
            <p>右箱子</p>
        </div>
        </row>
    </div>

推箱子

我们通过推箱子、拉箱子，最终将左、右两边的div进行了位置互换！

The End...

今天的内容就到这里，如果觉得有帮助，欢迎将文章或者我的公众号【清风Python】分享给更多喜欢python的人。
毕竟像我这种疯狂天天更新，还都是原创的公众号，你们很少见吧....哈哈
你也可以点击右下角的在看，让我知道你来过...
公众号内有整理好的各类福利书籍供大家下载，还想要更多的可以私信我，记得扫码关注：

清风Python