1. 简介
Bootstrap 是 Twitter 推出的一个前端开发框架，Bootstrap 2 作为第一次发布的版本于 2012 年推出，而 Bootstrap 3 于 2013 年发布。这两个版本的 Bootstrap 在使用上还是有一些区别的，接下来将详细介绍 Bootstrap 2 和 Bootstrap 3 的区别。
2. 栅格系统
2.1 前言
栅格系统是 Bootstrap 中非常重要的一部分，使用栅格系统可以很好地划分页面布局。Bootstrap 2 和 Bootstrap 3 的栅格系统也存在一些区别，在 Bootstrap 2 中一行有 12 列，而在 Bootstrap 3 中，一行也仍然有 12 列。
2.2 移动优先
在 Bootstrap 2 中，栅格系统默认是从“桌面端”开始排版，也就是说，如果你不修改栅格系统，访问你的页面使用手机浏览时，用户需要左右拖拽页面才能查看内容。而在 Bootstrap 3 中，栅格系统从移动端排版开始，接着以较大的屏幕作为起点，更好的适应了现代多种设备的趋势。
2.3 列偏移
在 Bootstrap 2 中，列偏移的语法为 offset* *，而在 Bootstrap 3 中，语法变成了 col-*-offset-*，这样修改后可以更加直观地表达偏移的效果。
<!-- Bootstrap 2 -->
<div class="span4 offset4"></div>
<!-- Bootstrap 3 -->
<div class="col-md-4 col-md-offset-4"></div>
2.4 响应式工具
两个版本的 Bootstrap 都提供了响应式工具，不过名字有所不同。在 Bootstrap 2 中，称之为 .visible-desktop .visible-tablet .visible-phone 等类名，而在 Bootstrap 3 中，这些类名被更换成 .hidden-sm .hidden-md .hidden-lg .visible-sm .visible-md .visible-lg，加上了更多的开发者习惯的缩写，表达更加清晰。
3. 表单组件
3.1 前言
表单组件是 Bootstrap 中面向表单布局的一套规范，这部分在更改 Bootstrap 3 的时候变化较大，这里主要讲这部分的变化。
3.2 控件外观
在 Bootstrap 2 中，表单控件的尺寸只能通过手动修改 CSS 的方式，而在 Bootstrap 3 中，官方在 .input-group-lg .input-group-sm .form-control 等类名的支持下，为表单控件的大小提供了一套全新的解决方案。
3.3 布局多样性
在 Bootstrap 3 中新增了一种表单控件布局方式——水平表单，在空间允许的情况下更有效地利用了屏幕空间。
4. 其他变化
4.1 光盘图标
Bootstrap 2 中的光盘图标形态更加扁平，而 Bootstrap 3 版本里的光盘图标形态则更加立体。
<!-- Bootstrap 2 -->
<i class="icon-cd"></i>
<!-- Bootstrap 3 -->
<i class="glyphicon glyphicon-cd"></i>
4.2 插件
Bootstrap 3 中加入了诸如 Modal、Popover、Scrollspy、Tab 等多个新的插件，并且这部分的开发也相对于 Bootstrap 2 来说更加模块化和可重用性更强。
4.3 字体图标
在 Bootstrap 2 中，字体图标是以链接的形式嵌入 HTML，而在 Bootstrap 3 中，字体图标文件与 CSS 分离，提供了更好的组织形式。
5. 总结
以上就是 Bootstrap 2 和 Bootstrap 3 的区别。作为一名前端开发者，了解各种前端框架的区别和特点是非常重要的，这样可以更好地应对各种问题。当然，以上的区别也并不是固定的，在 Bootstrap 4 中，可能会有一些内容发生变化，我们也应该抱着开放的心态去接受和了解。