Bootstrap网格系统

网格系统介绍：

    在网格系统中行必须放在.container 类内，以获得适当的对齐和内边距。同时使用行来创建列的水平组。行用的是row类。
    我们在网格系统中把页面分为12列，内容都放在列中然后根据屏幕的大小调整列数，大屏幕显示12列，中屏幕显示6列，小屏幕显示3列。
    根据设备大小我们将设备分为四类，分别是超小设备xs、小型设备sm、中型设备md、大型设备lg。在Bootstrap中我们利用“col-设备大小-数字”类来定义列在不同设备中所占的宽度

Bootstrap网格系统框架示例：

那么判断设备大小的标准是什么？

    举例来说手机是超小设备，平板电脑是小型设备，台式机显示器是中型设备，更大型屏幕是大型设备。

那么“col-设备大小-数字”类中的数字是什么？

    我们前面介绍了，把页面分为了12列，这里的数字就是每个大列占的小列数，比如col-xs-6意思就是这个列占这个页面的6 / 12 = 50%，如果是col-xs-3那就是占页面的3 / 12 = 25%。下图是bootstrap文件的源码，可以帮助你更好地理解，请看下图：

列偏移：
    col-设备-offset-数字，利用这个类来进行列的偏移：

    这里图片示例的结果是这个列向右偏移了6小列，也就是页面宽度的6 / 12 = 50%，这就是列偏移，可以看一下这个类的源码，更好理解：

    可以看出在原本基础上左边的外边距增加了页面的50%

列嵌套：
    在行中再添加新的类.row 的div：

    红色箭头指向的地方是要思考一下的，因为按照上面的说法，我们想在col-lg-6的列中添加列，也就是在页面的50%中添加列，那么新添加的列的类是写col-lg-a、col-lg-b满足a+b=6，还是a+b=12？其实应该是a+b=12，因为这里的col-lg-数字求得的百分比是占父元素的百分比，所以新添加的列的数字加起来只要是12就行。

列排序：
    用到两个新类：
        .col-xxx-pull-N 向左移动，向左拽
        col-xxx-push-N 向右移动，向右推
    和上面的列偏移很像,请看图示：

---

Bootstrap全解笔记： ????链接

《羊卓的杨的算法笔记》：????链接

哔哩哔哩/bilibili：????羊卓的杨

羊卓的杨公众号：