移动端布局项目，知识点包括UI切图、Swiper的使用、Bootstrap的使用、响应式布局以及如何将项目发布到gitee并实现远程访问gitee上的静态网页

回顾之前的切图方式（ps切图、cutterman切图）

首先我们要有一个psd原文件

ps切图有很多方式：图层切图、切片切图、PS插件切图等

图层切图

首先选中我们需要的图片的图层，之后右键快速导出为PNG：

当遇到这种两个图片需要合成一张导出的：

先合并图层，再导出

切片切图

首先选中切片工具：

然后用切片工具选中我们想要的图层：

之后导出：

选择格式：

GIF可能会有颜色失真，这里我们选择jpg格式

之后选择品质，品质越大图片越清晰，但是图片也越大

然后选存储

但是这里还有一个问题，看上图最后一行 切片 ，我们选择的是所有切片，这样的话不仅仅是我们选中的切片会被导出，其他所有的切片都会被导出，如果我们需要的仅仅是导出选中的图片，那我们需要选择 “选中的切片”，如下：

最后保存就行了

这时候我们切出去的图片不是透明的（又背景色）：

那想要一个透明的怎么办呢？

很简单，把背景色给关了：

之后再导出：

此时不能选jpg格式的了，因为我们想要透明的背景，此时可以选png-8也可以选png-24，反正只要是png的就行

选择导出，选择“选中的切片”：

移动切片

移动切片我们需要选择上图的“切片选择工具”

使用这个工具我们就可以移动切片的框框了：

包括移动、放大、缩小

要删除切片框框可以选中切片后delete

Cutterman插件切图

网址：http://www.cutterman.cn/zh/cutterman

下载完之后双击安装，再重启ps之后我们去扩展功能找到cutterman插件：

打开之后是个登录的对话框，注册登录即可：

操作步骤：

• 选择输出文件夹；

• 选中需要的图片（选中图层）；

• 选择是ios还是安卓还是web

• 选择格式（二倍图、三倍图、jpg、png、gif等）

• 导出图片

单个图片的切图没什么好解释的，那么如果是多图层呢？

以前我们的做法是先合并成一个图层，再导出，cutterman是不需要这样的，cutterman只需要选中若干图层，之后选中合并导出选中的图层，如下：

然后一键导出就行了

而且，最重要的是，原先我们还需要关闭白色背景层，再选中导出为png，最终才能导出一张背景透明的png图，

现在不需要了，直接选中格式为png24，出来的就是背景透明的png格式的图：

选区切图

cutterman还有一个牛逼的地方，它可以选中图层之后使用选区工具导出选中区域的图片：

具体步骤见下图红字：

项目heimamm

尽量避免使用id选择器、通配符*以及 !important

mock切图插件

这里主要讲mockplus这个网站，我们先去注册账号，下载ps插件：

双击下载的插件安装程序安装插件之后打开ps，之后我们就可以在扩展程序找到该插件了：

操作步骤：

• 创建项目

  

  点击下拉框，创建项目

• 选中需要导出的图层，选中之后点击“标记切图”，注意，标记切图操作是可以重复多次的，也就是说我们可以在上传之前多次选中图片并标记图片（当然，也可以取消标记），标记完成之后就可以点击上传按钮导出切片图了

  

点击查看项目：

双击图片：

我们发现都不用测量了，鼠标放上去直接就能显示尺寸以及颜色等信息：

最牛逼的是，他连css都给我们写好了：

还能选择图片输出的格式：

那么我们刚才在ps标记为切图的那些图呢？

我们可以选择这些切图的类型（iOS、安卓、web）：

还能选择是几倍图以及是png还是svg等等：

选中之后下载：

下载之后解压压缩包，就能看到图片了：

上述操作一般都是美工来做的，那么美工做完要怎么分享给前端人员呢？

这里有个分享，点击之后：

这里有个链接地址，分享给前端人员之后他们就可以进来这个页面测量获取元素的各种信息了

我们注意上图还有一个选项叫做： “同时邀请对方成为项目成员”

选上这个之后被分享的人员还能对图片进行修改之类的操作

同时，我们还能修改页面的大小尺寸，如上图这个 “自定义宽度” 选项，这里我们设置了 750 px，我们可以看到这个宽度下右边这个“HR面试”这个图片长宽是139px，如上图

