Source

Migration auf v4

Bootstrap 4 ist eine umfassende Neufassung des gesamten Projekts. Die bemerkenswertesten Änderungen sind unten zusammengefasst, gefolgt von spezifischeren Änderungen an relevanten Komponenten.

Stabile Änderungen

Beim Wechsel von Beta 3 zu unserer stabilen Version v4.0 gibt es keine wichtigen Änderungen, aber einige bemerkenswerte Änderungen.

Drucken

  • Defekte Druckdienstprogramme behoben. Zuvor hat die Verwendung einer .d-print-*Klasse unerwarteterweise jede andere .d-*Klasse außer Kraft gesetzt. Jetzt stimmen sie mit unseren anderen Anzeigedienstprogrammen überein und gelten nur für dieses Medium ( @media print).

  • Erweiterte verfügbare Dienstprogramme für die Druckanzeige, um mit anderen Dienstprogrammen übereinzustimmen. Beta 3 und älter hatten nur block, inline-block, inlineund none. Stable v4 hinzugefügt flex, inline-flex, table, table-rowund table-cell.

  • Das Rendern der Druckvorschau in Browsern mit neuen Druckstilen, die angeben, wurde korrigiert @page size.

Beta 3-Änderungen

Während Beta 2 den Großteil unserer Breaking Changes während der Beta-Phase sah, haben wir noch einige, die in der Beta 3-Version behoben werden mussten. Diese Änderungen gelten, wenn Sie von Beta 2 oder einer älteren Version von Bootstrap auf Beta 3 aktualisieren.

Sonstig

  • Die unbenutzte $thumbnail-transitionVariable entfernt. Wir haben nichts umgestellt, also war es nur zusätzlicher Code.
  • Das npm-Paket enthält keine anderen Dateien mehr als unsere Quell- und dist-Dateien; Wenn Sie sich darauf verlassen haben und unsere Skripte über den node_modulesOrdner ausgeführt haben, sollten Sie Ihren Workflow anpassen.

Formen

  • Sowohl benutzerdefinierte als auch standardmäßige Kontrollkästchen und Radios neu geschrieben. Jetzt haben beide eine übereinstimmende HTML-Struktur (äußere <div>mit Geschwistern <input>und <label>) und dieselben Layoutstile (gestapelte Standardeinstellung, inline mit Modifikatorklasse). Dadurch können wir die Bezeichnung basierend auf dem Status der Eingabe gestalten, die Unterstützung für das disabledAttribut vereinfachen (bisher war eine übergeordnete Klasse erforderlich) und unsere Formularvalidierung besser unterstützen.

    Als Teil davon haben wir das CSS für die Verwaltung mehrerer background-images in benutzerdefinierten Formular-Kontrollkästchen und Optionsfeldern geändert. Zuvor hatte das jetzt entfernte .custom-control-indicatorElement die Hintergrundfarbe, den Farbverlauf und das SVG-Symbol. Das Anpassen des Hintergrundverlaufs bedeutete, dass alle diese jedes Mal ersetzt werden mussten, wenn Sie nur einen ändern mussten. Jetzt haben wir .custom-control-label::beforefür die Füllung und den Farbverlauf und .custom-control-label::afterbehandeln das Symbol.

    Um eine benutzerdefinierte Inline-Prüfung vorzunehmen, fügen Sie hinzu .custom-control-inline.

  • Aktualisierter Selektor für eingabebasierte Schaltflächengruppen. Anstatt [data-toggle="buttons"] { }für Stil und Verhalten verwenden wir das dataAttribut nur für JS-Verhalten und verlassen uns auf eine neue .btn-group-toggleKlasse für das Styling.

  • Entfernt .col-form-legendzugunsten einer leicht verbesserten .col-form-label. Auf diese Weise .col-form-label-smund .col-form-label-lgkann problemlos auf <legend>Elementen verwendet werden.

  • Benutzerdefinierte Dateieingaben erhielten eine Änderung an ihrer $custom-file-textSass-Variablen. Es ist keine verschachtelte Sass-Karte mehr und versorgt jetzt nur noch eine Zeichenfolge – die BrowseSchaltfläche ist jetzt das einzige Pseudo-Element, das von unserem Sass generiert wird. Der Choose fileText kommt jetzt aus der .custom-file-label.

