标签：
在阅读这篇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
标签：
原文地址：http://www.cnblogs.com/yanwei067/p/4971161.html