正式开始项目（具体代码在文件：项目-heimamm）

由于使用的是flexible.js，因此还是跟以前一样我们需要约束当屏幕大于750px的时候，html字体大小就不要变化：

我们给一个默认值37.5（iPhone678的宽度就是375像素，flexible.js是分成10等份的，因此每一份37.5像素），并且用了一个!important以防该样式被覆盖

由于使用了rem，我们使用了cssrem插件，因此我们还需要设置他的根字体大小比例：

以前我们是直接去vscode的设置里面找到相应变量做修改的（具体的看之前的rem案例）

其实还可以这么改，如上图，找到插件的扩展设置，点击之后找到root font size：

这里设置为37.5，也就是1rem = 37.5px

那为什么我们的max-width设置为750，讲道理这里应该是75px，但我们却设置为37.5px呢？

其实不应该从这个方向来看问题，应该从两点思考：

• iPhone678（目标屏幕）的具体宽度，我们知道iPhone678的宽度就是375px，从这点来看设置37.5是合理的
• 最终元素的宽度，由于我们使用了cssrem插件，他会把我们写的px自动转换成rem，仔细想一想开发人员的操作：假设我们需要一个100px宽度的盒子，我们会直接写100px，转成rem是插件的事情，我们不需要管，也就是说最终他都是一个100px的盒子，跟设置成37.5还是75没有关系，只是比例不同，也就是他计算出来的rem的大小不同，仅此而已，如果我们想设置成75px，那也是完全可以的

那么为什么这里max-width是750而不是375呢？

这是为了照顾大屏，其实这里完全可以设置375的，但是设置375只照顾到了iPhone678，因为iPhone678的宽度就是375，而像ipad这种的就是768甚至更宽

使用mock切图插件，很多以前需要手动量出来的东西现在不需要了：

点击复制文本内容

粘贴过来

点击元素，复制他的背景色，粘贴过来

其他的诸如文字大小，文字颜色等等的都可以这么复制粘贴过来

如何测量元素内外边距：

首先点击目标元素，然后鼠标移动到需要测量与该元素之间距离的另外一个元素即可：

总体来看，我们可以把整个页面布局分为：

我们可以采取这种策略：用<section></section>把模块1和模块2包起来，中间有一条灰色的缝隙，那就是body的背景色

body加上背景色：

有些样式布局差不多的：

我们可以给他们指定一个公共样式

里面的话还是一个大盒子，上面装一小块，下面的轮播图装一小块

出现这种情况：

那必定是vertical-align的问题：

那我们是给上图的span加vertical-align:middle呢，还是给span里面的img加？

因为span才是和文字同级别的（通俗来讲span和文字同级别，但是img是span的儿子），所以我们应该给span加vertical-align:middle

加完之后：

swiper插件

下完后重点是要里面的两个文件：

把这个swiper.min.js复制粘贴过来

再去找swiper.min.css，并把它复制粘贴到项目目录下的css文件夹

查找样式

之后去官网找到我们需要的样式：

比方说就这个样式：

然后去找他的网页源代码：

从源代码里我们发现：需要在头部引入上述的css文件，并在尾部引入上述的js文件：

我们照着他来就行了：

引入js和css：

之后回到上面的源代码网页，按需复制：

目标是做成这样的：

我们先给他准备一个父盒子，然后把他粘贴进去：

再去复制样式：

注意，这里一定要把样式写到父盒子里面，因为我们要制作的页面中，除了这块轮播图，下面还有一块轮播图，两者样式是不一样的，所以用一个父盒子把他们隔开，将样式都写到父盒子里面：

到现在为止，我们复制了html代码和css代码，还需复制js代码：

现在我们已经能实现基本的效果了：

只不过需要进一步定制，那么怎么定制呢？

首先找到swiper官方API文档：

这里第一个就是初始化，new Swiper，也就是这个：

再一个就是我们的网页中有两个轮播图，当我们编写下面那个轮播图的时候我们还是使用的一样的轮播图代码：

所以这里我们把这段代码包在立即执行函数里面（为什么要这么做呢？那是因为上述代码中swiper是一个局部变量，如果我们下面还需要用到这个轮播图，再命名swiper就不合适了，变量名会冲突，而只要把他包在立即执行函数里面，我们就不必担心这样的问题了，下次用到轮播图我们还是可以命名为swiper）：

定制内容

接下来我们开始定制上述轮播图的内容

首先我们去找pagination：

这里可以改分页器的样式

但是我们的案例里面没有分页器：

所以分页器这个功能就可以删掉了：

小圆点就没了：

接下来去找箭头：

那怎么照呢？

技巧：

直接打开一个案例，找有箭头的demo

在网页源代码中找到人家是怎么写出这个箭头的：

一看源代码发现是多了一段navigation的代码

之后就简单了，直接去swiperAPI页面找到navigation那一块就行了

这里我们图个方便直接复制了demo的navigation代码：

改完之后有没有效果呢？

我们发现并没有什么反应：

那是因为这里我们只复制了js代码，但是html里面我们还没有加上箭头

再返回上述示例demo的代码，我们发现在html里面他还有两行代码：

我们给他加上：

这样就有了：

然后我们分析一下：

这里的每一个Slide的div其实就是下图的这么一块（上面一张图，下面一句话）

那很简单，直接一个a标签里面放img，一个p标签里面放文字，再用flex布局即可

看了一下默认的css，我们发现他已经是flex布局了，那就更简单了，补充一下我们需要的样式就行了：

这里我们给他纵向显示

效果：

之后只需要再修饰一下a以及a内部的img以及显示文字的p的样式就行了：

效果：

我们发现中间这张竟然没有把右边的压到下面

分析一下中间这张其实应该是active的，那我们去那段复制下来的css样式里面找，发现最后有几行：

写着slide-active，那八九不离十了，这个应该就是中间这张图片的样式

哪里可以再验证一下呢？

我们发现中间这张图特别大一点的，两边的图比较小，而样式代码中有个scale代码，一看代码发现中间的图就是原来大小，两边的被缩放到原来的0.8，至此我们更加坚信这个就是用来调整中间图片样式的css代码块了（其实直接看css代码命名的英文就能大概知道了）

那我们给他加上z-index：

后面只需要微调一下就行了：

比方说这里就业指导这一块跟轮播图之间有一点空隙

调一下就行：

还有一点就是中间的图是不透明的，两边的图半透明

调一下opacity就行了：

还有一个问题：

我们发现轮播图的宽度只需要540px就行了

修改swiper宽度为540px：

新的问题又来了：

两个箭头出不来

注意，这里没法直接用样式给他移出来，那是因为swiper这个盒子有个overflow: hidden

所以只能把这两个箭头拿到swiper外面了：

但这么一搞两个箭头彻底不见了：

那是因为他跑到屏幕外面去了，这里有个子绝父相，所以要给箭头的父亲加一个相对定位

解释一下这里的slidesPreview

解释一下这里的spaceBetween

就是指两张图之间的距离，值越大距离越大

解释一下这里的centeredSlides

他主要是来控制中间的图是否处于中间，我们上面一直设置这个值为true，所以中间的图一直在中间，现在我们把这句代码注释掉，中间的图就跑到默认的左边去了：

接下来我们来做最后一部分：

因为这一块跟上面那块的布局基本相似，直接复制粘贴过来：

把文字改了，把轮播图删了：

新建一个轮播图模块：

注意这里的轮播图不要和上面的冲突了，还是需要细细修改一下的

首先是js那一块：

之前的轮播图已经用了.swiper-container，那现在这一块就不能用这个了，否则肯定冲突

解决方法就是再去官网的演示demo找一个相似的轮播图（不要选一样的!）:

这回我们选这个

还是像之前一样打开该轮播图的页面将轮播图的html、js、css代码复制到项目

注意，由于不能有冲突，因此我们新建了一个盒子，那我们的css内容也需要包在这个盒子里面（上面那一块轮播图也是这个操作）：

这个时候看似没问题了，其实还是有一定的问题：

我们点击上面轮播图的箭头，下面轮播图也跟着一起动了

那是因为我们new这两个轮播图的时候new的是同一个：

上图第一个new出来的Swiper对应的div：

我们发现其实Swiper第一个参数就是一个class名，那事情就简单了，只要class名不同，就不会发生冲突

