栅格布局
栅格布局是用于Bootstrap框架中的页面分配，它的作用主要是做响应式页面方面，能够适应现在我们的手机，pid，电脑，更大屏幕的电脑。只需要做一个页面就可以适配这四种情况哦。非常的方便，相比较之前我们聊得流式布局，flex布局，rem布局，栅格布局显得更简单啦。那么怎么操作呢？原理是什么呢？往下面看…
之前我们说过rem布局的时候需要把屏幕分成你需要的份数，然后用总屏幕宽度除以这个分数得出，font-size的值，以方便我们后边求页面元素的大小引用这个字体大小进行运算，这是之前讲的rem布局，里面值得说的是，份数，栅格是把屏幕分成了12等份，并且会随着屏幕的大小，同时这12等份也会跟着扩大或缩小。那你要问了：怎么使用呢…
首先我们到bootstrap官网：https://v3.bootcss.com/把样式类下载下来。
下载下来以后，我们看一下文件里面都有什么？
我们现在主要引用的样式文件是紫色箭头指向的Css文件，把他移动到我们的样式文件中，方便页面引用。引用以后怎么做呢…
下面看一个使用的小测试：
在使用之前先说一下注意事项：
- bootstrap使用时，html结构中的父盒子的类名必须是
.container类，因为这个类里面是团队给我们写好的样式，如果换了类名就没有效果了。 这个父盒子有了以后，我们知道栅格布局是分配的列，那么我们得把行先定义好，因此，.container后面必须是.row为类名的子盒子，然后再在.row盒子中放任意数量需要布局的盒子. - 屏幕分成了四个大小。也就分别对应的有四个类名，（屏幕尺寸从小到大排列：col-xs ； col-sm ； col-md ;col-lg ;）
- 那你可能要问了：怎么知道我
.row中的小盒子占几份呢？很简单，在上面相应的屏幕大小类的后面添加数字即可eg:（col-xs-5 ：表示在超小屏幕中，以col-xs-5为类名的盒子占用这个屏幕宽度为5份大小。 那么col-md-10就是在中等屏幕上占10份啦。） tips: 我们的盒子得写够12份，不然盒子空间会占不满，就会有空隙自适应的时候不好看。
测试：
结构：
// 先引用我们的bootstrap中的bootstrap.min.css文件，然后再写结构.....
<body>
<div class="container"> // 父类为：.container
<div class="row"> // 父类下面给一个行.row，方便在行中分列，12等份
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">1</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">2</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">3</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">4</div>
// 我们可以看出：我给行中的四个小盒子设置了不同的份数，那么代表什么意思呢？怎么去看呢？ 首先：Col-后面跟的有xs，sm,md，lg四种，那么我们就一类一类的看，l先看col-lg类;lg代表的是大屏幕的时候，很显然我后面跟的都是3，一共四个3，正好12份，他的实现结果也就是正好一行把四个小盒子实现平均分配。
// 我们同理再看：.col-xs-12,这个什么意思呢？其实我想实现的就是在超小屏幕的时候那么每个元素就直接占一行显示，这样我们看的更清楚，也更能体现响应式的好处。
</div>
</div>
</body>
上面如果没看明白的话，我把他都摘出来我们来看效果：
-
四个盒子都是：col-lg-3大屏的时候：（可以看到在最大屏幕的时候，四个小盒子平均分配，各占3份，一共12份）。
-
.col-md-4：
-
.col-sm-6：
-
.col-xs-12
看到这里我们就明白了，栅格布局在不同的屏幕上是怎么分配列的。
看到这里是不是就想动手试试啦？
不要着急，后面还有几个好用的类…
- col-lg-offset-向右偏移的份数
代码：如下：
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 ">1</div>
<div class="col-lg-3 col-lg-offset-6">2</div> // offset-9也就是让第二个盒向右偏移9份，当然这份数是从最左边开始查的，也就是第一个盒子占用的位置也占用了，类似于绝对定位，相对.row盒子给他设置left偏移值，我们设置9个，他本身大小为3个，也就是说正好让他不掉到第二行，显示在第一行最后的位置。
</div>
</div>
</body>
- col-lg-push-需要向右推的份数
代码：
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 ">1</div>
<div class="col-lg-3 col-lg-push-1">2</div> // push实现了向右推的效果；
</div>
</div>
</body>
- col-lg-pull-向左拉回多少个格
<body>
<div class="container">
<div class="row">
<div class="col-lg-3">1</div>
<div class="col-lg-3 col-lg-offset-6 col-lg-pull-1">2</div> // 向左拉一个格子的大小
</div>
</div>
</body>
以上就是栅格布局常用的相关知识；
tips：栅格布局一共分为12格，另外一行分好的格子里面是可以继续嵌套的，记得在这个格子里写上.row包裹着，并且此时格子仍为12份，再让这个格子里面的元素分配这12份即可，操作与上面的思路相同。
实现的结果：
tips:孙盒子的类名要与他爹的名字保持一致，也就是屏幕大小尺寸部分。
<body>
<div class="container">
<div class="row">
<div class="col-lg-3">1</div>
<div class="col-lg-3">
<div class="row">
<div class="col-lg-6">2</div>
<div class="col-lg-6">3</div>
</div>
</div>
</div>
</div>
</body>
726
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
