GWT-Bootstrap 3 研究
一． GWT-Bootstrap3 与 GWT-Bootstrap 区别
参考地址：
http://stackoverflow.com/questions/22836186/gwt-bootstrap-vs-gwtbootstrap3
以下是GWT-Bootstrap3作者的一段回复：
I'm the author of GwtBootstrap3. Before I started to work on GwtBootstrap3 I've been using GWT-Bootstrap, fixed some bugs and added some features. When Bootstrap 3 was released I decided to create a new project from scratch because lots has changed between Bootstrap 2 and 3. Some components were removed while new ones were added, CSS classes have changed etc. Also BS3's primary focus was "mobile first". Regarding GWT-Bootstrap this means lots of refactoring. A GWT-Bootstrap version based on BS3 would definitively not be backwards-compatible. I'm not sure how far GWT-Bootstrap's migration is, see issue #448.
While not all features have yet been implemented in GwtBootstrap3 and some issues need to be sorted out, I would say that GwtBootstrap3 is ready for use in new projects. Some real life projects were already implemented using GwtBootstrap3. A migration from GWT-Bootstrap might be possible but since we didn't intend to be GWT-Bootstrap compatible refactoring is certainly required.
When designing GwtBootstrap3 we took great care to outsource any third party components into an extra module. In this module you'll find useful widgets that are not part of the core BS3 distribution. Unfortunately GWT-Bootstrap mixes core and third party components into one library which imho makes it unnecessarily complex and hard to maintain.
If you're happy with BS2 then you should stick with GWT-Bootstrap.
If you want to use BS3 your only options seems to be GwtBootstrap3 at the moment.
二． GWT-Bootstrap3 支持的 组件特征
Following Bootstrap features are natively supported by GwtBootstrap3 through widgets. Other Bootstrap features still can be used with plain HTML and JavaScript;
CSS 样式
| name |
Feature |
Status |
In Demo |
| 网格 |
Grid system |
Supported |
Yes |
| 排版 |
Typography |
Supported |
Yes |
| 源码 |
Code |
Supported |
Yes |
| 表格 |
Tables |
Supported |
Yes |
| 表单 |
Forms |
Supported |
Yes |
| 按钮 |
Buttons |
Supported |
Yes |
| 图片 |
Images |
Supported |
Yes |
| 响应 |
Responsive |
Supported |
Yes |
Components 组件
| Name |
Feature |
Status |
In Demo |
| 图像 |
Icons (FontAwesome v4.0.3) |
Supported |
Yes |
| 下拉菜单 |
Dropdowns |
Supported |
Yes |
| 按钮组 |
Button groups |
Supported |
Yes |
| 按钮下拉菜单 |
Button dropdowns |
Supported |
Yes |
| 输入框组 |
Input groups |
Supported |
Yes |
| 导航 |
Navs |
Supported |
Yes |
| 导航 |
Navbar |
Supported |
Yes |
| 面包屑导航组 |
Breadcrumbs |
Supported |
Yes |
| 分页 |
Pagination |
Supported |
Yes |
| 标签 |
Labels |
Supported |
Yes |
| 标号 |
Badges |
Supported |
Yes |
| 大屏幕特写 |
Jumbotron |
Supported |
Yes |
| 页 头 |
Page Header |
Supported |
Yes |
| 缩略图 |
Thumbnails |
Supported |
Yes |
| 警告 |
Alerts |
Supported |
Yes |
| 进度条 |
Progress bars |
Supported |
Yes |
| 媒体对象 |
Media object |
Supported |
Yes |
| 列表组 |
List group |
Supported |
Yes |
| 面板 |
Panels |
Supported |
Yes |
| 消息墙 |
Wells |
Supported |
Yes |
JavaScript
| Feature |
Status |
In Demo |
| Modal |
Supported |
Yes |
| Scrollspy |
Supported |
No |
| Tooltip |
Supported |
Yes |
| Popover |
Supported |
Yes |
| Collapse |
Supported |
Yes |
| Carousel |
Supported |
Yes |
| Affix |
Supported |
No |
| Tabs |
Supported |
Yes |
Implemented Bootstrap Plugins 插件
| Plugin |
Status |
In Demo |
| Bootbox |
Supported |
Yes |
| Slider |
Supported |
Yes |
| DateTimePicker |
Supported |
Yes |
| Summernote's WYSIWYG Editor |
Supported |
Yes |
| Bootstrap Select |
Supported |
Yes |
三． GWT-Bootstrap3.0与GWT-Bootstrap2.0 区别
Bootstrap 3.0增加了一些新的特性，对于一些类也进行了调整。不过两个版本在使用的方法上是没什么大的区别的。
bootstrap 2.3版与3.0版重要类的改变对比：
| 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 |
bootstrap 3.0版新增的类
| 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 |
bootstrap 3.0版删除的类
| Element |
Removed from 2.x |
3.0 Equivalent |
| Form actions |
.form-actions |
N/A |
| Search form |
.form-search |
N/A |
| Fluid container |
.container-fluid |
.container (no more fixed grid) |
| Fluid row |
.row-fluid |
.row (no more fixed grid) |
| Navbar inner |
.navbar-inner |
N/A |
| Dropdown submenu |
.dropdown-submenu |
N/A |
| Tab alignments |
.tabs-left .tabs-right .tabs-below |
N/A |