Bootstrap 2 到 3 迁移指南

主要变化

1. 移动优先

Bootstrap 3 采用了移动优先（Mobile First）的设计理念，样式从最小屏幕开始，通过媒体查询逐步增强。

2. 扁平化设计

移除了 Bootstrap 2 中的渐变、阴影和纹理，采用更简洁的扁平化设计风格。

3. 新的网格系统

网格系统从基于像素的固定宽度改为基于百分比，引入了四种屏幕尺寸的断点。

CSS 类名变化

Bootstrap 2	Bootstrap 3
.container-fluid	.container-fluid（语义不同）
.row-fluid	.row（统一）
.span*	.col-md-*
.offset*	.col-md-offset-*
.pull-left/.pull-right	保留
.btn .btn-mini	.btn .btn-xs
.btn .btn-small	.btn .btn-sm
.btn .btn-large	.btn .btn-lg
.nav-list	.list-group
.pagination .pagination-centered	.pagination .text-center
.well	保留
.hero-unit	.jumbotron

JavaScript 插件变化

• 所有插件重写为更简洁的 API
• 统一使用 data-* 属性驱动
• 移除了 .collapse 的 CSS 动画依赖
• 新增 affix 插件（固定定位）

图标系统

Bootstrap 3 移除了 Bootstrap 2 中的内置图标，推荐使用 Font Awesome 作为替代。

升级建议

1. 使用 .container 替换 .container-fluid
2. 将 .span* 替换为对应的 .col-md-*
3. 将 .offset* 替换为 .col-md-offset-*
4. 更新按钮尺寸类名
5. 替换图标为 Font Awesome
6. 检查自定义样式是否需要调整