Eingangsgruppen

  • Eingabegruppen-Addons sind jetzt spezifisch für ihre Platzierung relativ zu einer Eingabe. Wir haben .input-group-addonund .input-group-btnfür zwei neue Klassen .input-group-prependund .input-group-append. Sie müssen jetzt explizit ein Anhängen oder Präpendieren verwenden, was einen Großteil unseres CSS vereinfacht. Platzieren Sie Ihre Schaltflächen innerhalb eines Anhängens oder Voranstellens so, wie sie auch anderswo existieren würden, aber brechen Sie den Text in .input-group-text.

  • Validierungsstile werden jetzt ebenso unterstützt wie mehrere Eingaben (obwohl Sie nur eine Eingabe pro Gruppe validieren können).

  • Größenklassen müssen sich auf dem übergeordneten .input-groupElement befinden und nicht auf den einzelnen Formularelementen.

Beta2-Änderungen

Während der Beta-Phase streben wir danach, keine bahnbrechenden Änderungen zu haben. Allerdings läuft nicht immer alles wie geplant. Nachfolgend sind die wichtigsten Änderungen aufgeführt, die Sie beim Wechsel von Beta 1 zu Beta 2 beachten sollten.

Brechen

  • $badge-colorVariable und ihre Verwendung auf entfernt .badge. Wir verwenden eine Farbkontrastfunktion, um a colorbasierend auf auszuwählen background-color, sodass die Variable unnötig ist.
  • grayscale()Funktion umbenannt in gray(), um Konflikte mit dem nativen CSS grayscale-Filter zu vermeiden.
  • .table-inverse, .thead-inverse, und .thead-defaultin .*-darkund umbenannt .*-light, passend zu unseren anderswo verwendeten Farbschemata.
  • Responsive Tabellen generieren jetzt Klassen für jeden Grid-Breakpoint. Dies unterscheidet sich von Beta 1 dadurch, dass das .table-responsive, was Sie bisher verwendet haben, eher wie .table-responsive-md. Sie können jetzt .table-responsiveoder .table-responsive-{sm,md,lg,xl}nach Bedarf verwenden.
  • Gefallene Bower-Unterstützung, da der Paketmanager für Alternativen (z. B. Yarn oder npm) veraltet ist. Siehe Bower/bower#2298 für Details.
  • Bootstrap erfordert immer noch jQuery 1.9.1 oder höher, aber es wird empfohlen, Version 3.x zu verwenden, da die unterstützten Browser von v3.x diejenigen sind, die Bootstrap unterstützt, und v3.x einige Sicherheitskorrekturen enthält.
  • Die unbenutzte .form-control-labelKlasse wurde entfernt. Wenn Sie diese Klasse verwendet haben, war sie ein Duplikat der Klasse, die a mit der zugehörigen Eingabe in horizontalen Formularlayouts .col-form-labelvertikal zentriert hat.<label>
  • color-yiqDas wurde von einem Mixin, das die Eigenschaft enthielt, in eine Funktion geändert color, die einen Wert zurückgibt, sodass Sie es für jede CSS-Eigenschaft verwenden können. Anstelle von color-yiq(#000)würden Sie beispielsweise schreiben color: color-yiq(#000);.

Höhepunkte

  • Neue pointer-eventsVerwendung für Modale eingeführt. Das Äußere .modal-dialogdurchläuft Ereignisse mit pointer-events: nonefür eine benutzerdefinierte Klickbehandlung (wodurch es möglich ist, nur auf .modal-backdropKlicks zu hören) und wirkt dann für das eigentliche .modal-contentmit entgegen pointer-events: auto.

Zusammenfassung

Hier sind die wichtigsten Punkte, die Sie beachten sollten, wenn Sie von v3 zu v4 wechseln.

Browserunterstützung

  • Die Unterstützung für IE8, IE9 und iOS 6 wurde eingestellt. v4 ist jetzt nur noch IE10+ und iOS 7+. Verwenden Sie für Sites, die eines davon benötigen, v3.
  • Offizielle Unterstützung für den Browser und WebView von Android v5.0 Lollipop hinzugefügt. Frühere Versionen des Android-Browsers und WebView werden weiterhin nur inoffiziell unterstützt.

Globale Veränderungen

  • Flexbox ist standardmäßig aktiviert. Im Allgemeinen bedeutet dies eine Abkehr von Schwimmern und mehr bei unseren Komponenten.
  • Für unsere Quell-CSS-Dateien von Less auf Sass umgestellt.
  • Von pxzu remals unsere primäre CSS-Einheit gewechselt, obwohl Pixel immer noch für Medienabfragen und das Rasterverhalten verwendet werden, da Geräteansichtsfenster nicht von der Schriftgröße beeinflusst werden.
  • Die globale Schriftgröße wurde von 14pxauf erhöht 16px.
  • Überarbeitete Grid-Ebenen, um eine fünfte Option hinzuzufügen (Adressierung kleinerer Geräte bei 576pxund darunter) und das -xsInfix aus diesen Klassen entfernt. Beispiel: .col-6.col-sm-4.col-md-3.
  • Das separate optionale Thema wurde durch konfigurierbare Optionen über SCSS-Variablen (z . B. $enable-gradients: true) ersetzt.
  • Das Build-System wurde überarbeitet, um eine Reihe von npm-Skripten anstelle von Grunt zu verwenden. Siehe package.jsonfür alle Skripte oder unsere Projekt-Readme für lokale Entwicklungsanforderungen.
  • Die nicht reagierende Verwendung von Bootstrap wird nicht mehr unterstützt.
  • Der Online-Customizer wurde zugunsten einer umfassenderen Setup-Dokumentation und angepasster Builds eingestellt.
  • Dutzende neuer Hilfsklassen für gängige CSS-Eigenschaft-Wert-Paare und Tastenkombinationen für Rand-/Padding-Abstände hinzugefügt.

Grid-System

  • Auf FlexBox verschoben.
    • Unterstützung für Flexbox in den Grid-Mixins und vordefinierten Klassen hinzugefügt.
    • Als Teil von Flexbox enthaltene Unterstützung für vertikale und horizontale Ausrichtungsklassen.
  • Aktualisierte Grid-Klassennamen und eine neue Grid-Ebene.
    • Für eine genauere Steuerung wurde unten eine neue smRasterebene hinzugefügt 768px. Wir haben jetzt xs, sm, md, lg, und xl. Das bedeutet auch, dass jede Stufe um eine Stufe angehoben wurde (also .col-md-6in v3 ist jetzt .col-lg-6in v4).
    • xsGrid-Klassen wurden so geändert, dass das Infix nicht erforderlich ist, um genauer darzustellen, dass sie beginnen, Stile bei min-width: 0und nicht bei einem festgelegten Pixelwert anzuwenden. Anstelle von .col-xs-6ist es jetzt .col-6. Alle anderen Grid-Ebenen erfordern das Infix (z . B. sm).
  • Rastergrößen, Mixins und Variablen aktualisiert.
    • Gitterrinnen haben jetzt eine Sass-Karte, sodass Sie an jedem Haltepunkt bestimmte Rinnenbreiten angeben können.
    • Grid-Mixins aktualisiert, um ein make-col-readyPrep-Mixin und ein make-colzum Festlegen von flexund max-widthfür die individuelle Spaltengröße zu verwenden.
    • Grid-System-Medienabfrage-Breakpoints und Containerbreiten geändert, um neue Grid-Ebenen zu berücksichtigen und sicherzustellen, dass Spalten 12bei ihrer maximalen Breite gleichmäßig durch teilbar sind.
    • Grid-Breakpoints und Container-Breiten werden jetzt über Sass-Maps ( $grid-breakpointsund $container-max-widths) statt einer Handvoll separater Variablen behandelt. Diese ersetzen die @screen-*Variablen vollständig und ermöglichen es Ihnen, die Rasterebenen vollständig anzupassen.
    • Auch die Medienabfragen haben sich geändert. Anstatt unsere Media-Query-Deklarationen jedes Mal mit demselben Wert zu wiederholen, haben wir jetzt @include media-breakpoint-up/down/only. Anstatt zu schreiben @media (min-width: @screen-sm-min) { ... }, können Sie jetzt schreiben @include media-breakpoint-up(sm) { ... }.

Komponenten

  • Weggelassene Panels, Thumbnails und Wells für eine neue allumfassende Komponente, Karten .
  • Die Icon-Schriftart Glyphicons wurde entfernt. Wenn Sie Symbole benötigen, sind einige Optionen:
  • Das Affix jQuery-Plugin wurde gelöscht.
    • Wir empfehlen position: stickystattdessen die Verwendung. Einzelheiten und spezifische Polyfill-Empfehlungen finden Sie im HTML5 Please-Eintrag . Ein Vorschlag ist, eine @supportsRegel für die Implementierung zu verwenden (z. B. @supports (position: sticky) { ... })/
    • Wenn Sie Affix verwendet haben, um zusätzliche Nicht- positionStile anzuwenden, unterstützen die Polyfills Ihren Anwendungsfall möglicherweise nicht. Eine Option für solche Verwendungen ist die ScrollPos-Styler- Bibliothek eines Drittanbieters.
  • Die Pager-Komponente wurde entfernt, da es sich im Wesentlichen um leicht angepasste Schaltflächen handelte.
  • Nahezu alle Komponenten wurden umgestaltet , um mehr nicht verschachtelte Klassenselektoren anstelle von überspezifischen untergeordneten Selektoren zu verwenden.

Nach Komponente

Diese Liste hebt wichtige Änderungen nach Komponenten zwischen v3.xx und v4.0.0 hervor.

Neustart

Neu bei Bootstrap 4 ist Reboot , ein neues Stylesheet, das auf Normalize mit unseren eigenen etwas eigenwilligen Reset-Stilen aufbaut. Selektoren, die in dieser Datei vorkommen, verwenden nur Elemente – hier gibt es keine Klassen. Dies isoliert unsere Reset-Stile von unseren Komponentenstilen für einen modulareren Ansatz. Einige der wichtigsten Zurücksetzungen, die dies beinhaltet, sind die box-sizing: border-boxÄnderung, der Wechsel von emzu remEinheiten bei vielen Elementen, Link-Stile und viele Zurücksetzungen von Formularelementen.

Typografie

  • Alle .text-Dienstprogramme in die _utilities.scssDatei verschoben.
  • Gelöscht .page-header, da seine Stile über Dienstprogramme angewendet werden können.
  • .dl-horizontalwurde fallen gelassen. Verwenden Sie stattdessen .rowon- <dl>und Grid-Spaltenklassen (oder Mixins) für seine <dt>und untergeordneten Elemente <dd>.
  • Blockquotes wurden neu gestaltet und ihre Stile vom <blockquote>Element in eine einzelne Klasse verschoben, .blockquote. Der .blockquote-reverseModifikator für Text-Utilities wurde entfernt.
  • .list-inlineerfordert jetzt, dass die neue Klasse auf die untergeordneten Listenelemente .list-inline-itemangewendet wird.

Bilder

  • Umbenannt .img-responsivein .img-fluid.
  • Umbenannt .img-roundedin.rounded
  • Umbenannt .img-circlein.rounded-circle

Tische

  • Fast alle Instanzen des >Selektors wurden entfernt, was bedeutet, dass verschachtelte Tabellen jetzt automatisch Stile von ihren Eltern erben. Dies vereinfacht unsere Selektoren und mögliche Anpassungen erheblich.
  • Aus Konsistenzgründen .table-condensedin umbenannt ..table-sm
  • Neue .table-inverseOption hinzugefügt.
  • Modifikatoren für Tabellenkopfzeilen hinzugefügt: .thead-defaultund .thead-inverse.
  • Kontextabhängige Klassen umbenannt, sodass sie ein .table--Präfix haben. Daher .active, .success, .warning, .dangerund .infozu .table-active, .table-success, .table-warning, .table-dangerund .table-info.

Formen

  • Das verschobene Element wird auf die _reboot.scssDatei zurückgesetzt.
  • Umbenannt .control-labelin .col-form-label.
  • Umbenannt in .input-lgund .input-smin .form-control-lgbzw. .form-control-sm.
  • Der Einfachheit .form-group-*halber auf Klassen verzichtet. Verwenden Sie .form-control-*jetzt stattdessen Klassen.
  • Gelöscht .help-blockund durch Hilfetext .form-textauf Blockebene ersetzt. Verwenden Sie für Inline-Hilfetext und andere flexible Optionen Hilfsklassen wie .text-muted.
  • Gefallen .radio-inlineund .checkbox-inline.
  • Konsolidiert .checkboxund .radioin .form-checkund die verschiedenen .form-check-*Klassen.
  • Horizontale Formen überarbeitet:
    • Die .form-horizontalKlassenanforderung wurde fallen gelassen.
    • .form-groupWendet Stile aus dem .rowVia-Mixin nicht mehr an, ist also .rowjetzt für horizontale Rasterlayouts erforderlich (z . B. <div class="form-group row">).
    • Neue .col-form-labelKlasse hinzugefügt, um Beschriftungen mit .form-controls vertikal zu zentrieren.
    • Neu hinzugefügt .form-rowfür kompakte Formularlayouts mit den Rasterklassen (tauschen Sie Ihre .rowgegen a .form-rowund los).
  • Unterstützung benutzerdefinierter Formulare hinzugefügt (für Kontrollkästchen, Radios, Auswahlen und Dateieingaben).
  • .has-error, .has-warningund .has-success-Klassen durch HTML5-Formularvalidierung über CSS :invalidund Pseudoklassen ersetzt :valid.
  • Umbenannt .form-control-staticin .form-control-plaintext.

Tasten

  • Umbenannt .btn-defaultin .btn-secondary.
  • .btn-xsDie Klasse wurde vollständig fallen gelassen , da sie .btn-smproportional viel kleiner ist als die von v3.
  • Die Stateful-Button -Funktion des button.jsjQuery-Plugins wurde entfernt. Dazu gehören die $().button(string)und $().button('reset')Methoden. Wir empfehlen, stattdessen ein kleines bisschen benutzerdefiniertes JavaScript zu verwenden, das den Vorteil hat, sich genau so zu verhalten, wie Sie es möchten.
    • Beachten Sie, dass die anderen Funktionen des Plugins (Button-Checkboxen, Button-Radios, Single-Toggle-Buttons) in v4 beibehalten wurden.
  • Ändern Sie die Schaltflächen [disabled]in :disabledwie IE9+ unterstützt :disabled. Dies fieldset[disabled]ist jedoch immer noch erforderlich, da native deaktivierte Feldsätze in IE11 immer noch fehlerhaft sind .

Schaltflächengruppe

  • Komponente mit Flexbox umgeschrieben.
  • Entfernt .btn-group-justified. Als Ersatz können Sie <div class="btn-group d-flex" role="group"></div>als Wrapper um Elemente mit verwenden .w-100.
  • Die .btn-group-xsKlasse wurde vollständig gelöscht, da .btn-xs.
  • Explizite Abstände zwischen Schaltflächengruppen in Schaltflächensymbolleisten entfernt; Verwenden Sie jetzt Margin-Dienstprogramme.
  • Verbesserte Dokumentation für die Verwendung mit anderen Komponenten.
  • Von übergeordneten Selektoren auf einzelne Klassen für alle Komponenten, Modifikatoren usw. umgestellt.
  • Vereinfachte Dropdown-Stile, um nicht mehr mit aufwärts oder abwärts gerichteten Pfeilen an das Dropdown-Menü ausgeliefert zu werden.
  • Dropdowns können jetzt mit <div>s oder <ul>s erstellt werden.
  • Dropdown-Stile und -Markup neu erstellt, um einfache, integrierte Unterstützung für <a>und <button>basierte Dropdown-Elemente bereitzustellen.
  • Umbenannt .dividerin .dropdown-divider.
  • Dropdown-Elemente erfordern jetzt .dropdown-item.
  • Dropdown-Umschalter erfordern kein explizites <span class="caret"></span>; Dies wird jetzt automatisch über CSS ::afterauf bereitgestellt .dropdown-toggle.

Grid-System

  • Es wurde ein neuer 576pxGrid-Breakpoint als hinzugefügt sm, was bedeutet, dass es jetzt insgesamt fünf Ebenen gibt ( xs, sm, md, lg, und xl).
  • Die responsiven Grid-Modifikatorklassen wurden von .col-{breakpoint}-{modifier}-{size}in .{modifier}-{breakpoint}-{size}für einfachere Grid-Klassen umbenannt.
  • Gelöschte Push- und Pull-Modifikatorklassen für die neuen Flexbox-betriebenen orderKlassen. Anstelle von .col-8.push-4und .col-4.pull-8verwenden Sie beispielsweise .col-8.order-2und .col-4.order-1.
  • Flexbox-Utility-Klassen für Grid-System und Komponenten hinzugefügt.

Gruppen auflisten

  • Komponente mit Flexbox umgeschrieben.
  • Ersetzt a.list-group-itemdurch eine explizite Klasse, .list-group-item-action, zum Gestalten von Link- und Schaltflächenversionen von Listengruppenelementen.
  • .list-group-flushKlasse zur Verwendung mit Karten hinzugefügt .
  • Komponente mit Flexbox umgeschrieben.
  • Angesichts der Umstellung auf Flexbox ist die Ausrichtung der Entlassungssymbole in der Kopfzeile wahrscheinlich fehlerhaft, da wir keine Floats mehr verwenden. Floating Content steht an erster Stelle, aber bei Flexbox ist das nicht mehr der Fall. Aktualisieren Sie Ihre Entlassungssymbole so, dass sie nach modalen Titeln erscheinen, um sie zu beheben.
  • Die remoteOption (mit der externe Inhalte automatisch geladen und in ein Modal eingefügt werden konnten) und das entsprechende loaded.bs.modalEreignis wurden entfernt. Wir empfehlen stattdessen, clientseitige Vorlagen oder ein Datenbindungsframework zu verwenden oder jQuery.load selbst aufzurufen.
  • Komponente mit Flexbox umgeschrieben.
  • Fast alle >Selektoren für einfacheres Styling über nicht verschachtelte Klassen fallen gelassen.
  • Anstelle von HTML-spezifischen Selektoren wie .nav > li > averwenden wir separate Klassen für .navs, .nav-items und .nav-links. Dies macht Ihr HTML flexibler und bringt eine erhöhte Erweiterbarkeit mit sich.

Die Navigationsleiste wurde in Flexbox komplett neu geschrieben, mit verbesserter Unterstützung für Ausrichtung, Reaktionsfähigkeit und Anpassung.

  • Responsive Navigationsleistenverhalten werden jetzt auf die .navbarKlasse über das erforderliche .navbar-expand-{breakpoint} Element angewendet, bei dem Sie auswählen, wo die Navigationsleiste reduziert werden soll. Zuvor war dies eine Less-Variablenänderung und erforderte eine Neukompilierung.
  • .navbar-defaultist jetzt .navbar-light, .navbar-darkbleibt aber gleich. Einer davon ist für jede Navigationsleiste erforderlich. Diese Klassen setzen jedoch nicht mehr background-colors; stattdessen betreffen sie im Wesentlichen nur color.
  • Navbars erfordern jetzt eine Art Hintergrunddeklaration. Wählen Sie aus unseren Hintergrunddienstprogrammen ( .bg-*) oder stellen Sie Ihre eigenen mit den Light/Inverse-Klassen oben ein, um eine verrückte Anpassung zu ermöglichen .
  • Bei gegebenen Flexbox-Stilen können Navigationsleisten jetzt Flexbox-Dienstprogramme für einfache Ausrichtungsoptionen verwenden.
  • .navbar-toggleist jetzt .navbar-togglerund hat verschiedene Stile und inneres Markup (keine drei <span>s mehr).
  • Habe die .navbar-formKlasse komplett fallen gelassen. Es ist nicht mehr notwendig; Verwenden Sie stattdessen einfach die .form-inlineerforderlichen Margin-Dienstprogramme und wenden Sie sie an.
  • Navigationsleisten enthalten margin-bottomoder border-radiusstandardmäßig nicht mehr. Verwenden Sie nach Bedarf Dienstprogramme.
  • Alle Beispiele mit Navigationsleisten wurden aktualisiert, um neues Markup einzuschließen.

Seitennummerierung

  • Komponente mit Flexbox umgeschrieben.
  • Explizite Klassen ( .page-item, .page-link) sind jetzt für die Nachkommen von .paginations erforderlich
  • Die .pagerKomponente wurde vollständig gelöscht, da sie kaum mehr als angepasste Gliederungsschaltflächen war.
  • Eine explizite Klasse, .breadcrumb-item, ist jetzt für die Nachkommen von .breadcrumbs erforderlich

Etiketten und Abzeichen

  • Konsolidiert .labelund .badgeum das Element zu disambiguieren <label>und verwandte Komponenten zu vereinfachen.
  • .badge-pillAls Modifikator für abgerundeten „Pillen“-Look hinzugefügt .
  • Abzeichen werden nicht mehr automatisch in Listengruppen und anderen Komponenten schwebend angezeigt. Dafür werden jetzt Gebrauchsklassen benötigt.
  • .badge-defaultwurde gelöscht und .badge-secondaryhinzugefügt, um Komponentenmodifikatorklassen zu entsprechen, die an anderer Stelle verwendet werden.

Panels, Thumbnails und Wells

Für die neue Kartenkomponente vollständig fallen gelassen.

Platten

  • .panelzu .card, jetzt gebaut mit flexbox.
  • .panel-defaultentfernt und kein Ersatz.
  • .panel-groupentfernt und kein Ersatz. .card-groupist kein Ersatz, es ist anders.
  • .panel-headingzu.card-header
  • .panel-titlezu .card-title. Je nach gewünschtem Aussehen können Sie auch Überschriftelemente oder Klassen (zB <h3>, .h3) oder fette Elemente oder Klassen (zB <strong>, <b>, .font-weight-bold) verwenden. Beachten Sie, dass .card-title, obwohl ähnlich benannt, ein anderes Aussehen erzeugt als .panel-title.
  • .panel-bodyzu.card-body
  • .panel-footerzu.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, und .panel-dangerwurden für .bg-, .text-, und .borderDienstprogramme gelöscht, die aus unserer $theme-colorsSass-Karte generiert wurden.

Fortschritt

  • Kontextabhängige .progress-bar-*Klassen durch .bg-*Dienstprogramme ersetzt. Beispielsweise class="progress-bar progress-bar-danger"wird class="progress-bar bg-danger".
  • Ersetzt .activefür animierte Fortschrittsbalken durch .progress-bar-animated.
  • Die gesamte Komponente wurde überarbeitet, um Design und Styling zu vereinfachen. Wir haben weniger Stile, die Sie überschreiben können, neue Anzeigen und neue Symbole.
  • Alle CSS wurden entschachtelt und umbenannt, um sicherzustellen, dass jeder Klasse das Präfix .carousel-.
    • Für Karussellelemente sind , .next, .prev, .leftund .rightjetzt .carousel-item-next, .carousel-item-prev, .carousel-item-left, und .carousel-item-right.
    • .itemist jetzt auch .carousel-item.
    • Für vorherige/nächste Steuerelemente sind .carousel-control.rightund .carousel-control.leftjetzt .carousel-control-nextund .carousel-control-prev, was bedeutet, dass sie keine bestimmte Basisklasse mehr benötigen.
  • Alle reaktionsschnellen Stile entfernt, auf Dienstprogramme (z. B. Anzeigen von Beschriftungen in bestimmten Ansichtsfenstern) und benutzerdefinierte Stile nach Bedarf verschoben.
  • Bildüberschreibungen für Bilder in Karussellelementen entfernt, auf Dienstprogramme verschoben.
  • Das Karussell-Beispiel wurde optimiert, um das neue Markup und die neuen Stile einzuschließen.

Tische

  • Unterstützung für formatierte verschachtelte Tabellen entfernt. Alle Tabellenstile werden jetzt in v4 für einfachere Selektoren geerbt.
  • Umgekehrte Tabellenvariante hinzugefügt.

Dienstprogramme

  • Anzeigen, Ausblenden und mehr:
    • Responsive Anzeige-Utilities gemacht (zB .d-noneund d-{sm,md,lg,xl}-none).
    • Der Großteil der .hidden-*Dienstprogramme wurde für neue Anzeige-Dienstprogramme entfernt . .hidden-sm-upVerwenden Sie beispielsweise anstelle von .d-sm-none. Die Dienstprogramme wurden umbenannt .hidden-print, um das Benennungsschema für Anzeige-Dienstprogramme zu verwenden. Weitere Informationen finden Sie im Abschnitt Responsive Dienstprogramme auf dieser Seite.
    • .float-{sm,md,lg,xl}-{left,right,none}Klassen für responsive Floats hinzugefügt und entfernt .pull-leftund .pull-rightda sie redundant zu .float-leftund sind .float-right.
  • Typ:
    • Responsive Variationen zu unseren Textausrichtungsklassen hinzugefügt .text-{sm,md,lg,xl}-{left,center,right}.
  • Ausrichtung und Abstand:
  • Clearfix aktualisiert, um die Unterstützung für ältere Browserversionen einzustellen.

Herstellerpräfix-Mixins

Die Anbieterpräfix -Mixins von Bootstrap 3 , die in v3.2.0 veraltet waren, wurden in Bootstrap 4 entfernt. Da wir Autoprefixer verwenden , sind sie nicht mehr erforderlich.

Die folgenden Mixins wurden entfernt: animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property, transition-timing-function, transition-transform, translate, translate3d,user-select

Dokumentation

Auch unsere Dokumentation hat ein umfassendes Upgrade erhalten. Hier ist der Tiefpunkt:

  • Wir verwenden immer noch Jekyll, aber wir haben Plugins in der Mischung:
    • bugify.rbwird verwendet, um die Einträge auf unserer Browser-Fehlerseite effizient aufzulisten .
    • example.rbist ein benutzerdefinierter Fork des Standard highlight.rb-Plugins, der eine einfachere Handhabung des Beispielcodes ermöglicht.
    • callout.rbist ein ähnlicher benutzerdefinierter Fork davon, aber für unsere speziellen Docs-Callouts konzipiert.
    • Jekyll-toc wird verwendet, um unser Inhaltsverzeichnis zu generieren.
  • Der gesamte Dokumentinhalt wurde zur einfacheren Bearbeitung in Markdown (anstelle von HTML) umgeschrieben.
  • Die Seiten wurden für einfachere Inhalte und eine zugänglichere Hierarchie neu organisiert.
  • Wir sind von regulärem CSS auf SCSS umgestiegen, um die Variablen, Mixins und mehr von Bootstrap voll auszunutzen.

Reaktionsschnelle Dienstprogramme

Alle @screen-Variablen wurden in v4.0.0 entfernt. Verwenden Sie stattdessen die Mixins media-breakpoint-up(), media-breakpoint-down(), oder Sass oder die Sass-Karte.media-breakpoint-only()$grid-breakpoints

Unsere reaktionsschnellen Hilfsklassen wurden größtenteils zugunsten expliziter displayHilfsprogramme entfernt.

  • Die Klassen .hiddenund wurden entfernt, da sie mit den Methoden und .showvon jQuery in Konflikt standen . Versuchen Sie stattdessen, das Attribut umzuschalten, oder verwenden Sie Inline-Stile wie und .$(...).hide()$(...).show()[hidden]style="display: none;"style="display: block;"
  • Alle .hidden-Klassen wurden entfernt, mit Ausnahme der umbenannten Druckdienstprogramme.
    • Aus v3 entfernt:.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
    • Aus v4-Alphas entfernt:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • Druckdienstprogramme beginnen nicht mehr mit .hidden-oder .visible-, sondern mit .d-print-.
    • Alte Namen: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • Neue Klassen: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Anstatt explizite .visible-*Klassen zu verwenden, machen Sie ein Element sichtbar, indem Sie es bei dieser Bildschirmgröße einfach nicht ausblenden. Sie können eine .d-*-noneKlasse mit einer .d-*-blockKlasse kombinieren, um ein Element nur in einem bestimmten Intervall von Bildschirmgrößen anzuzeigen (z. B. .d-none.d-md-block.d-xl-nonezeigt das Element nur auf mittleren und großen Geräten).

Beachten Sie, dass die Änderungen an den Grid-Breakpoints in v4 bedeuten, dass Sie einen Breakpoint größer setzen müssen, um die gleichen Ergebnisse zu erzielen. Die neuen responsiven Utility-Klassen versuchen nicht, seltenere Fälle zu berücksichtigen, in denen die Sichtbarkeit eines Elements nicht als ein einziger zusammenhängender Bereich von Ansichtsfenstergrößen ausgedrückt werden kann; In solchen Fällen müssen Sie stattdessen benutzerdefiniertes CSS verwenden.