What is the difference between bootstrap2 and 3

Differences: 1. Bootstrap3 supports mobile-first, but Bootstrap does not; 2. Bootstrap2 uses a gradient bump style, while Bootstrap3 uses a flat design style; 3. Bootstrap3 has better browser compatibility than Bootstrap2.

Recommended related tutorials: "bootstrap Tutorial"

When doing projects, sometimes we will refer to other cases. Excellent points. When using Bootstrap, I found that many project codes are different. In the

layout class, .span* is useful and .col-md-* is useful. In fact, the Bootstrap version is upgraded and the syntax has also changed.

Modified styles in Bootstrap3

##.span*.col-md-*.offset*.col-md- offset-*##.brand.nav-collapse.nav-toggle.btn-navbar.hero-unit.icon-*##.btn.visible-xs.visible-sm is divided into .visible-md .visible-lg.hidden-xs.hidden-sm is divided into .hidden-md .hidden-lg.input-sm.input-lg.form-group##.checkbox.inline.checkbox-inline.input-group##.label-important.label-danger.text-error.text-danger. table .error.table .danger##.bar##.bar-*

Bootstrap 2.x	Bootstrap 3.x
.container-fluid	.container
.row-fluid	##.row
.navbar-brand
.navbar-collapse
.navbar-toggle
. navbar-btn
.jumbotron
.glyphicon .glyphicon-*
.btn .btn-default	##.btn-mini
.btn-xs	.btn-small
.btn-sm	.btn-large
.btn-lg	. alert-error
.alert-danger	##.visible-phone
	.visible-tablet
	.visible-desktop
	.hidden-phone
	.hidden-tablet
	##.hidden-desktop
	.input-small
	.input-large
	.control-group
	.radio.inline
.radio-inline	. input-prepend .input-append
##.add- on	.input-group-addon
##.img-polaroid	.img-thumbnail
ul.unstyled	.list-unstyled
ul.inline	.list-inline
. muted	.text-muted
##.label	. label .label-default
.progress-bar
##.progress-bar-*	.accordion
.panel-group	. accordion-group
.panel .panel-default	.accordion-heading
.panel-heading	.accordion-body
.panel-collapse	.accordion-inner
.panel-body	<p><strong>Bootstrap3.x中新增的样式</strong></p> <table style="width: 644px"> <thead><tr class="firstRow"> <th>页面元素</th> <th>描述</th> </tr></thead> <tbody> <tr> <td>Panels</td> <td> <code>.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 (	.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的效果也并不完美。
  

The above is the detailed content of What is the difference between bootstrap2 and 3. For more information, please follow other related articles on the PHP Chinese website!