Migrieren zu v3.x
Wegweiser für den Wechsel von Bootstrap v2.x nach v3.x mit Infos zu wichtigen Änderungen, Neuheiten und entfernten Komponenten.
Wegweiser für den Wechsel von Bootstrap v2.x nach v3.x mit Infos zu wichtigen Änderungen, Neuheiten und entfernten Komponenten.
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.
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 |
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 |
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-group s 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 . |
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:
.form-control
..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..img-responsive
für eine sich anpassende <img>
-Größe..glyphicon
s, sind jetzt Schriften-basiert. Icons benötigen auch eine Grundklasse und eine Icon-Klasse (z.B. .glyphicon .glyphicon-asterisk
)..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.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.data-toggle="buttons"
statt data-toggle="buttons-checkbox"
bzw. data-toggle="buttons-radio"
in ihrem Markup.'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.