上图中div除了有一个叫做“swiper-container”的class名，还有一个class名叫做“get_job_fo”，那我们换用这个class名就可以了：

同样，第二个轮播图也给他加一个class名：

并且把他对应的那个new出来的Swiper的第一个参数也改成这个新添加上的class名：

这样两个轮播图就不会冲突了（不会出现点击一个轮播图的箭头导致另一个轮播图也发生翻页事件）

同时这里凸显了立即执行函数的一个优点（上面有提到过）：

这里我们用了两个同名的变量“swiper“来new两个不同的 Swiper 对象，由于各自都包在立即执行函数里面，所以是不会有冲突的

接下来就跟上面一样开始定制了

调整slidesPerView为2.2后的效果：

注意：

• h5这一类的标签都有margin值，有时候调好样式但是感觉h5的文字的位置不太对， 那多半就是margin的问题，调一下margin即可；
• 还有一点就是h标签的字有时候会很粗，那我们可以使用font-weight来调整字的粗细，上上图我们可以看到font-weight调成了400，还需注意这个font-weight是没有单位的（css基础中讲过）

接下来制作footer部分：

我们发现轮播图会盖住footer，虽然footer本身有定位，但是轮播图他也有定位，并且z-index似乎比footer的大，因此盖住了footer

解决方法很简单，给footer加一个大一点的z-index就行了：

之后又出现了一个问题：

footer把充电学习挡住了，这是因为footer是固定定位，固定定位不占位置，所以我们在量的时候要记得把footer的高度也量进去：

给挨着footer的上面的元素（这里是充电学习模块）添加一个padding-bottom：

这样就不会被遮住了：

将项目推送到码云

新建仓库：

设置好之后点击创建

之后就很熟悉了，使用git将代码推到码云就行了

现在代码已经在码云上了，那怎么在线访问网站呢？

使用gitee pages：

点击启动：

生成了网址：

直接打开就能访问了

还可以给网址生成二维码：

百度二维码，点击草料二维码生成器：

把生成的网址粘贴进去，点击生成二维码：

第二种将项目推送到gitee的方法（不推荐）

如果不使用git，我们其实还有第二种方法将项目推到码云

跟第一种的一样，我们新建仓库，唯一不同的是，这里需要勾选上 “使用Readme文件初始化这个仓库”（因为没有使用git，所以要借助这个Readme文件）：

之后点击文件里面的上传文件：

然后把项目直接拖拽进来就好了：

这种方法一次上传的文件个数是有限制的，所以不推荐，还是用git吧

注意：

项目里面必须要有index.html首页：

响应式布局

我们发现响应式布局能自适应屏幕大小的变化

• 响应式布局是不需要单独写移动端页面的

• 响应不同的设备来变化的

响应式布局的原理

其实就是依赖媒体查询

我们将设备按照不同大小划分为不同的等级，如上图

那问题来了，而且这个问题也困扰我很久了：媒体查询怎么控制每一个元素的大小以及他们的布局变化呢？如果每一个元素都需要进行调试那将十分麻烦

响应式布局给出了解决方案：

他有一个布局容器，根据这个布局容器来修改元素的排列方式

比方说如果布局元素比较大，那么我们就分成三列：

当宽度变小的时候，元素排成列的方式可能就不太好看了，这个时候他把元素的排列方式改成了行的方式，一行一行来显示：

这就实现了通过给父元素（布局容器）修改它的宽度，从而改变子元素不同的排列方式以及显示方式

比方说还是这个页面：

布局容器就设置成上图红框框这么大就行了

再比如说这里的导航栏：

布局容器设置成上图红框框这么大就行了（没必要跟整条黑框一样宽）（我们的布局容器都是有大小宽度的，都是固定的）

再比如说：

我们将布局容器设置成这么大（上图红框框），没必要跟整个屏幕这么宽

当我们的屏幕缩小的时候里面的内容也跟着布局容器一起缩小

那么平时我们一般都是怎么划分响应式的尺寸的呢？

有几个特征：

• 布局容器宽度固定
• 仔细看上图，实际设置的宽度尺寸要稍小于屏幕实际的宽度，没别的原因，这只是为了好看，两边留点空隙会更加好看些

实验：

就这么简单，上图的div就是一个布局容器，一般我们都会给布局容器的class设置为 “container”

但是仅仅是这些样式还不行，我们还需要实现不同屏幕尺寸下宽度是固定的，这个时候就到媒体查询上场了

上面的这些media我们是从小到大写的，并且充分利用了层叠性覆盖样式

现在我们就实现了基本的响应式，对应不同大小的屏幕，布局容器的宽度将发生变化

案例：响应式导航

Bootstrap快速开发

如何使用呢？

例子：

bootstrap有html的有js的有css的，那比方说我们就看一个css的

比方说我们想看按钮的css

找到我们心仪的按钮

引入bootstrap的css然后直接把按钮的代码复制过来就行了

这按钮就直接过来了：

再比如说组件：

下面有很多字体图标

比方说我们想要一个放大镜：

只需要把名字复制过来：

放大镜就过来了：

再比方说导航栏：

我们觉得这个导航栏不错，直接点copy：

把下面的代码全量复制过来，复制到项目的代码中去就行了（复制到哪里没有规定，想复制到哪就复制到哪）：

而且最重要的一点是，它是响应式的，也就是说元素会随着页面大小改变而改变

总结：

用bootstrap开发我们会需要bootstrap的文件，那么这个文件怎么获取呢？

我们要把上图下载好的bootstrap复制到项目中去

注意，不要直接覆盖项目中的js、css、fonts，要给他新建一个bootstrap：

再粘贴过来：

现阶段我们看这两个文件：

第二步创建html骨架结构：

怎么去看这个骨架怎么搭建呢？

把上述代码复制过来就行了

解释一下下图中红线代码：

<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>

这句话的意思是要求当前网页使用IE浏览器最高版本的内核来渲染

还有一个地方不一样：

这里的[if lt IE 9]注释是一个条件注释，意思是：if less than IE 9 ，也就是浏览器版本小于IE 9的话那就引入下面的两个js文件

其中第一个：

html5shiv.min.js是为了解决ie 678 不认识html5新标签而提出的解决方案

第二个：

respond.min.js是为了解决ie 678不认识媒体查询的问题

总的来讲这两个js文件就是为了帮我们解决低版本浏览器的一些问题，而且要注意的是他仅限于ie 678

把这些代码粘贴过来：

接下来需要引入相关的样式文件

最后书写内容测试bootstrap是否引入：

如果明显没了内外边距，说明就ok了

现在就可以去官网找合适的组件，直接将代码贴过来用了：

事实上，bootstrap是通过类来控制组件的显示的：

比方说这里来个div，一模一样的把上面button的class复制下来，效果：

所以说bootstrap是通过控制类名来控制不同的样式的

如果我们嫌这个元素比较小，想调大点，或者说想自定义样式，直接添加类并做修改即可：

注意要把自己的代码写在bootstrap的样式代码下面，这样才能起到自己的样式覆盖掉bootstrap样式的效果

其他元素的使用都是大同小异的

Bootstrap的布局容器

前面讲到的布局容器，是需要我们自己手动修改媒体查询来适应不同宽度屏幕的变化的，其实bootstrap自己就有一个布局容器，他已经帮我们做好了一切，不需要再手动写媒体查询了

注意，bootstrap为我们做好的布局容器类名就叫 “container” ，而且必须叫这个名字

实验：

果然已经有效果了

还有一个专门用于流式布局的（container-fluid）：

container-fluid，流式布局，顾名思义，就是以前学的那个流式布局，所有关于长度的度量都变成百分百了，适合于单独的移动端开发

实验：

相比于container布局容器，当小屏的时候大家都是一样的，但是一旦到大屏，就不一样了：

这是因为container-fluid是流式布局，他的宽度是100%，意味着它的宽度跟屏幕一样宽

Bootstrap栅格系统

什么意思呢？

首先响应式布局我们是需要一个大的布局盒子的，假设将布局分为十列，那每一列都可以装一定量的元素，这时候我们缩小屏幕的宽度，但是还是分为十列，那每一列装的东西的宽度就会变小了，从而实现了页面里面的内容随着列宽的变化而变化，实现了这么一种自适应的效果

举个例子，将一个页面的内容划分成10等份，在1000px宽的时候里面的内容划分成三块，占比：3列：6列：1列，这时我们缩小页面宽度到500px，里面的三块内容还是占比3列：6列：1列，占比不变，每一列的宽度变小，元素缩放，就是这么实现自适应的

