Quelle est la différence entre bootstrap2 et 3

Différences : 1. Bootstrap3 prend en charge le mobile d'abord, mais pas Bootstrap ; 2. Bootstrap2 adopte un style de dégradé, tandis que Bootstrap3 adopte un style de conception plat ; 3. Bootstrap3 a une meilleure compatibilité avec les navigateurs que Bootstrap2.

Tutoriels associés recommandés : "tutoriel bootstrap"

Lorsque vous réalisez des projets, vous ferez parfois également référence à d'autres cas .Excellents points. Lors de l'utilisation de Bootstrap, j'ai constaté que de nombreux codes de projet sont différents. Dans la classe de mise en page

, .span* est utile et .col-md-* est utile. En fait, la version Bootstrap est mise à niveau et la syntaxe a également été modifiée. modifié.

Styles modifiés dans 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	分成了 .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

Nouveaux styles dans Bootstrap3.x

页面元素	描述
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 (≥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

Styles supprimés dans 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相似

Et

• Depuis Bootstrap 3, le framework inclut des styles destinés aux mobiles dans toute la bibliothèque.

• Bootstrap2 utilise un style de relief dégradé et Bootstrap3 utilise un style de conception plat

• bootstrap3 a une meilleure compatibilité avec les navigateurs que Bootstrap2

  Si vous devez être compatible avec IE8 ou même IE7 et IE6, vous ne pouvez choisir que Bootstrap2, bien que son effet sur IE6 ne soit pas parfait.
  

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn