Quelle est la différence entre bootstrap2 et 3-Tutoriel d'amorçage-php.cn

Quelle est la différence entre bootstrap2 et 3

青灯夜游

Libérer： 2021-01-08 14:35:37

original

1563 Les gens l'ont consulté

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.

Quelle est la différence entre bootstrap2 et 3

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`相似

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!