区别：1、Bootstrap3支持移动端优先，Bootstrap没有；2、Bootstrap2采用渐变凹凸风格，Bootstrap3采用扁平化设计风格；3、bootstrap3的浏览器兼容性方面比Bootstrap2好。
相关教程推荐：《bootstrap教程》 做项目时，有时也会参考别的案例的优秀之处。在用Bootstrap的时候，发现很多项目代码都有区别，在<div>布局class上，有用.span*，有用.col-md-*，实际上是Bootstrap版本升级，语法也变了。
Bootstrap3中被修改的样式 | Bootstrap 2.x | Bootstrap 3.x |
|---|
.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 | .alert-error | .alert-danger | .visible-phone | .visible-xs | .visible-tablet | .visible-sm | .visible-desktop | 分成了 .visible-md .visible-lg | .hidden-phone | .hidden-xs | .hidden-tablet | .hidden-sm | .hidden-desktop | 分成了 .hidden-md .hidden-lg | .input-small | .input-sm | .input-large | .input-lg | .control-group | .form-group | .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 |
Bootstrap3.x中新增的样式 | 页面元素 | 描述 |
|---|
| 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 | | Extra small grid (<768px) | .col-xs-* | | Small grid (≥768px) | .col-sm-* | | Medium grid (≥992px) | .col-md-* | | Large grid (≥1200px) | .col-lg-* | | Responsive utility classes (≥1200px) | .visible-lg .hidden-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 |
Bootstrap3.x中被移除的样式 | 页面元素 | 从2.x版本中去除 | 3.x版本中对应的元素 |
|---|
| Form actions | .form-actions | N/A | | Search form | .form-search | N/A | | Form group with info | .control-group.info | N/A | | Fluid container | .container-fluid | .container (不再进行固定) | | Fluid row | .row-fluid | .row (不再进行固定) | | Controls wrapper | .controls | N/A | | Controls row | .controls-row | .row 或者.form-group | | Navbar inner | .navbar-inner | N/A | | Navbar vertical dividers | .navbar .divider-vertical | N/A | | | | | | Dropdown submenu | .dropdown-submenu | N/A | | Tab alignments | .tabs-left .tabs-right.tabs-below | N/A | | Nav lists | .nav-list .nav-header | 没有直接对等的样式t, 但是和List groups 和 .panel-groups相似 |
且 自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式。 Bootstrap2采用渐变凹凸风格，Bootstrap3采用扁平化设计风格 bootstrap3的浏览器兼容性方面比Bootstrap2好 如果你需要兼容IE8甚至是IE7和IE6，那么只能选择Bootstrap2，虽然它自身在IE6的效果也并不完美。
以上就是bootstrap2和3的区别是什么的详细内容，更多请关注模板之家(www.mb5.com.cn)其它相关文章！ |
