最近在复习的时候总感觉有些知识点总结过，但是翻了一下博客没有找到，才想起来有一些内容是放在部门的技术分享里的，趁这个时候跳了几篇相对有价值的梳理一下，因为都是PPT，所以内容相对零散，以要点和图片为主。
第一篇是我在工作上刚刚能稳步前行时完成的，Boostrap在我们的工作中占有一定的比重，为此我专门进行了深入学习，标题比较宽泛，但内容绝不是复述官网的流水账，Bootstrap虽然简单，而且也有新的布局模式诸如Flex、Grid此类，但其核心的开发思想————移动设备优先仍然对我们现在的开发有所指导，这篇分享也是着重于这一点。
简介
起源
Bootstrap原名Twitter Blueprint，是由Twitter推出的一个用于快速开发Web应用程序和网站的前端框架。开发的初衷顾名思义，作为开发的蓝图和范本与我们现在的需求没有太大的区别，就是因为需要一个通用的框架来省去一些重复的开发内容。其主要特点有：
- 移动设备优先
- 友好的学习曲线
- 响应式设计
- 卓越的兼容性
- 12列响应式栅格结构
四个主要版本
1. 1.0.0
Twitter推出的原始版本。
2. 2.3.2
开始支持响应式网页设计(RWD)。页面布局可以根据显示网页的设备（桌面、平板电脑、手机）来进行动态调整。
3. 3.3.7
即第三版的最终版本，是现在使用较为广泛的版本，顺应时代的潮流，将移动设备优先作为设计方针，更加强调了响应式设计。放弃了对IE7的支持。
4. 4.x.x
至今为止仍在更新，我个人还不太熟悉。放弃了对IE9的支持。
重置样式
大家开发中应该有这样的经验：即使是相同的样式和标签，在不同的浏览器上也会呈现出不同的样子，对于Bootstrap这种通用框架来说，跨浏览器的一致性是非常重要的，所以开发者通过引入重置样式 Normalize.css 来让各个浏览器的CSS样式有一个统一的基准，这个基准主要的内容是“清零”：
- 移除body的margin声明
- 设置body的背景色为白色
- 为排版设置了基本的字体、字号和行高
- 设置全局链接颜色，且当链接处于悬浮:hover状态时才会显示下划线样式
如何开始
Bootstrap的使用十分简单，这里以3.3.7为例，官网上已经有非常清晰的引入说明了，这里不再赘述，主要说明是说明一些要点。
HTML5文档类型
Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将文档类型 DOCTYPE 设置为HTML5。在你项目中的每个页面都要参照下面的格式进行设置：
<!DOCTYPE html>
<html>
....
</html>
不同的文档类型可能会导致页面渲染出不同的结果，使用同样的代码，但显示出来的结果却又些许不同，可能问题就出在这里，Bootstrap官方指定使用的HTML5版本。
移动设备优先
移动设备优先是 Bootstrap 3 的最显著的变化。为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport
最低0.47元/天 解锁文章
340
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
