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 dans l'annonce de la version v3.0.

Changements majeurs de classes

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

Bootstrap 2.x Bootstrap 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 Split into .visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Split into .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

Nouveautés

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

Élément Description
Panneaux .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Groupes de liste .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons .glyphicon
Jumbotron .jumbotron
Grille extra petite (<768px) .col-xs-*
Grille petite (≥768px) .col-sm-*
Grille moyenne (≥992px) .col-md-*
Grille grande (≥1200px) .col-lg-*
Classes utilitaires responsive (≥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 de saisie .input-sm .input-lg
Groupes de saisie .input-group .input-group-addon .input-group-btn
Contrôles de formulaire .form-control .form-group
Tailles de groupe de boutons .btn-group-xs .btn-group-sm .btn-group-lg
Texte de barre de navigation .navbar-text
En-tête de barre de navigation .navbar-header
Onglets / pilules justifiés .nav-justified
Images responsive .img-responsive
Lignes de tableau contextuelles .success .danger .warning .active .info
Panneaux contextuels .panel-success .panel-danger .panel-warning .panel-info
Modal .modal-dialog .modal-content
Image miniature .img-thumbnail
Tailles de well .well-sm .well-lg
Liens d'alerte .alert-link

Ce qui a été supprimé

Les éléments suivants ont été supprimés ou modifiés dans 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 de saisie de largeur fixe .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Utilisez .form-control et le système de grille à la place.
Saisie de formulaire de niveau bloc .input-block-level Pas d'équivalent direct, mais les contrôles de formulaire sont similaires.
Boutons inverses .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 .row ou .form-group
Intérieur de barre de navigation .navbar-inner N/A
Diviseurs verticaux de barre de navigation .navbar .divider-vertical N/A
Sous-menu déroulant .dropdown-submenu N/A
Alignements d'onglets .tabs-left .tabs-right .tabs-below N/A
Zone tabulable basée sur pilules .pill-content .tab-content
Volet de zone tabulable basée sur pilules .pill-pane .tab-pane
Listes de navigation .nav-list .nav-header Pas d'équivalent direct, mais les groupes de liste et les .panel-groups sont similaires.
Aide en ligne pour les contrôles de formulaire .help-inline Pas d'équivalent exact, mais .help-block est similaire.
Couleurs de progression non au niveau de barre .progress-info .progress-success .progress-warning .progress-danger Utilisez .progress-bar-* sur .progress-bar à la place.

Notes supplémentaires

D'autres changements dans v3.0 ne sont pas immédiatement apparents. Les classes de base, les styles clés et les comportements ont été ajustés pour la flexibilité et notre approche mobile first. Voici une liste partielle :

  • Par défaut, les contrôles de formulaire basés sur le texte reçoivent maintenant un style minimal. Pour les couleurs de focus et les coins arrondis, appliquez la classe .form-control sur l'élément à styliser.
  • Les contrôles de formulaire basés sur le texte avec la classe .form-control appliquée sont maintenant à 100% de largeur par défaut. Enveloppez les saisies dans <div class="col-*"></div> pour contrôler les largeurs de saisie.
  • .badge n'a plus de classes contextuelles (-success,-primary,etc..).
  • .btn doit également utiliser .btn-default pour obtenir le bouton "par défaut".
  • .row est maintenant fluide.
  • Les images ne sont plus responsive par défaut. Utilisez .img-responsive pour la taille fluide de <img>.
  • Les icônes, maintenant .glyphicon, sont maintenant basées sur des polices. Les icônes nécessitent également une classe de base et une classe d'icône (par exemple .glyphicon .glyphicon-asterisk).
  • Typeahead a été supprimé, en faveur de l'utilisation de Twitter Typeahead.
  • Le balisage modal a changé de manière significative. Les sections .modal-header, .modal-body et .modal-footer sont maintenant enveloppées dans .modal-content et .modal-dialog pour un meilleur style et comportement mobile. De plus, vous ne devez plus appliquer .hide à .modal dans votre balisage.
  • Depuis la v3.1.0, le HTML chargé par l'option remote modal est maintenant injecté dans le .modal-content (de v3.0.0 à v3.0.3, dans le .modal) au lieu de dans le .modal-body. Cela vous permet également de faire varier facilement l'en-tête et le pied de page du modal, pas seulement le corps du modal.
  • Les fonctionnalités de case à cocher et de radio du plugin button.js utilisent maintenant toutes les deux data-toggle="buttons" au lieu de data-toggle="buttons-checkbox" ou data-toggle="buttons-radio" dans leur balisage.
  • Les événements JavaScript sont espacés par nom. Par exemple, pour gérer l'événement "show" modal, utilisez 'show.bs.modal'. Pour les onglets "shown", utilisez 'shown.bs.tab', etc.

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