这就是栅格系统，简言之就是把页面中的内容划分成若干个等宽的列。这跟以前的rem有点相似，只不过rem是把整个屏幕划分成若干部分

BootStrap中也有这种栅格系统，只不过他把页面内容划分成了12列：

注意，他是给布局容器（container）划分成了12等份

栅格系统使用方法

意外收获：

原来bootstrap也使用了normalize.css来进行初始化，这意味着使用bootstrap的时候我们就不需要再自己写normalize.css了

找到栅格系统

栅格系统是通过一系列的行和列的组合来创建页面布局的

那我们在哪里设置栅格布局呢？

比方说上面红框部分，红框压着的这一条黑框就是宽度100%的，意味着屏幕有多宽，黑框就有多宽，而栅格系统是给内容做划分的，所以在这里我们没有必要给整条黑框设置栅格，只需要给里面的内容，即上图红框设置栅格即可了

再举一个例子：

这种的就在外面包一个大的container，里面再包一行一行的container，每一行再分四大列即可了

注意，container不是只能有一个的，是可以多层嵌套使用的

再比方说这种全屏通蓝的：

这种的就根本不需要使用container（栅格布局）了，直接做出来就好了

栅格选项参数

看到这里简直恍然大悟啊，原来之前项目里面的.col-md-4是这个意思

注意，行要放在布局容器container里面，而列需要给它添加前缀才能知道划分12等份之后该列被分到多少份

举个例子：

写成代码也就是：

还能这么分：

只要里面的数字相加等于12就行了

效果：

我们给他们加边框，看得更加清楚点：

那如果孩子们的分数小于12会发生什么呢？

结论：

则会占不满整个container，会有空白

那如果孩子们的分数大于12会发生什么呢？

结论：

多于的那一列会另起一行显示

刚才是在大屏的情况下，现在我们要求中屏的情况下我们要给他分成3大块：

那每一块就自然被分到4列了

那怎么写呢？

加一个col-md-4就行了，就这么简单

效果：

小屏分两大块，每块占六份：

添加col-sm-6即可

超小屏独占12份：

添加col-xs-12

注意，每一列左右两边都有15px的内边距：

如果想要去掉，自行加padding：0就行了

同样，container左右两边也有15px的padding值

只不过我们加了row之后它会自动帮我们去掉container的padding值：

列嵌套

实验：

之所以会这样显示的原理：

加了一个width还加了一个浮动

所以如果我们想要让他们之间有点缝隙，是不能加margin的，因为浮动不脱标，加margin之后势必会让最后一个盒子掉下来

那我们实在是想要一点缝隙要怎么办呢？

可以在大盒子里面再嵌套一个小盒子：

给小盒子宽度设定100%，再给他设定一个padding值即可

现在我们还想让其中一个盒子里面再分成两个小盒子：

将这个盒子再看成12等份，里面再分即可：

效果：

观察其中一个小盒子我们会发现：

小盒子自己也有padding值，那为什么没有顶着父亲盒子呢？

那是因为父盒子也有一个padding值

也就是说他是这么划分的：

除去父盒子的padding值，再划分12等份，这12等份才是分给孩子们的

那怎么解决这个问题呢？

就要轮到bootstrap中的row出场了

row去除padding值

怎么解决上述问题呢？

很简单，给两个小盒子套一个class属性值为“row”的父盒子（一般是div）：

上图class为 “col-md-4” 的就是父盒子，红框框里面class为 “col-md-6” 的就是两个子盒子，现在两个子盒子外面套了一个row，这样就能取消父元素的padding值了（没有为什么，这是bootstrap给我们准备好的样式之一，外层套一个row就是可以去除内边距）

效果：

我们发现子盒子完全顶着父盒子了，而且高度也变成和父亲一样高了

结论：

如果我们使用嵌套的话最好在外面加一层row，这样可以取消父元素的padding值，而且高度自动和父级一样高

列偏移

需求：

我们希望在一行上放置两个盒子，一个靠左一个靠右

这个时候就要用到列偏移（col-md-offset-*）了，我们将右侧的盒子列偏移到右边位置即可

实验：

