Bootstrap 3 rc 1: http://twitter.github.io

先从bootstrap每个版本首页的一句话对比：

Bootstrap2：简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

Bootstrap3：Bootstrap 是更受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

两个版本更大的区别是移动设备优先，放弃IE6、IE7，更低支持IE8以上的浏览器（包括IE8），从代码上来说，几乎是重写。相对于之前的版本，有以下改变：

1、浏览器支持：彻底放弃IE7（及以下版本）和Firefox 3.x（及以下版本）的支持，从而性能更好，更轻量化，体积缩小40%以上

2、移动设备优先：默认使用流式布局，自适应更多的移动设备屏幕，更强大。

3、栅格系统（Grid System）：加入响应式栅格系统，从而适应更多的屏幕大小，减少使用者适配难度，让很多从来没有做过移动优先开发的人也能够轻易上手。

所有元素默认盒模型使用了border-box，方便计算，方便使用栅格系统。

针对各种屏幕大小，bootstrap设定几种样式，分别为(xs、sm、md、lg)。如：col-xs对应手机设备，.col-sm 对应平板设备，.col-md 对应普通桌面设备，.col-lg对应宽屏设备，而栅格系统把容器分成12份，col-xs-3标识在手机设备中这个元素占据1/4的宽度，其他的自己查看css源码一看便知。

4、扁平化设计：苹果牵起的扁平化浪潮，许多UI框架推出扁平化版本，bootstrap也不例外，UI上，较之前的版本有的较大改变，从之前的渐变改成了纯色调的扁平化风格，从视觉感受上来说更加简洁、更加亲切。比如按钮、导航分页等……

5、组件化开发：样式方面，提供了非常多的组件，相对于之前的版本增加了Glyphicons 字体图标（放弃了图像图标，用字体图标代替）、标签（label）、面板（panel）等等，给我们写样式、布局更加方便

上面仅仅是抛砖引入，bootstrap的改变肯定不止这些，我们要学好bootstrap，更好的办法是查阅官方文档，甚至阅读源码，这样才能让我们更快更准确地了解到bootstrap3与之前的版本的区别。

PS：

bootstrap中文网：Bootstrap中文网

bootstrap github地址：twbs/bootstrap

但是这个下载包太大，每次更新都得费好长一段时间！

