Migration von 2.x auf 3.0

Bootstrap 3 ist nicht abwärtskompatibel mit v2.x. Verwenden Sie diesen Abschnitt als allgemeine Anleitung zum Upgrade von v2.x auf v3.0. Eine breitere Übersicht finden Sie in den Neuerungen in der Release-Ankündigung von v3.0.

Große Klassenwechsel

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 gibt's Neues

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

Element Beschreibung
Platten .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Gruppen auflisten .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 Utility-Klassen (≥1200px) .visible-lg .hidden-lg
Offsets .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Drücken .col-sm-push-* .col-md-push-* .col-lg-push-*
Ziehen .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Höhengrößen eingeben .input-sm .input-lg
Eingangsgruppen .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
Navbar-Text .navbar-text
Navbar-Kopfzeile .navbar-header
Berechtigte Tabs / Pillen .nav-justified
Ansprechende Bilder .img-responsive
Kontextbezogene Tabellenzeilen .success .danger .warning .active .info
Kontextbezogene Tafeln .panel-success .panel-danger .panel-warning .panel-info
Modal .modal-dialog .modal-content
Vorschaubild .img-thumbnail
Gut Größen .well-sm .well-lg
Benachrichtigungslinks .alert-link

Was wurde entfernt

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

Element Aus 2.x entfernt 3,0 Äquivalent
Aktionen bilden .form-actions N / A
Suchformular .form-search N / A
Gruppe mit Infos bilden .control-group.info N / A
Eingabegrößen mit fester Breite .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Verwenden Sie stattdessen .form-controlund das Grid-System .
Formulareingabe auf Blockebene .input-block-level Keine direkte Entsprechung, aber Formularsteuerelemente sind ähnlich.
Umgekehrte Schaltflächen .btn-inverse N / A
Fließende Reihe .row-fluid .row(kein festes Raster mehr)
Steuert Wrapper .controls N / A
Steuert Zeile .controls-row .rowoder.form-group
Navbar innen .navbar-inner N / A
Vertikale Navbar-Teiler .navbar .divider-vertical N / A
Dropdown-Untermenü .dropdown-submenu N / A
Tab-Ausrichtungen .tabs-left .tabs-right .tabs-below N / A
Tabbable-Bereich auf Pillenbasis .pill-content .tab-content
Pillenbasierter Tabulatorbereich .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 exakte Entsprechung, aber .help-blockähnlich.
Fortschrittsfarben außerhalb des Balkens .progress-info .progress-success .progress-warning .progress-danger Verwenden Sie stattdessen .progress-bar-*auf ..progress-bar

Zusätzliche Bemerkungen

Andere Änderungen in v3.0 sind nicht sofort ersichtlich. 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 noch ein minimales Styling. Wenden Sie für Fokusfarben und abgerundete Ecken die .form-controlKlasse auf das zu stylende Element an.
  • Textbasierte Formularsteuerelemente mit .form-controlangewendeter Klasse sind jetzt standardmäßig 100 % breit. Umbrechen Sie Eingaben <div class="col-*"></div>, um die Eingabebreiten zu steuern.
  • .badgehat keine kontextuellen (-success,-primary,usw.) Klassen mehr.
  • .btnmuss auch verwendet .btn-defaultwerden, um die Schaltfläche "Standard" zu erhalten.
  • .rowist jetzt flüssig.
  • Bilder reagieren standardmäßig nicht mehr. Verwenden Sie .img-responsivefür flüssige <img>Größe.
  • Die Symbole, jetzt .glyphicon, basieren jetzt auf Schriftarten. Symbole erfordern auch eine Basis- und Symbolklasse (z . B. .glyphicon .glyphicon-asterisk).
  • Typeahead wurde zugunsten der Verwendung von Twitter Typeahead gestrichen .
  • Das modale Markup hat sich erheblich geändert. Die Abschnitte .modal-header, .modal-body, und .modal-footersind jetzt in .modal-contentund .modal-dialogumschlossen, um das Styling und Verhalten für Mobilgeräte zu verbessern. Außerdem sollten Sie nicht mehr .hideauf .modalin Ihrem Markup anwenden.
  • Ab v3.1.0 wird das von der remotemodalen Option geladene HTML nun in die .modal-content(von v3.0.0 bis v3.0.3 in die .modal) statt in die eingefügt .modal-body. Auf diese Weise können Sie auch die Kopf- und Fußzeile des Modals einfach variieren, nicht nur den Modal-Body.
  • Die Checkbox- und Radio-Funktionen des button.js-Plug-ins werden jetzt beide data-toggle="buttons"anstelle von data-toggle="buttons-checkbox"oder data-toggle="buttons-radio"in ihrem Markup verwendet.
  • JavaScript-Ereignisse sind Namensräume. Um beispielsweise das modale Ereignis „show“ zu behandeln, verwenden Sie 'show.bs.modal'. Verwenden Sie für "angezeigte" Registerkarten 'shown.bs.tab'usw.

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