Difference between bootstrap2.x and bootstrap3.x

When you are working on a project, you can also refer to the advantages of other cases. When using Bootstrap, I found that many project codes are different. It is useful in <div> layout class. SPAN *, useful. col-MD-* is actually a bootstrap version upgrade, and the syntax has also changed.

List the differences between the two. bootstrap3.x currently supports mobile terminals first, which is a significant change.

 

Modified styles in 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	Divided.visible-md .visible-lg
.hidden-phone	.hidden-xs
.hidden-tablet	.hidden-sm
.hidden-desktop	Divided.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

 

New Style in bootstrap3.x

Page Elements	Description
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 (≥0000px)	.col-lg-*
Responsive Utility Classes (≥0000px)	.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

 

Removed styles in bootstrap3.x

Page Elements	Removed from 2.x	Elements in 3.x
Form actions	.form-actions	N/
Search form	.form-search	N/
Form group with info	.control-group.info	N/
Fluid Container	.container-fluid	.container(No more fixed)
Fluid row	.row-fluid	.row(No more fixed)
Controls wrapper	.controls	N/
Controls row	.controls-row	.rowOr.form-group
Navbar inner	.navbar-inner	N/
Navbar vertical dividers	.navbar .divider-vertical	N/
Dropdown submenu	.dropdown-submenu	N/
Tab alignments	.tabs-left .tabs-right.tabs-below	N/
NAV lists	.nav-list .nav-header	There is no direct peer-to-peer style T,.panel-groupsSimilar

Difference between bootstrap2.x and bootstrap3.x