Migration von 2.x zu 3.0

Bootstrap 3 ist nicht abwärtskompatibel mit v2.x. Verwenden Sie diesen Abschnitt als allgemeinen Leitfaden für das Upgrade von v2.x zu v3.0. Für eine breitere Übersicht siehe was neu ist in der Ankündigung der Version 3.0.

Wichtige Klassenänderungen

Diese Tabelle zeigt die Stiländerungen zwischen v2.x und 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 Aufgeteilt in .visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Aufgeteilt in .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

Was neu ist

Wir haben neue Elemente hinzugefügt und einige bestehende geändert. Hier sind die neuen oder aktualisierten Stile.

Element Beschreibung
Panels .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Listengruppen .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons .glyphicon
Jumbotron .jumbotron
Extra kleines Raster (<768px) .col-xs-*
Kleines Raster (≥768px) .col-sm-*
Mittleres Raster (≥992px) .col-md-*
Großes Raster (≥1200px) .col-lg-*
Responsive-Hilfsklassen (≥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-*
Eingabehöhengrößen .input-sm .input-lg
Eingabegruppen .input-group .input-group-addon .input-group-btn
Formularsteuerelemente .form-control .form-group
Schaltflächengruppengrößen .btn-group-xs .btn-group-sm .btn-group-lg
Navigationsleistentext .navbar-text
Navigationsleistenkopf .navbar-header
Bündig ausgerichtete Registerkarten / Pills .nav-justified
Responsive Bilder .img-responsive
Kontextabhängige Tabellenzeilen .success .danger .warning .active .info
Kontextabhängige Panels .panel-success .panel-danger .panel-warning .panel-info
Modal .modal-dialog .modal-content
Miniaturbild .img-thumbnail
Well-Größen .well-sm .well-lg
Warnlinks .alert-link

Was entfernt wurde

Die folgenden Elemente wurden in v3.0 entfernt oder geändert.

Element Entfernt aus 2.x 3.0-Entsprechung
Formularaktionen .form-actions N/A
Suchformular .form-search N/A
Formulargruppe mit Info .control-group.info N/A
Feste Eingabebreiten .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Verwenden Sie stattdessen .form-control und das Rastersystem.
Blockebene-Formulareingabe .input-block-level Keine direkte Entsprechung, aber Formularsteuerelemente sind ähnlich.
Inverse Schaltflächen .btn-inverse N/A
Fluid-Zeile .row-fluid .row (kein festes Raster mehr)
Steuerelement-Wrapper .controls N/A
Steuerelement-Zeile .controls-row .row oder .form-group
Navigationsleisten-inner .navbar-inner N/A
Navigationsleisten-vertikale Trennzeichen .navbar .divider-vertical N/A
Dropdown-Untermenü .dropdown-submenu N/A
Registerkartenausrichtungen .tabs-left .tabs-right .tabs-below N/A
Pill-basierter Registerkartenbereich .pill-content .tab-content
Pill-basierter Registerkartenbereichsbereich .pill-pane .tab-pane
Navigationslisten .nav-list .nav-header Keine direkte Entsprechung, aber Listengruppen und .panel-groups sind ähnlich.
Inline-Hilfe für Formularsteuerelemente .help-inline Keine genaue Entsprechung, aber .help-block ist ähnlich.
Nicht-Balkenebene-Fortschrittsfarben .progress-info .progress-success .progress-warning .progress-danger Verwenden Sie stattdessen .progress-bar-* auf dem .progress-bar.

Zusätzliche Hinweise

Andere Änderungen in v3.0 sind nicht sofort offensichtlich. Basisklassen, Schlüsselstile und Verhaltensweisen wurden für Flexibilität und unseren Mobile-First-Ansatz angepasst. Hier ist eine unvollständige Liste:

  • Standardmäßig erhalten textbasierte Formularsteuerelemente jetzt nur minimale Stile. Für Fokusfarben und abgerundete Ecken wenden Sie die Klasse .form-control auf das Element an, um es zu gestalten.
  • Textbasierte Formularsteuerelemente mit der angewendeten Klasse .form-control sind jetzt standardmäßig 100% breit. Wickeln Sie Eingaben in <div class="col-*"></div>, um Eingabebreiten zu steuern.
  • .badge hat keine kontextabhängigen (-success,-primary,etc..) Klassen mehr.
  • .btn muss auch .btn-default verwenden, um die "Standard"-Schaltfläche zu erhalten.
  • .row ist jetzt flüssig.
  • Bilder sind standardmäßig nicht mehr responsiv. Verwenden Sie .img-responsive für flüssige <img>-Größe.
  • Die Symbole, jetzt .glyphicon, sind jetzt schriftartbasiert. Symbole erfordern auch eine Basis- und Symbolklasse (z. B. .glyphicon .glyphicon-asterisk).
  • Typeahead wurde entfernt, zugunsten der Verwendung von Twitter Typeahead.
  • Das Modal-Markup hat sich erheblich geändert. Die Abschnitte .modal-header, .modal-body und .modal-footer sind jetzt in .modal-content und .modal-dialog für bessere mobile Gestaltung und Verhalten eingeschlossen. Außerdem sollten Sie .hide nicht mehr auf .modal in Ihrem Markup anwenden.
  • Ab v3.1.0 wird das von der remote-Modaloption geladene HTML jetzt in .modal-content (von v3.0.0 bis v3.0.3 in .modal) anstatt in .modal-body injiziert. Dies ermöglicht es Ihnen, auch den Kopf- und Fußzeilenteil des Modals einfach zu variieren, nicht nur den Modal-Körper.
  • Die Checkbox- und Radio-Funktionen des button.js-Plugins verwenden jetzt beide data-toggle="buttons" anstatt data-toggle="buttons-checkbox" oder data-toggle="buttons-radio" in ihrem Markup.
  • JavaScript-Ereignisse sind namespaced. Verwenden Sie beispielsweise, um das Modal-"show"-Ereignis zu behandeln, 'show.bs.modal'. Für Registerkarten "shown" verwenden Sie 'shown.bs.tab', usw.

Weitere Informationen zum Upgrade auf v3.0 und Code-Snippets aus der Community finden Sie unter Bootply.