Migration de 2.x vers 3.0

Bootstrap 3 n'est pas rétrocompatible avec v2.x. Utilisez cette section comme guide général pour la mise à niveau de v2.x vers v3.0. Pour un aperçu plus large, consultez les nouveautés de l'annonce de la version v3.0.

Changements majeurs de classe

Ce tableau montre les changements de style entre la v2.x et la v3.0.

Amorçage 2.x Amorçage 3.0
.row-fluid .row
.span* .col-md-*
.offset* .col-md-offset-*
.brand .navbar-brand
.navbar .nav .navbar-nav
.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 .alert .alert-warning
.alert-error .alert-danger
.visible-phone .visible-xs
.visible-tablet .visible-sm
.visible-desktop Séparé en.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Séparé en.hidden-md .hidden-lg
.input-block-level .form-control
.control-group .form-group
.control-group.warning .control-group.error .control-group.success .form-group.has-*
.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

Quoi de neuf

Nous avons ajouté de nouveaux éléments et modifié certains éléments existants. Voici les styles nouveaux ou mis à jour.

Élément La description
Panneaux .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Liste des groupes .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons .glyphicon
Jumbotron .jumbotron
Grille extra petite (<768px) .col-xs-*
Petite grille (≥768px) .col-sm-*
Grille moyenne (≥992px) .col-md-*
Grande grille (≥1200px) .col-lg-*
Classes utilitaires responsives (≥1200px) .visible-lg .hidden-lg
Décalages .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Pousser .col-sm-push-* .col-md-push-* .col-lg-push-*
Tirer .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Tailles de hauteur d'entrée .input-sm .input-lg
Groupes d'entrée .input-group .input-group-addon .input-group-btn
Champs de formulaire .form-control .form-group
Tailles des groupes de boutons .btn-group-xs .btn-group-sm .btn-group-lg
Texte de la barre de navigation .navbar-text
En-tête de la barre de navigation .navbar-header
Comprimés / pilules justifiés .nav-justified
Images réactives .img-responsive
Lignes du tableau contextuel .success .danger .warning .active .info
Panneaux contextuels .panel-success .panel-danger .panel-warning .panel-info
Modal .modal-dialog .modal-content
Vignette .img-thumbnail
Tailles de puits .well-sm .well-lg
Liens d'alerte .alert-link

Éléments supprimés

Les éléments suivants ont été supprimés ou modifiés dans la v3.0.

Élément Supprimé de 2.x Équivalent 3.0
Actions de formulaire .form-actions N / A
Formulaire de recherche .form-search N / A
Groupe de formulaire avec info .control-group.info N / A
Tailles d'entrée à largeur fixe .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Utilisez .form-controlet le système de grille à la place.
Saisie de formulaire au niveau du bloc .input-block-level Pas d'équivalent direct, mais les contrôles de formulaires sont similaires.
Boutons inversés .btn-inverse N / A
Ligne fluide .row-fluid .row(plus de grille fixe)
Enveloppe de contrôles .controls N / A
Ligne de contrôles .controls-row .rowou.form-group
Barre de navigation intérieure .navbar-inner N / A
Séparateurs verticaux de la barre de navigation .navbar .divider-vertical N / A
Sous-menu déroulant .dropdown-submenu N / A
Alignements des onglets .tabs-left .tabs-right .tabs-below N / A
Zone de tabulation basée sur les pilules .pill-content .tab-content
Volet de zone à onglets basé sur des pilules .pill-pane .tab-pane
Nav lists .nav-list .nav-header No direct equivalent, but list groups and .panel-groups are similar.
Inline help for form controls .help-inline No exact equivalent, but .help-block is similar.
Non-bar-level progress colors .progress-info .progress-success .progress-warning .progress-danger Use .progress-bar-* on the .progress-bar instead.

Additional notes

Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first approach. Here's a partial list:

  • By default, text-based form controls now receive only minimal styling. For focus colors and rounded corners, apply the .form-control class on the element to style.
  • Text-based form controls with the .form-control class applied are now 100% wide by default. Wrap inputs inside <div class="col-*"></div> to control input widths.
  • .badge no longer has contextual (-success,-primary,etc..) classes.
  • .btn must also use .btn-default to get the "default" button.
  • .row is now fluid.
  • Images are no longer responsive by default. Use .img-responsive for fluid <img> size.
  • The icons, now .glyphicon, are now font based. Icons also require a base and icon class (e.g. .glyphicon .glyphicon-asterisk).
  • Typeahead has been dropped, in favor of using Twitter Typeahead.
  • Modal markup has changed significantly. The .modal-header, .modal-body, and .modal-footer sections are now wrapped in .modal-content and .modal-dialog for better mobile styling and behavior. Also, you should no longer apply .hide to .modal in your markup.
  • Depuis la v3.1.0, le code HTML chargé par l' remoteoption modale est désormais injecté dans le .modal-content(de la v3.0.0 à la v3.0.3, dans le .modal) au lieu de dans le .modal-body. Cela vous permet également de modifier facilement l'en-tête et le pied de page du modal, pas seulement le corps du modal.
  • La case à cocher et les fonctionnalités radio du plugin button.js sont désormais utilisées à la data-toggle="buttons"place de data-toggle="buttons-checkbox"ou data-toggle="buttons-radio"dans leur balisage.
  • Les événements JavaScript sont placés dans un espace de noms. Par exemple, pour gérer l'événement modal "show", utilisez 'show.bs.modal'. Pour les onglets "montrés", utilisez 'shown.bs.tab', etc.

Pour plus d'informations sur la mise à niveau vers la v3.0 et des extraits de code de la communauté, consultez Bootply .