最近用bootstrap框架为某公司做了个门户网站，简单总结下这次项目下来的经验。它不仅可以帮助解决低端浏览器不支持css3的问题，同时解决了不同分辨率上网页布局的展示，其最大的好处就是：写非常少的代码，即可实现多终端的页面适配,。
Bootstrap是著名的社交网站、微博的先驱Twitter在2011年8月推出的开源WEB前端框架，集合CSS和HTML，使用了最新的浏览器技术，为快速WEB开发提供了一套前端工具包，包括布局、网格、表格、按钮、表单、导航、提示等等。使用Bootstrap可以构建出非常优雅的前端界面，而且占用资源非常小。
使用Bootstrap构建优雅的Web Page，Bootstrap的核心就是基于Less框架构建的CSS。所以谈到Bootstrap，就必须得说说Less。
关于Less
Less是一个动态CSS语言框架，Less扩展了CSS的动态特性，相对于传统的CSS，Less提供了更为强大的功能和灵活性。基于Less，我们可以在编写CSS时使用嵌入式申明、变量、混合模式、运算和颜色编辑功能函数等。简单来说就是Less可以让你像编程一样编写CSS，把程序存储在后缀为less的文件中，Less提供了框架将其编译为标准的css文件。举个简单的例子，如果你想为多个样式设置同一个颜色，可以这样写：
@color: #FFFFFF;
h1 {
color: @color;
}
#sub{
color: @color;
}
编译后的css就是：
h1 {
color: #ffffff;
}
#sub {
color: #ffffff;
}
以上代码只是Less的最简应用。除了变量，还可以在CSS进行数学运算、传参、文件相互引用、规则嵌套等等。可以想象，这种编写CSS的方式会为前端开发带来多大的改变。无论是从灵活性、扩展性和可维护性上，Less都让CSS开发有了大幅提升，动态性增强了。
编译Less的方式很简单，有两种方式，一种是在使用时编译。下载less.js，在样式中引用：
<link rel="stylesheet/less" type="text/css" href="less/mystyles.less">
<script src="js/less.js" type="text/javascript"></script>
注意要把样式文件放到js文件申明的前面。
但现在bootstrap4.0 （http://wiki.jikexueyuan.com/project/bootstrap4/ 国人最喜欢的中文文档）的推出，官方已废除Less，并将Sass作为默认开发工具。
Sass 是 Syntactically Awesome Style Sheets 的缩写，它是CSS的 一个开发工具，提供了很多便利和简单的语法，让CSS看起来更像是一门语言，这种特性也被称为“CSS预编译” 。它的主要涉及思想是让我们可以按照编程的思路编写自己的样式，然后通过“编译器”生成我们所需要的CSS文件。
CSS 预处理的缺点
我认为CSS 预处理器语言无非是程序员的提高逼格的媒介，它增加了一个编译过程，将简单的CSS复杂化，同时降低了自己对最终代码的控制力。更致命的是提高了门槛，首先是上手门槛，其次是维护门槛，再来是团队整体水平和规范的门槛。这也造成了初学学习成本的昂贵。
管理Sass项目文件结构
CSS 预处理器的特点之一是可以把你的代码分割成很多文件，而且不会影响性能。这都归功于 Sass 的@import命令，只要在你的开发环境下，你调用不管多少文件，最终将编译出一个 CSS 样式文件。
- Sass是成熟的 CSS 预处理器之一，而且又有一个稳定，强大的团队在维护；
- Sass参考的教程多；
- Sass有一些成熟稳定的框架，特别是 Compass，新秀还有 Foundation 之类；
- 还有一个原因是国外讨论 Sass 的同行要多于 LESS。
当然，需要注意的是：
响应式设计的原则：
1.移动优先（在设计的初期就要考虑的页面如何在多终端展示）
2.渐进增强 （充分发挥硬件设备的最大功能）
这里简单说下分辨率：
作为响应式，当然少不了分辨率这东西。
分辨率就是屏幕图像的精密度，是指显示器所能显示的像素的多少。由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，画面就越精细，同样的屏幕区域内能显示的信息也越多，所以分辨率是个非常重要的性能指标之一。
分辨率是指分辨物理量细节的能力 ，就是屏幕图像的精密度，是指显示器所能显示的像素的多少。
分辨率是密度，像素是单位。比如17寸显示器，800 x 600分辨率，就是17寸的面积中，有800乘以600也就是48万个像素点。相较而言，15寸和20寸相同800x600分辨率，15寸的看上去精细，20寸的颗粒粗.
分辨率由像素组成.