Migrer de 2.x à 3.0

Bootstrap 3 n'est pas rétrocompatible avec v2.x. Utilisez cette section comme guide général pour passer des versions 2.x à la version 3.0. Pour un aperçu plus large, consultez Les nouveautés dans l'annonce de la sortie de la version 3.0.

Principales modifications concernant les classes

Ce tableau montre les changements de style entre les versions 2.x et la version 3.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-error .alert-danger
.visible-phone .visible-xs
.visible-tablet .visible-sm
.visible-desktop Scinder en .visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Scinder 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

Nouveautés

Nous avons ajouté de nouveaux éléments et nous en avons modifié quelques-uns. Voici les nouveaux styles ou ceux qui ont été mis à jour.

Élément Description
Panneaux .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Groupes de listes .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicônes .glyphicon
Jumbotron .jumbotron
Grille de très petite taille ( .col-xs-*
Petite grille (≥768px) .col-sm-*
Grille moyenne (≥992px) .col-md-*
Grande grille (≥1200px) .col-lg-*
Classes d'utilitaire réactives (≥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-*
Taille des hauteurs de saisie .input-sm .input-lg
Groupes de saisie .input-group .input-group-addon .input-group-btn
Commandes de formulaire .form-control .form-group
Tailles de 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
Onglets/pilules justifiés .nav-justified
Images réactives .img-responsive
Lignes contextuelles de tableau .success .danger .warning .active .info
Panneaux contextuels .panel-success .panel-danger .panel-warning .panel-info
Fenêtre modale .modal-dialog .modal-content
Image miniature .img-thumbnail
Tailles de cadre .well-sm .well-lg
Liens d'alerte .alert-link

Ce qui a été retiré

Les éléments suivants ont été modifiés ou retirés de la version 3.0.

Élément Retiré de 2.x Équivalent dans 3.0
Actions de formulaire .form-actions Non disponible
Formulaire de recherche .form-search Non disponible
Groupe de formulaires avec informations .control-group.info Non disponible
Tailles de saisie de largeur fixe .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Use .form-control and the grid system instead.
Saisie de formulaire au niveau de bloc .input-block-level No direct equivalent, but forms controls are similar.
Boutons inversés .btn-inverse Non disponible
Ligne fluide .row-fluid .row (no more fixed grid)
Encadreur de commandes .controls Non disponible
Ligne de commandes .controls-row .row or .form-group
Intérieur de la barre de navigation .navbar-inner Non disponible
Diviseurs verticaux de la barre de navigation .navbar .divider-vertical Non disponible
Sous-menu déroulant .dropdown-submenu Non disponible
Alignements d'onglets .tabs-left .tabs-right .tabs-below Non disponible
Zone pouvant contenir des onglets basée sur les pilules .pill-content .tab-content
Carreau d'une zone pouvant contenir des onglets basée sur les pilules .pill-pane .tab-pane
Listes de navigation .nav-list .nav-header No direct equivalent, but list groups and .panel-groups are similar.
Aide sur la ligne pour les commandes de formulaire .help-inline N'est pas exactement équivalent, mais .help-block est similaire.
Non-bar-level progress colors .progress-info .progress-success .progress-warning .progress-danger Use .progress-bar-* on the .progress-bar instead.

Remarques supplémentaires

Les autres changements dans la version 3.0 ne sont pas immédiatement visibles. Les classes de base, les styles clés et les comportements ont été ajustés pour améliorer l'accessibilité et notre approche mobile first. Voici une liste partielle :

  • Par défaut, les commandes de formulaire textuelles reçoivent seulement une mise en forme minimale. Pour utiliser les couleurs de centrage et les coins arrondis, appliquez la classe .form-control à l'élément à mettre en forme.
  • Les commandes de formulaire textuelles sur lesquelles la classe .form-control a été appliquée ont désormais une largeur de 100% par défaut. Englobe les entrées dans <div class="col-*"></div> pour contrôler les largeurs des entrées.
  • .badge no longer has contextual (-success,-primary,etc..) classes.
  • .btn must also use .btn-default to get the "default" button.
  • .row is now fluid.
  • L'images ne sont plus réactives par défaut. Utilisez .img-responsive pour une taille d'<img> fluide.
  • Les icônes, désormais .glyphicon, sont maintenant basées sur des polices. Les icônes requièrent une classe de base et une classe d'icône. (par exemple .glyphicon .glyphicon-asterisk).
  • Typeahead a été abandonné au profit de Twitter Typeahead.
  • Le marquage de fenêtre modale a changé considérablement. Les sections .modal-header, .modal-body et .modal-footer sont désormais englobées dans .modal-content et .modal-dialog pour une meilleure mise en forme et un meilleur comportement sur les appareils mobiles. Vous ne devez plus également appliquer .hide à .modal dans votre marquage.
  • Depuis la version 3.1.0, le code HTML chargé par l'option de fenêtre modale remote est injecté dans le .modal-content (dans le .modal entre la version 3.0.0 et la version 3.0.3) au lieu d'être injecté dans le .modal-body. Ceci vous permet de varier facilement l'en-tête et le pied de page de la fenêtre modale, et pas seulement son corps.
  • The checkbox and radio features of the button.js plugin now both use data-toggle="buttons" instead of data-toggle="buttons-checkbox" or data-toggle="buttons-radio" in their markup.
  • Les événements JavaScript ont désormais un espace de noms. Par exemple, pour gérer l'événement de la fenêtre modale « show », utilisez 'show.bs.modal'. Pour les onglets « shown », utilisez 'shown.bs.tab', etc.

Pour obtenir plus d'informations sur la mise à niveau vers la version 3.0 et des extraits de code de la communauté, visitez Bootply.