10 09/2014

Bootstrap 3

最后更新: Wed Sep 10 2014 12:36:06 GMT+0800

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 * { .box-sizing(content-box); }

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