Migrieren von 2.x nach 3.0

Bootstrap 3 ist nicht rückwärts-kompatibel mit v2.x. Verwende diesen Abschnitt als einen allgemeinen Ratgeber für das Upgrade von v2.x auf v3.0. Für eine breitere Übersicht kannst du im Blogpost zur Veröffentlichung von v3.0 lesen, was neu ist.

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 bereits existierende verändert. Hier sind die neuen oder aktualisierten Stile.

Element Beschreibung
Panele .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-*
Verschiedene Input-Höhen .input-sm .input-lg
Input-Gruppen .input-group .input-group-addon .input-group-btn
Formular-Elemente .form-control .form-group
Button-Gruppen-Größen .btn-group-xs .btn-group-sm .btn-group-lg
Navbar-Text .navbar-text
Navbar-Header .navbar-header
Gleichmäßige Tabs / Pills .nav-justified
Responsive Bilder .img-responsive
Kontext-Tabellenzeilen .success .danger .warning .active .info
Kontext-Panele .panel-success .panel-danger .panel-warning .panel-info
Modal .modal-dialog .modal-content
Vorschaubilder .img-thumbnail
Well-Größen .well-sm .well-lg
Warnhinweis-Links .alert-link

Was weg ist

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

Element Entfernt aus 2.x 3.0 Äquivalent
Formular-Aktionen .form-actions N/A
Suchfeld .form-search N/A
Formular-Gruppe mit Info .control-group.info N/A
Inputs mit fester Breite .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Verwende stattdessen .form-control und das Raster-System.
Block-Formularelement .input-block-level Kein direktes Pendant, aber Formularfelder sind ähnlich.
Invertierte Buttons .btn-inverse N/A
Fließende Rasterzeile .row-fluid .row (kein fixiertes Raster mehr)
Feld-Wrapper .controls N/A
Feld-Reihe .controls-row .row oder .form-group
Navbar-Inner .navbar-inner N/A
Vertikale Navbar-Unterteiler .navbar .divider-vertical N/A
Dropdown-Submenü .dropdown-submenu N/A
Tab-Ausrichtung .tabs-left .tabs-right .tabs-below N/A
Pill-basierte Tab-Felder .pill-content .tab-content
Pill-basierte Tab-Flächen .pill-pane .tab-pane
Nav-Listen .nav-list .nav-header Kein direktes Pendant, aber Listengruppen und .panel-groups sind ähnlich.
Inline-Hilfetext für Formulare .help-inline Kein direktes Pendant, aber .help-block ist ähnlich.
Verlaufsanzeigenfarben nicht auf Balken-Ebene .progress-info .progress-success .progress-warning .progress-danger Verwende .progress-bar-* stattdessen neben .progress-bar.

Sonstiges

Weitere Änderungen in v3.0 sind nicht direkt sichtbar. Grundklassen, wichtige Stile und Verhalten wurden für mehr Flexibilität und unseren Mobile-First-Ansatz angepasst. Hier ist ein Auszug dieser Änderungen:

  • Text-basierte Formular-Felder werden jetzt standardmäßig nur noch minimal gestaltet. Für Fokus-Farben und abgerundete Ecken brauchst du die Klasse .form-control.
  • Text-basierte Formular-Felder mit der Klasse .form-control sind jetzt standardmäßig 100% breit. Pack Felder in <div class="col-*"></div>, um die Breite anzupassen.
  • .badge hat keine Kontextklassen (-success,-primary,etc..) mehr.
  • .btn benötigt .btn-default, um zu einem Standard-Button zu werden.
  • .row ist jetzt fließend, nicht mehr fixiert.
  • Bilder sind nicht mehr standardmäßig responsiv. Verwende .img-responsive für eine sich anpassende <img>-Größe.
  • Die Icons, jetzt .glyphicons, sind jetzt Schriften-basiert. Icons benötigen auch eine Grundklasse und eine Icon-Klasse (z.B. .glyphicon .glyphicon-asterisk).
  • Typeahead gibt es nicht mehr, verwende stattdessen Twitter Typeahead.
  • Modal-Markup wurde erheblich verändert. Die .modal-header, .modal-body und .modal-footer Bereiche sind jetzt innerhalb von .modal-content und .modal-dialog für bessere Stile und besseres Verhalten auf mobilen Geräten. Du solltest außerdem in deinem Markup nicht mehr .hide auf .modal anwenden.
  • Ab v3.1.0 wird das HTML von der remote-Option des Modals in .modal-content statt in den .modal-body geladen (von v3.0.0 bis v3.0.3 in .modal). Das erlaubt es dir, auch den Header und Footer des Modals zu verändern und nicht nur den Body.
  • Die Checkbox- und Radio-Funktionen des button.js-Plugins verwenden jetzt beide data-toggle="buttons" statt data-toggle="buttons-checkbox" bzw. data-toggle="buttons-radio" in ihrem Markup.
  • JavaScript-Ereignisse sind jetzt namespaced. Zum Beispiel solltest du für das "show"-Ereignis des Modals 'show.bs.modal' verwenden. Für das "shown"-Ereignis bei Tabs verwende 'shown.bs.tab', usw.

Für mehr Informationen über das Upgrade auf v3.0 und Code-Schnipsel aus der Community kannst du bei Bootply vorbeischauen.