一个简单的栅格实例之缩略图

一个小小的响应式页面设计

做四个类似于bootstrap官网上的这个缩略图，缩略图，咱这个地方的缩略图就是上面一个图片，下面有文字解释的东西，然后我们这里设计的这四个缩略图是要符合响应式页面的，就是可以跑在多个终端上面，这里的四个图会根据页面大小来进行换行

步骤：

先引入bootstrap的jquery文件
再引入bootstrap的bootstrap.js文件
写一个固定容器
去bootstrap官网粘贴缩略图的代码复制到固定容器里面
修改相关信息

在我们写很多样式的时候，我们都可以用这个步骤，最主要的是找对我们需要的样式在bootstrap官网里面对应的代码，然后我们就直接复制过来进行修改就行

引入文件

第一个文件引入的是jquery，我们要引入bootstrap中的样式需要先引入jquery，因为bootstrap是基于jquery写的，然后第二行引入bootstrap的js文件，这都是为后面引入的css文件作铺垫，然后后面引入css的文件，这里引入的是压缩过的css文件

当然我们也可以把引入jq和js和css的代码写在最下面即：

这样可读性更强

这里，我们还需要引入一个文件，<meta name="viewport" content="width=device-width, initial-scale=1">，这个东西，这个最主要用于移动端的，如果不加这个，响应式页面有可能在移动端无法正常改变样式如下：

就会变成这个样子，下面多一个滚动条，而且原来应该一行一个的缩略图不会换行了

看看bootstrap官网上怎么说：

<meta http-equiv="X-UA-Compatible" content="IE=edge">，这句话其实是指定浏览器按某种方式渲染。这个不用写也行
<meta name="viewport" content="width=device-width, initial-scale=1">这个就是使移动端不会出问题的标签了
当然这两个标签都是要写在其他内容的前面的
这上面两个标签的相关讲解请看这个链接

组件的构建

在bootstrap官网里面有很多相关的组件
bootstrap官网：地址

这里面开发人员现成的代码，我们不需要手写，直接粘贴过来就行

这里，中间粘贴过来的就是缩略图的代码，外面的div是个固定容器，把缩略图放到里面，这里，右边因为咱们还没放图片所以没图片

由代码可以看出来，缩略图也是由栅格系统写成的，栅格系统的bootstrap里面的精华所在，比较重要

修改相关的信息

即我们把我们的代码进行修改，改成我们需要的样子

上面是我们展现出来的最终效果，同时可以随着页面大小变化而自己换行

下面是bootstrap官网缩略图组件的代码

这只是一个缩略图(即一列)的代码，我们需要四个，所以我们需要复制几份，这里面，我们不需要按钮我们可以去掉。这里的代码写的是是一个固定容器包裹着一个栅格，然后栅格里面只有一个列，我们需要四列，所以我们可以这样

如下图：

这里分为三个部分，最外面红色的是固定容器，然后蓝色的是定义一个栅格，然后里面棕色的部分是列部分，是四个列的代码，这里我们删除按钮的列然后插入自己的图片，然后改一下列的阈值部分即21,31,41,51那几行的代码就可以了修改这个的技巧在这：这个链接最下面的技巧

功能拓展

假如我们要页面缩小的时候，我们要第一个缩略图先换行，再第二个，再第三个，我们可以这样写
步骤：

改html结构
设置列排序来调整位置

1.改html结构

因为栅格是用浮动写的，所以我们要页面缩小的时候，我们第一个缩略图先换行，那我们就先需要把第一个缩略图的代码写在第四行，第二个写在第三行，第三个写在第二行，第四个写在第一行

差不多这个样子
效果如下：

2.设置列排序来调整位置

我们先设置在lg状态下各个缩略图的位置

我们设置每个缩略图对应的排序左右移动份数
在lg情况下效果如下：

没有问题

然后在md和sm下是这样：


有问题

所以我们还需要设置这两种情况下的排序

这样就没有问题了，因为在sm状态下本来就是一个列独占一行，所以sm状态下不用设置排序

注意一个地方，我上图用蓝色笔标出的地方
这个是设置了md状态下他的排序移动份数是0，那么这个看起来好似是没什么用，因为md状态下，第三个logo确实不用移动，如下

第三个logo在中间，按理说确实不用移动

但是我们看如果不设置移动的话会怎么样：

他这第三个logo陷进去了，出现问题了
原因：

我们这里把md的移动注释掉了，导致第三个logo左右即为lg和为sm状态下有移动但是把本该在中间过渡段的md移动的省略了，这样就会导致移动出问题，在md状态下会自己使用sm状态下的移动，就会出现上面的情况

注意：
在我们设置栅格排序和偏移的时候，绝对不能跳着设置，即比如设置完lg的排序，不管md的排序直接设置sm的排序，不能这样，这样会出问题，如果我们不想让隔开的那个状态移动，我们可以设置他的移动份数为0，但是不能不设置

知识点小补充之压缩文件和未压缩文件的区别

压缩文件：
此处的压缩文件就比如下面

所有的代码全挤在几行中，导致下面的滚动条很长很长，然后，这样的代码可读性很低，但是人家运行速度快

未压缩文件：

就这种正常写的代码，有注释对应的格式都有，可读性较好，易于debug和更改，但是体积较大，传输时间长