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