随着CSS3和HTML5的流行，我们的WEB页面不仅需要更人性化的设计理念，而且需要更酷的页面特效和用户体验。
作为开发者，我们需要了解一些宝贵的CSS UI开源框架资源，它们可以帮助我们更快更好地实现一些现代化的界面，包括一些移动设备的网页界面风格设计。
接下来就是要详解Bootstrap框架：
首先，我们要知道
为什么使用框架的原理。CSS框架是一系列CSS文件的集合体，包含了基本的
元素重置，页面排版，网络布局，表单样式，通用规则等
代码块。使用CSS框架，
可以简化工作，提高工作效率。 然后，我们为什么要使用Bootstrap框架，而不使用其他CSS框架？
原因大概如下： 随着H5，CSS3的快速火起来，用户体验尤为重要，移动设备用户的庞大，不容小视，而恰恰，
Bootstrap就是为移动设备而开发的框架。他虽然是以
移动设备优先，倾向于Mobile，但不是
移动设备框架。它由
规范的CSS，JavaScript插件构成，其最大的优势是
响应式布局，CSS媒体查询(Media Query)的功劳，使得开发者可以方便的让网页无论在台式机，手机上都获得最佳的体验。
1.抽象出常用的css样式,高再可用性,高移植性
2.有固有的定义,详细的文档及开发特点
3.高兼容性,可以兼容流行的浏览器
4.以css为主,但不一定全部是css,可能有一些js(或者其他)脚本用于兼容浏览器
a)格式化reset.css 格式化css的真正好处是能够快速启动工作，你可以在新的HTML文件里引入框架，不用再处理重置padding 和 margin，实现统一的排版、浏览器下的相同表现。
b)布局layout.css 定义页面是二栏还是三栏，是全屏还是1024×768…… 一个网站的设计可能有很多种布局，但是大多数都是由几个具有复用性的布局组成，选择性的引入所需要的布局，可以很快地应用所期望的页面布局。
c) 基本样式 type.css 定义body、h1-h6、a:link-a:active、p等的字体大小和颜色。 基本样式的css引用，譬如将ul定义class为“ul-text”，用来展现相同的icon、行间距、链接色彩。 还可以像这样应用：class=”ul-text square”，li前展现的是方型的icon。
d)表格修饰 table.css 定义table、tr、td、th、thead、tfoot、tbody、caption等标签的表现。 和基本样式一样，但是表格在现有网站的展现形式几乎都是处理数据，所以分开存放引用。譬如在table上应用table-style-1便是黑色边框的表格，table-style-2便是黄色边框的表格。
e)表单修饰 form.css 定义fieldset、label、button、input 、select、textarea这几个标签的表现。 大多数网站的表单、按钮、输入框几乎都是一样的。之所以引入这个css，是为了便于统一在各个浏览器中的展现。默认的按钮、输入框等在各个浏览器下的展现区别很大，虽然在格式化的css中已经初步的统一，但是输入框的边框，按钮的样式都是需要在这个css中定义的。无奈的是select无法做到统一，如果考虑到用js实现的话，这个成本太大了点。 f) 打印修饰 print.css 修饰打印输出的页面。
g) 包含其他css的css frontpage.css、list.css、detail.css、register.css等等 根据各种引用去引入相应的css。譬如list页面中没有需要表格的修饰，那就不引入table.css。以节约代码量。 让前端开发更快速，简单。所有开发者都能快速上手，所有设备都可以设配，所有项目都适用。
Bootstrap框架可以分为三类：
第一：预处理脚本： Bootstrap的源码是基于最流行的CSS预处理脚本-Less和Sass开发的。你可以采用预编译的CSS文件快速开发，也可以从源码定制自己需要的样式。例如。如果你页面上有很多同样的效果。只需要写一个效果类。然后让用到的地方去继承他。就不需要再写了
第二：一个框架，多种设备你的网站和应用能在Bootstrap的帮助下通过同一个代码快速，有效设配手机，平板、PC设备，这都是CSS媒体查询的功劳。
第三：特效齐全Bootstrap提供了全面、美观的文档、可以找到关于HTML元素，HTML和CSS组件、jQuery插件方面的所有详细文档。
Bootstrap组件：
Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。
比如：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等 JavaScript插件Bootstrap自带了13个jQuery插件，这些插件为Bootstrap中的组件赋予了“生命”。其中包括：模式对话框、标签页、滚动条、弹出框等。 还有更重要的一点是，Bootstrap是完全开源的。它的代码托管，开发，维护都依赖GITHub平台。
其次：我们看下使用Bootstrap的利弊：
优点：
a) 提高开发效率。
b) 规范名称定义，便于维护。
c) 规范项目开发流程
d)css代码更清晰、简单。html代码更合理。
e) 大规模项目中可以减少用户下载
缺点：
a) 学习成本提高。你需要了解整个框架，需要阅读框架的文档。
b)css框架对于一个小项目等页面来说很臃肿。框架中可能有大部分你用不到的代码。
c)可能会无法帮助你的技术提高。太依赖框架，以至于很难排除bug。包括框架中本身就带的bug。
d) 选择自己需要的框架与开发框架都很痛苦。写到后面发现越来越不灵活，越来越臃肿。
1、页面外部引用样式过多。
譬如关于ul的margin定义,在格式化的css中会声明为0，而在基本样式的css中又可能会声明margin:5px 10px;所以在Yslow中会出现多次定义。
2、组件复用性的考量。
譬如表单定义的css中定义了所有表单的修饰,而假定在注册这个页面中只是需要这个css的百分之三十。那是否应切割出去那不要的百分之七十?综合以上的二个问题，个人认为解决的方式便是封装，让该有的有，不该有的没有。尽量减少http连接数和css的大小。但如果彻底是这样做的话，css的复用性又会变得很差，后期手工的封装会很痛苦。
3、到底该不该支持em?可见如要支持em，最大的目的是为了在浏览器中可以根据用户的分辨率大小自由缩放，对于拥有超大显示器的用户与小显示器的用户是非常有用的。可是在采集我们用户的浏览器数据后，发现分辨处于这二端的用户非常少，可想而知，为这部分的用户多花比正常开发一倍以上的时间显然是件不划算的事情，所以当初在开发tbsp的时候，我们团队就决定了不支持em。当然这是个建议，我们也希望能使用em带给用户最好的感受。
PS:博主认为，如果有前端技术的博友们，应该都不是问题。初学者是有点难度的。 基于版本的使用： Bootstrap版本： 目前使用较广的是版本2和3，其中2的最新版本是2.3.2,3的最新版本3.3.5。 版本4最主要变化是： 从Less迁移到Sass（？这个问题本不想回答，因为没有任何意义，见问得人多了，就说两句。这个问题就好比靓女和丑女的区别，她们不会因为外貌而失去自有的功能。那么Sass和LESS是一样的，只是CSS预处理器中的一种而以。对于国内使用哪一种多的，我想没有做过统计的人是无法回答。前段时间我在weibo上做了一个初略的统计，喜欢LESS的同学多于喜欢Sass的同学。
但对于我个人的观点来说：
１、LESS环境较Sass简单
２、有同学说LESS使用较Sass简单
３、相对而言，国内前端团队使用LESS的同学会略多于Sass
４、从功能出发，Sass较LESS略强大一些
５、Sass在市面上有一些成熟的框架，比如说Compass，而且有很多框架也在使用Sass，比如说Foundation
６、就国外讨论的热度来说，Sass绝对优于LESS
７、就学习教程来说，Sass的教程要优于LESS。在国内LESS集中的教程是LESS中文官网，而Sass的中文教程，慢慢在国内也较为普遍。） 改进网格系统 缺省弹性框支持 Dropped wells,thumbnails,and panels for cards 合并所有HTML resets到一个新的模块中：Reboot 全新自定义选项 不再支持IE8 重写所有的JavaScript插件 改进工具提示和popovers的自动定位 改进文档 其他大量改进
ps：写博的原因，首先是想让自己的思维有一个系统的顺序，其次想通过博文与各位博友们沟通交流，大家有的问题提出来可以互相沟通交流下~