偏移的份数就是 12 - 两个子盒子的份数（4 * 2） = 4份

原理其实就是给右侧盒子添加了一个外边距：

只不过这个外边距是bootstrap来维护的

除了上面的我们还能这么玩：

我们还可以让一个盒子居中对齐：

列排序

col-md-push-*和col-md-pull-*

实验：

响应式工具

hidden-xs、hidden-sm、hidden-md、hidden-lg

visible-xs、visible-sm、visible-md、visible-lg

场景：

有些元素在大屏的时候可以显示，屏幕小一点后就不显示了

实验：

意思是第三个div在中屏的时候就隐藏

大屏：

中屏：

小屏：

解释：

因为我们只给第三个div加了一个中屏隐藏的效果，所以在大屏和小屏和超小屏的时候元素都是会显示的，只有在中屏的时候元素才会消失

要想在超小屏的时候也隐藏：

再加一个hidden-xs就行了

与hidden相反的是visible

实验：

这样的话加了class=“visible-lg"的元素只有在大屏的时候才会显示，其他尺寸的都不会显示

案例

首先需要一个超大的container，里面包住一个行，行里面再分三列

首先中屏和大屏是一致的，因此用col-md-就可以了（col-md-是大于等于970以上的，包含大屏）

策略是先写完pc端的大屏幕的情况，回过头来再修改小屏的情况

搭建html骨架结构

引入相关文件：

上面也说了，由于有了bootstrap文件，我们就不需要再写normalize.js（初始化css样式文件）了，所以这里我们就不需要再引入normalize.js了

全部弄好之后我们建立container布局容器，结果问题出现：

我们记得刚才美工给的设计图尺寸是1280px的，但是这里的宽度是1170px的

所以我们需要手动去修改，在bootstrap的基础上再给一档1280px的媒体查询

在这里有一个技巧，我们发现1280px和1170px情况下的屏幕布局并没有什么差别，甚至1000px下布局都没什么差别，唯一区别就是元素宽度变窄了，因此这里我们不需要额外再加一个1280px的媒体查询，直接把bootstrap的最大的一档媒体查询改成1280px也没问题

手动修改1280px以上屏幕宽度时的container布局容器的宽度：

这样就改过来了，然后1280和1170布局没有差别所以无需额外地设置不同的布局

先将内层元素顶住父盒子，上面讲过了外层套一个row就行了（去除内边距）

按照上面的页面布局分析，我们将他们分成三块，占比：2：7：3

我们插入图片之后发现图片两边还是存在padding值：

按照以前，那很简单加个row就搞定了，但是仔细分析一下样式我们发现图片右边的padding值还是需要的，因此只去掉左边的padding值就行了，所以不要直接用row，单独修改该元素的padding-left值为0就行了

注意，这里不能拿col-md-2这个class名去改：

因为一旦把col-md-2改了，所有带上col-md-2的元素都会被改

那这里我们改header的样式：

但是刷新之后并没有反应：

显然是权重的问题

元素的padding值来自于col-md-2这个类：

类的权重为10，而元素的权重为01，显然拼不过类

加一个important：

不要忘了给img添加一个width:100%的样式，不然的话img的宽度就不会随着父盒子宽度变化而变化了，比方说我们将屏幕缩小，图片就显示不全了：

添加width: 100%

这里的图标：

鼠标放上去跟着字体一起变黑，显然就是用字体图标做的

以前我们使用iconmoon的时候非常麻烦，需要引一堆字体，才能使用

现在bootstrap自己就给我们提供了字体图标：

使用很简单：

直接找到图标，复制类名

因为是a需要，所以直接给a添加类名就行了，如上图

效果：

原理：

就是给a加了一个before

只不过这个图标没有居中对齐，这个很简单，直接加水平居中垂直居中就行了

所以这里我们得出一个结论：使用bootstrap的时候如果要修改它本身的代码，我们得先去看看他是怎么实现的，然后再看着改就行了

给a的before添加样式：

效果：

下面来做中间模块

注意，上面的这一块可以用li来做：

因为是响应式布局，所以高度我们不用太担心，因为宽度小到一定程度之后他就改样式了（所以在这里高度我们就直接写死了），主要还是要注意宽度

我们只需要把第一个li的高度设置为其他li高度的两倍就行了，宽度的话第一个li的宽度50%，其余li的宽度25%就行了

效果：

但是我们注意到li之间还需要给一点空隙：

但是宽度我们已经给了50%和四个25%，如果再给他margin，显然盒子会被挤掉下来

所以很简单，我们给li一个内边距就行了：

接下来：

这一块我们用栅格系统来做，每一行里面分成左边9份右边3份

一看需求，我们发现屏幕sm、md、lg的时候都是左边9份右边3份：

但是到xs，也就是超小屏的时候，发生了较大的变化：

因此我们得出重要结论：

• 这一个模块在超小屏的时候样式变化，在超小屏之上的时候样式都是同一个
• 所以我们就可以给他定在sm-9，sm-3就行了（这样我们可以保证在sm屏以上时的结构不会发生变化）

Bootstrap自带的清除浮动（clearfix）

接下来我们给这个模块加一个上边框：

但是我们并没有发现他多了一个上边框：

那是因为上面的news模块里面的li使用了浮动，导致publish盒子的上边框跑到news模块上面去了

这种情况就需要清除浮动

我们当然可以自己清除浮动，但是bootstrap已经给我们准备好了清除浮动的类：clearfix

哪里需要清除浮动就把这个类加到哪里

这里是news模块需要清除浮动：

效果：

上边框就出来了：

Bootstrap自带的h标签

接下来写标题：

经过测量我们需要24px大小的字体

我们当然可以自己设置字体大小，但是bootstrap自己就有定制的24px大小字体：

在排版里我们可以发现bootstrap自己定制的h3字体就是24px的：

那就很简单了，由于我们项目已经引入了bootstrap，所以直接用h3标签就行了（此h3非彼h3，这个h3用的是bootstrap定制的h3标签）：

效果：

Bootstrap自带的p标签

跟上面的h标签一样，还有一个p标签：

效果：

大小样式都给我们定义好了，秩只需要修改颜色就好了

神奇的是，我们也不需要自己修改颜色，bootstrap已经帮我们弄好了

Bootstrap辅助类

效果：

类似的还有很多：

背景色

三角符号

接下来看下图的 ”热搜“ 的制作：

以前我们自己写的时候会很麻烦

现在直接用Bootstrap的就行了，因为这个东西看着像按钮，所以去bootstrap里面的按钮模块：

效果：

我们还可以去掉他的小圆角：

除此之外，字的颜色也可以使用bootstrap的：

进一步修饰小屏幕

经过测验，现在我们已经解决了970px 1170px 1280px以上的屏幕布局

但是小屏幕还需要进一步修饰

问题一：

图片过大，那是因为这个图片我们设置了100%宽度，现在他独占一行了，所以会很大

解决方法就是让图片不进行100%宽度缩放，就采用它本身的宽度，然后水平垂直居中对齐就好了：

我们把width: 100% 改成max-width:100%

也就是最大宽度100%

效果：

现在小屏幕及以上的屏幕都ok了，但是超小屏下：

显得太大了

我们看看原版是什么样的：

解决方法：

• 我们如果进入超小屏，logo里面的图片就隐藏
• 我们事先准备好一个盒子 在logo里面，他平时是隐藏起来的，只有在超小屏下显示

这里用到了响应式布局中的隐藏（hidden）和显示（visible）

接下来还有一个问题就是导航栏：

小屏幕下的导航栏太大了，太占空间了

我们看看原版的：

解决方法：

使用媒体查询

• 当我们进入小屏幕还有超小屏幕的时候 我们 nav 里面的li 浮动起来 并且宽度为 20%

效果：

还有一个问题：

超小屏下字体太大：

解决方法：

使用媒体查询

• 当我们进入超小屏幕的时候 我们 nav 文字会变成14px

接下来是小屏幕下的article部分：

我们先看看人家的：

再看看我们自己的：

解决方法：

小屏幕下第一个li占一行（width: 100%），后面的li两个一行（width: 50%）

接下来是超小屏幕下publish模块的问题：

1、图片太大了

2、内容太多了

原版就显示了两行字：

还是用hidden：

效果：

下面那行小字内容还是太多了

解决方法：

字中间加一个span并加上hidden就行了

再改个字体大小：

效果：

移动端布局总结