区别:1、Bootstrap3支持移动端优先,Bootstrap没有;2、Bootstrap2采用渐变凹凸风格,Bootstrap3采用扁平化设计风格;3、bootstrap3的浏览器兼容性方面比Bootstrap2好。 相关教程推荐:《bootstrap教
区别:1、Bootstrap3支持移动端优先,Bootstrap没有;2、Bootstrap2采用渐变凹凸风格,Bootstrap3采用扁平化设计风格;3、bootstrap3的浏览器兼容性方面比Bootstrap2好。
相关教程推荐:《bootstrap教程》
做项目时,有时也会参考别的案例的优秀之处。在用Bootstrap的时候,发现很多项目代码都有区别,在<div>布局class上,有用.span*,有用.col-md-*,实际上是Bootstrap版本升级,语法也变了。
Bootstrap3中被修改的样式
.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中新增的样式
.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中被移除的样式
.form-actions
N/ASearch form.form-search
N/AForm group with info.control-group.info
N/AFluid container.container-fluid
.container
(不再进行固定)Fluid row.row-fluid
.row
(不再进行固定)Controls wrapper.controls
N/AControls row.controls-row
.row
或者.form-group
Navbar inner.navbar-inner
N/ANavbar vertical dividers.navbar .divider-vertical
N/A Dropdown submenu.dropdown-submenu
N/ATab alignments.tabs-left
.tabs-right
.tabs-below
N/ANav lists.nav-list
.nav-header
没有直接对等的样式t, 但是和List groups 和 .panel-groups
相似且
自Bootstrap3起,框架包含了贯穿于整个库的移动设备优先的样式。
Bootstrap2采用渐变凹凸风格,Bootstrap3采用扁平化设计风格
bootstrap3的浏览器兼容性方面比Bootstrap2好
如果你需要兼容IE8甚至是IE7和IE6,那么只能选择Bootstrap2,虽然它自身在IE6的效果也并不完美。
以上就是bootstrap2和3的区别是什么的详细内容,更多请关注自由互联其它相关文章!