bootstrap2和3的区别是什么-9543建站博客

广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~

bootstrap2和3的区别是什么

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

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

做项目时，有时也会参考别的案例的优秀之处。在用Bootstrap的时候，发现很多项目代码都有区别，在<div>布局class上，有用.span*，有用.col-md-*，实际上是Bootstrap版本升级，语法也变了。

Bootstrap3中被修改的样式

Bootstrap 2.xBootstrap 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-thumbnailul.unstyled.list-unstyledul.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-collapseList groups.list-group .list-group-item .list-group-item-text.list-group-item-headingGlyphicons.glyphiconJumbotron.jumbotronExtra 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-lgOffsets.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-btnForm controls.form-control .form-groupButton group sizes.btn-group-xs .btn-group-sm .btn-group-lgNavbar text.navbar-textNavbar header.navbar-headerJustified tabs / pills.nav-justifiedResponsive images.img-responsiveContextual table rows.success .danger .warning .activeContextual panels.panel-success .panel-danger .panel-warning .panel-infoModal.modal-dialog .modal-contentThumbnail image.img-thumbnailWell sizes.well-sm .well-lgAlert links.alert-link

Bootstrap3.x中被移除的样式

页面元素从2.x版本中去除3.x版本中对应的元素Form actions.form-actionsN/ASearch form.form-searchN/AForm group with info.control-group.infoN/AFluid container.container-fluid.container (不再进行固定)Fluid row.row-fluid.row (不再进行固定)Controls wrapper.controlsN/AControls row.controls-row.row 或者.form-groupNavbar inner.navbar-innerN/ANavbar vertical dividers.navbar .divider-verticalN/A Dropdown submenu.dropdown-submenuN/ATab alignments.tabs-left .tabs-right.tabs-belowN/ANav lists.nav-list .nav-header没有直接对等的样式t, 但是和List groups 和 .panel-groups相似

且

自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式。

Bootstrap2采用渐变凹凸风格，Bootstrap3采用扁平化设计风格

bootstrap3的浏览器兼容性方面比Bootstrap2好

如果你需要兼容IE8甚至是IE7和IE6，那么只能选择Bootstrap2，虽然它自身在IE6的效果也并不完美。

以上就是bootstrap2和3的区别是什么的详细内容，更多请关注9543建站博客其它相关文章！