bootstrap2和3的区别是什么

区别：1、Bootstrap3支持移动端优先，Bootstrap没有；2、Bootstrap2采用渐变凹凸风格，Bootstrap3采用扁平化设计风格；3、bootstrap3的浏览器兼容性方面比Bootstrap2好。

相关教程推荐：《bootstrap教程》

做项目时，有时也会参考别的案例的优秀之处。在用Bootstrap的时候，发现很多项目代码都有区别，在

布局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的效果也并不完美。
  

Atas ialah kandungan terperinci bootstrap2和3的区别是什么. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn