bootstrap2.0与3.0的区别

在阅读这篇bootstrap2.0与3.0的区别的文章之前，大家一定要先了解什么是响应式网站设计？推荐大家看看这篇"教你快速了解响应式网站设计" 。

我觉得bootstrap的可视化网页布局是个不错的工具，Bootstrap可视化布局说了，这个工具只适用于bootstrap2.x版本，在新版本的bootstrap3.x，就不能直接使用了，不知是因为官方更新不及时还是停止更新，如果是后者，那真有点可惜了。

上面说了，新版本的bootstrap3.x不是不能使用可视化布局，而是不能直接使用。那么在bootstrap3.x版本使用可视化布局需要作相应的标签替换。

新版本的bootstrap3.x相对于旧版本，改动比较大，对于版本的升级，官方给出了相关的说明文档，不过官方也真是的，这么重要的文档竟然放在一个很偏的角落里，还是我无意中找到的，以至于我再次查找时竟然无果而终，如果不是我事先收藏了网址。

在bootstrap2.x的栅格类标签使用的是.span*，但在新版本中这一标签不再保留，而是使用了.col-md-*替代。这样，如果在bootstrap3.x，使用可视化布局的功能，就是在旧版本中使用可视化工具布局好页面，然后把所有.span*的标签替换成.col-md-*

就可以了，这对于布局来说，已经够用了。

我在官方文档中代到的升级指南，不敢私藏，把它分享给大家--请点击这里。

下表列举了 v2.0x 版本和 v3.0 版本之间的样式差异。

 

Bootstrap 2.x	Bootstrap 3.0
.row-fluid	.row
.span*	.col-md-*
.offset*	.col-md-offset-*
.brand	.navbar-brand
.navbar .nav	.navbar-nav
.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
.alert-error	.alert-danger
.visible-phone	.visible-xs
.visible-tablet	.visible-sm
.visible-desktop	Split into .visible-md .visible-lg
.hidden-phone	.hidden-xs
.hidden-tablet	.hidden-sm
.hidden-desktop	Split into .hidden-md .hidden-lg
.input-block-level	.form-control
.control-group	.form-group
.control-group.warning .control-group.error .control-group.success	.form-group.has-*
.checkbox.inline .radio.inline	.checkbox-inline .radio-inline
.input-prepend .input-append	.input-group
.add-on	.input-group-addon
.img-polaroid	.img-thumbnail
ul.unstyled	.list-unstyled
ul.inline	.list-inline
.muted	.text-muted
.label	.label .label-default
.label-important	.label-danger
.text-error	.text-danger
.table .error	.table .danger
.bar	.progress-bar
.bar-*	.progress-bar-*
.accordion	.panel-group
.accordion-group	.panel .panel-default
.accordion-heading	.panel-heading
.accordion-body	.panel-collapse
.accordion-inner	.panel-body

参考资料：http://www.yuechengnet.com/news/detail_223_3_0.html