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

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!

bootstrap checkbox Error class append default alert input table

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn