Bootstrap 3 变化

• 采用 flat design
• 手机优先 mobile-first，always responsive，不再有那个 responsive.css
• 新的 grid system
• 更多的 css classes
• 换成 Glyphicons icon font（最早是 fontAwesome，然后图片）
• JavaScript plugins are rewritten
• 新组件 list group 和 panel
• 组件修改了了一些，去掉了一些（submenus, typeahead, and accordion）
• 放弃了 ie7 和 firefox 3.6 以下的支持
• 文档和例子有所改变

个人看法

• flat design 国内多数人还不习惯
• mobile-first，always responsive 似乎用户们也不以为然
• Glyphicons 似乎没有 fontAwesome 多。可能是商业版权问题
• 放弃 ie7。国内很多用户还在纠结
• 确实加入了很多 class，grid 也加入 md lg sm 之类，放给设计者控制

2.x to 3.x 的变化列表

伪类

Bootstrap 2.x	Bootstrap 3.0
.container-fluid	.container
.row-fluid	.row
.span	.col-md-
.offset	.col-md-offset-
.brand	.navbar-brand
.nav-collapse	.navbar-collapse
.nav-toggle	.navbar-toggle
.btn-navbar	.navbar-btn
.hero-unit	.jumbotron
.icon-	.glyphicon .glyphicon-
.btn	.btn .btn-default
.btn-mini	.btn-xs
.btn-small	.btn-sm
.btn-large	.btn-lg
.visible-phone	.visible-sm
.visible-tablet	.visible-md
.visible-desktop	.visible-lg
.hidden-phone	.hidden-sm
.hidden-tablet	.hidden-md
.hidden-desktop	.hidden-lg
.input-small	.input-sm
.input-large	.input-lg
.checkbox.inline .radio.inline	.checkbox-inline .radio-inline
.input-prepend .input-append	.input-group
.add-on	.input-group-addon
.thumbnail	.img-thumbnail
ul.unstyled	.list-unstyled
ul.inline	.list-inline

新增伪类

Element	Description
Panels	.panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
List groups	.list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons	.glyphicon
Jumbotron	.jumbotron
Tiny grid (<768 px)	.col-xs-
Small grid (>768 px)	.col-sm-
Medium grid (>992 px)	.col-md-
Large grid (>1200 px)	.col-lg-
Offsets	.col-sm-offset- .col-md-offset- .col-lg-offset-
Push	.col-sm-push- .col-md-push- .col-lg-push-
Pull	.col-sm-pull- .col-md-pull- .col-lg-pull-*
Input groups	.input-group .input-group-addon .input-group-btn
Form controls	.form-control .form-group
Button group sizes	.btn-group-xs .btn-group-sm .btn-group-lg
Navbar text	.navbar-text
Navbar header	.navbar-header
Justified tabs / pills	.nav-justified
Responsive images	.img-responsive
Contextual table rows	.success .danger .warning .active
Contextual panels	.panel-success .panel-danger .panel-warning .panel-info
Modal	.modal-dialog .modal-content
Thumbnail image	.img-thumbnail
Well sizes	.well-sm .well-lg
Alert links	.alert-link

其它

• Text-based form controls are now 100% wide. Wrap inputs inside
  to control input widths.表单默认100％
• .badge no longer has contextual (-success,-primary,etc..) classes.
• .btn must also use .btn-default to get the “default” button.增加 .btn-default 强制按钮为默认
• .container and .row are now fluid (percentage-based).这两个 .container and .row 后面不再有 -fluid 了
• Images are no longer responsive by default. Use .img-responsive for fluid size.图片默认不 responsive，如果需要手工加 .img-responsive
• The icons, now .glyphicon, are now font based. They also require a base and icon class (e.g. .glyphicon .glyphicon-asterisk). 再次回到字体图标，需要加伪类 .glyphicon .glyphicon-asterisk
• Typeahead has been dropped, in favor of using Twitter Typeahead.
• Modal markup has changed significantly. The .modal-header, .modal-body, and .modal-footer sections now get wrapped in .modal-content and .modal-dialog for improved mobile styling and behavior. 模窗的代码结构变了
• JavaScript events are namespaced. For example, to handle the modal “show” event, use ‘show.bs.modal’. For tabs “shown” use ‘shown.bs.tab’, etc.. js 事件区分名字空间了。

浏览器问题

• 官方不支持ie7（但实际上勉强可以）
• ie8 不支持css圆角和阴影,input placeholder 也没有。另外，需要 respond.js 来支持 responsive
• ie 兼容模式请加

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

• window phone 8 的 ie10 有点不过，不能 responsive。解决办法
• safari .col-*-1 有点问题

第三方支持

因为 bootstrap 使用了 * { box-sizing: border-box; } 导致 google map 有点尴尬。修复代码

.google-map-canvas,
.google-map-canvas * { .box-sizing(content-box); }

/* Optional responsive image override */
img { max-width: none; }