现在 2016年 .ie6 7 市场占有率 应该 不多了吧?为什么使用bootstrap3时，测试IE8时会弹出error：bootstrap‘s responsive css is disabled，请教各路大神，如何解决放弃IE6和7，迎来大好蓝天。对移动端支持的更好，可以自适应设备分辨率。移动优先，这是更大的改进按鈕控件去除光澤、陰影，簡而言之就是扁平了內置的ICONS不用再糾結大小、顏色，放在白色底就是黑色，非白色底就是白色這些是用肉眼和使用期間能發覺的，其餘還有很多改進。另：要把使用Bootstrap 2.x的站升級到3.x真的很困難。我的网站最代码一直用bootstrap2.3.2做的，本以为迁移到3.0简单，结果改了半天发现基本是需要重做整个网站了，果断退回到2.3.2，发现设计api低层方面java的版本兼容性确认很牛叉。只用作后台自己人使用,前端考虑到用户的浏览器版本兼容性问题,故而不能用其作为前端!可以看看这些bootstrap3 的 PPT介绍： http://www.gbtags.com/gb/ppt/10.htm ， http://www.gbtags.com/gb/ppt/11.htm================== 8月14日对Bootstrap 3 RC2的补充 ===================现在的提交(Commits)的数已经超过2100个了，RC 2在RC 1的基础上又有了很多改变。。。1 文档的改变 但是因为现在Bootstrap 3下载链接变成了最近版本 (lastest version)，并且每天的改动非常多，而文档更新不是很及时，所以有些会对不上2 一些全局CSS的改变3. 栅格系统 (Grid system)说个我认为比较重要的，相对于RC 1中的3层，现在有4层了We now have .col-xs (phones), .col-sm (tablets), .col-md (desktops), and .col-lg (large desktops).col-xs 对应手机设备.col-sm 对应平板设备.col-md 对应普通桌面设备.col-lg 对应宽屏设备4 组件的改进与删减，包括： 按钮、表格、导航栏等5 还有就是RC 2修复了RC 1中的超多Bug===========================7月28对Bootstrap 3 RC1的回答=================什么改变了？超过1,600次提交（commits）, 大于72,000 个增/减（additions/deletions）, 还有300多个文件的改变，是非常大的一次改变，所以我 占坑，慢慢回答，抛砖引玉1. 彻底的重写，从桌面优先 (Desktop First)的设计方式，变成和Zurb的 Foundation 一样的移动优先 (Mobile First) 全新的栅格系统 (Grid System)，更加强大！如果你用过Foundation的栅格系统 (Grid System)就有体会了。2. 再见，IE7！更低从IE 8开始支持。而且因为设计已经变成移动优先，所以对IE8的支持也需要respond.js我相信Bootstrap 4时肯定会放弃对IE8的支持，就像现在的Foundation 4一样3. 扁平化设计，极简风格。这个你应该从Bootstrap文档的风格也可以看出来了，不过可能是暂时的，因为作者精力的原因，具体见 https://github.com/twbs/bootstrap/pull/6342#issuecomment-12332378Gradients and other embellishments have temporarily been removed while I focus on other things. It has nothing to do with skeuomorphism or anything like that.4. 更小的文件体积，Bootstrap.min.css的体积减少了40%以上。在OS X系统上：旧的压缩后的Bootstrap.min.css和bootstrap-responsive.min.css是 106Kb + 17Kb = 123Kb。新的Bootstrap.min.css将响应式栅格融入了进去，也就是不再区分Bootstrap.min.css和bootstrap-responsive.min.css，只有一个bootstrap.min.css 体积是67Kb67Kb / 123Kb = 54.47%JS插件文件体积从 29Kb 变成 27Kb 体积上变化不是很大并且有了CDN，速度肯定更快了.<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css"> <!-- Latest compiled and minified JavaScript --><script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>5. 更的组件！这里面有很多细节，我也说不全，抛砖引玉。两个新的组件：List Group 和 Panels新的 Modal，更加简单好用没了@blue, @orange之类的，取而带之的说@brand-primary, @brand-success语义化。增加对视网膜屏幕的支持，如retina image mixin.这个非常多，可以看这里：https://github.com/twbs/bootstrap/pull/6342举一些例子:>> 5.1 Modal 组件旧版 (2.X) 的Bootstrap Modal<div class="modal hide fade"></div>新版 (3.X) 的Bootstrap Modal<div class="modal fade"><div>HTML相对来说只是简洁了一些而已，但你可以点击超链接进去使用一下新的Modal，你就会发现，新的Modal修复了旧版滚动Modal时背景也会滚动的问题当Modal内容过长时，新的Modal可以像页面一样滚动，而旧版的不行还有些不能直观看到的，比如对移动设备的支持更好了什么的>> 5.2 新的 List Group 和 Panels 组件，挺好的，其实没的话很多人也想自己写一个 Panels组件：List Group 组件：总结：其实我觉得，有什么变化简单看看就好，如果你不需要支持IE7的话，用直接Bootstrap 3吧，骚年。。。。用了就真切的体会到了这篇文章介绍了Bootstrap 3的3大改进。Understanding Twitter Bootstrap 3这是个不错的框架，可惜目前在国内IE6、IE7的用户量还是挺大的@依华 补充一个3.0 更大的改变 ： 所有元素默认盒模型（box model）使用了border-box，注意，实现的方法是非常暴力的设置 * { box-sizing: border-box }，理由呢，就是方便计算，方便使用grid system。实际上很可能在和第三方其他的UI库合并使用时产生问题，毕竟现代浏览器的标准默认box model是 content-box。