Migration auf v5

v5.2.0

Erfrischtes Design

Bootstrap v5.2.0 bietet ein subtiles Design-Update für eine Handvoll Komponenten und Eigenschaften im gesamten Projekt, insbesondere durch verfeinerte border-radiusWerte für Schaltflächen und Formularsteuerelemente . Unsere Dokumentation wurde auch mit einer neuen Startseite, einem einfacheren Dokumentlayout, das keine Abschnitte der Seitenleiste mehr einklappt, und prominenteren Beispielen für Bootstrap-Symbole aktualisiert .

Weitere CSS-Variablen

Wir haben alle unsere Komponenten aktualisiert, um CSS-Variablen zu verwenden. Während Sass immer noch alles untermauert, wurde jede Komponente aktualisiert, um CSS-Variablen in den Komponenten-Basisklassen (z. B. .btn) einzuschließen, was eine bessere Echtzeit-Anpassung von Bootstrap ermöglicht. In späteren Versionen werden wir die Verwendung von CSS-Variablen in unserem Layout, unseren Formularen, Helfern und Dienstprogrammen weiter ausbauen. Lesen Sie mehr über CSS-Variablen in jeder Komponente auf den jeweiligen Dokumentationsseiten.

Unsere Verwendung von CSS-Variablen wird bis Bootstrap 6 etwas unvollständig sein. Obwohl wir diese gerne vollständig implementieren würden, laufen sie Gefahr, bahnbrechende Änderungen zu verursachen. Zum Beispiel $alert-border-width: var(--bs-border-width)bricht die Einstellung in unserem Quellcode potenziellen Sass in Ihrem eigenen Code, wenn Sie dies $alert-border-width * 2aus irgendeinem Grund getan haben.

Daher werden wir, wo immer möglich, weiterhin auf mehr CSS-Variablen drängen, aber bitte beachten Sie, dass unsere Implementierung in v5 möglicherweise etwas eingeschränkt ist.

Neu_maps.scss

Bootstrap v5.2.0 führte eine neue Sass-Datei mit _maps.scss. Es zieht mehrere Sass-Karten heraus _variables.scss, um ein Problem zu beheben, bei dem Aktualisierungen einer ursprünglichen Karte nicht auf sekundäre Karten angewendet wurden, die sie erweitern. Beispielsweise wurden Aktualisierungen von $theme-colorsnicht auf andere Themenkarten angewendet, die auf basierten $theme-colors, wodurch wichtige Anpassungsworkflows unterbrochen wurden. Kurz gesagt, Sass hat eine Einschränkung, bei der eine einmal verwendete Standardvariable oder -map nicht aktualisiert werden kann . Es gibt einen ähnlichen Mangel bei CSS-Variablen, wenn sie verwendet werden, um andere CSS-Variablen zu erstellen.

Aus diesem Grund müssen variable Anpassungen in Bootstrap nach @import "functions", aber vor @import "variables"und dem Rest unseres Importstapels kommen. Dasselbe gilt für Sass-Karten – Sie müssen die Standardeinstellungen überschreiben, bevor sie verwendet werden. Die folgenden Karten wurden in die neue verschoben _maps.scss:

• $theme-colors-rgb
• $utilities-colors
• $utilities-text
• $utilities-text-colors
• $utilities-bg
• $utilities-bg-colors
• $negative-spacers
• $gutters

Ihre benutzerdefinierten Bootstrap-CSS-Builds sollten jetzt mit einem separaten Kartenimport ungefähr so ​​​​aussehen.

  // Functions come first
  @import "functions";

  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Variables come next
  @import "variables";

+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

Neue Dienstprogramme

• Erweiterte font-weightDienstprogramme für .fw-semiboldhalbfette Schriftarten.
• Erweiterte border-radiusDienstprogramme um zwei neue Größen .rounded-4und .rounded-5, für mehr Optionen.

Zusätzliche Änderungen

• Neue $enable-container-classesOption eingeführt. — Wenn Sie sich jetzt für das experimentelle CSS-Grid-Layout entscheiden, .container-*werden Klassen immer noch kompiliert, es sei denn, diese Option ist auf festgelegt false. Container behalten jetzt auch ihre Dachrinnenwerte.

• Die Offcanvas-Komponente hat jetzt ansprechende Variationen . Die ursprüngliche .offcanvasKlasse bleibt unverändert – sie blendet Inhalte in allen Ansichtsfenstern aus. Um es reaktionsfähig zu machen, ändern Sie diese .offcanvasKlasse in eine beliebige .offcanvas-{sm|md|lg|xl|xxl}Klasse.

• Dickere Tischteiler sind jetzt optional. — Wir haben die dickere und schwieriger zu überschreibende Grenze zwischen Tabellengruppen entfernt und sie in eine optionale Klasse verschoben, die Sie anwenden können, .table-group-divider. Ein Beispiel finden Sie in der Tabellendokumentation.

• Scrollspy wurde neu geschrieben , um die Intersection Observer API zu verwenden , was bedeutet, dass Sie keine relativen übergeordneten Wrapper mehr benötigen, dieoffsetund mehr. Achten Sie darauf, dass Ihre Scrollspy-Implementierungen in ihrer Navigationshervorhebung genauer und konsistenter sind.

• Popover und Tooltips verwenden jetzt CSS-Variablen. Einige CSS-Variablen wurden von ihren Sass-Gegenstücken aktualisiert, um die Anzahl der Variablen zu reduzieren. Aus diesem Grund wurden in dieser Version drei Variablen als veraltet markiert: $popover-arrow-color, $popover-arrow-outer-color, und $tooltip-arrow-color.

• Neue .text-bg-{color}Helfer hinzugefügt. Anstatt individuelle .text-*und .bg-*Dienstprogramme einzustellen, können Sie jetzt die .text-bg-*Helfer verwenden , um einen background-colormit kontrastierendem Vordergrund zu setzen color.

• .form-check-reverseModifikator hinzugefügt , um die Reihenfolge der Beschriftungen und der zugehörigen Kontrollkästchen/Radios umzukehren.

• Unterstützung für gestreifte Spalten zu Tabellen über die neue .table-striped-columnsKlasse hinzugefügt .

Eine vollständige Liste der Änderungen finden Sie im v5.2.0-Projekt auf GitHub .

v5.1.0

• Experimentelle Unterstützung für das CSS-Grid-Layout hinzugefügt . — Dies ist noch in Arbeit und noch nicht für den Produktionseinsatz bereit, aber Sie können sich über Sass für die neue Funktion entscheiden. Um es zu aktivieren, deaktivieren Sie das Standardraster, indem Sie $enable-grid-classes: falsedas CSS-Raster festlegen, und aktivieren Sie es durch die Einstellung $enable-cssgrid: true.

• Navigationsleisten aktualisiert, um Offcanvas zu unterstützen. — Fügen Sie Offcanvas-Schubladen in jeder Navigationsleiste mit den responsiven .navbar-expand-*Klassen und etwas Offcanvas-Markup hinzu.

• Neue Platzhalterkomponente hinzugefügt . — Unsere neueste Komponente, eine Möglichkeit, anstelle von echtem Inhalt temporäre Blöcke bereitzustellen, um anzuzeigen, dass auf Ihrer Website oder App noch etwas geladen wird.

• Das Kollaps-Plugin unterstützt jetzt das horizontale Kollabieren . — Fügen .collapse-horizontalSie statt .collapseder . Vermeiden Sie das Neuzeichnen des Browsers, indem Sie ein oder setzen .widthheightmin-heightheight

• Neue Helfer für Stapel und vertikale Regeln hinzugefügt. — Wenden Sie schnell mehrere Flexbox-Eigenschaften an, um schnell benutzerdefinierte Layouts mit Stapeln zu erstellen . Wählen Sie zwischen horizontalen ( .hstack) und vertikalen ( .vstack) Stapeln. Fügen Sie vertikale Trennlinien ähnlich wie <hr>Elemente mit den neuen .vrHelfern hinzu .

• Neue globale :rootCSS-Variablen hinzugefügt. — Der Ebene wurden mehrere neue CSS-Variablen zum :rootSteuern von <body>Stilen hinzugefügt. Weitere sind in Arbeit, auch für unsere Dienstprogramme und Komponenten, aber lesen Sie vorerst die CSS-Variablen im Abschnitt Anpassen .

• Überarbeitete Dienstprogramme für Farbe und Hintergrund zur Verwendung von CSS-Variablen und neue Dienstprogramme für die Deckkraft von Text und Hintergrund hinzugefügt . – .text-* und .bg-*Dienstprogramme werden jetzt mit CSS-Variablen und rgba()Farbwerten erstellt, sodass Sie jedes Dienstprogramm einfach mit neuen Dienstprogrammen für die Deckkraft anpassen können.

• Neue Snippet-Beispiele hinzugefügt, um zu zeigen, wie unsere Komponenten angepasst werden können. — Mit unseren neuen Snippets-Beispielen können Sie benutzerdefinierte Komponenten und andere gängige Designmuster verwenden . Beinhaltet Fußzeilen , Dropdowns , Listengruppen und Modals .

• Ungenutzte Positionierungsstile aus Popovern und Tooltips entfernt , da diese ausschließlich von Popper gehandhabt werden. $tooltip-marginwurde als veraltet markiert und nullim Prozess auf gesetzt.

Möchten Sie weitere Informationen? Lesen Sie den v5.1.0-Blogbeitrag.

Abhängigkeiten

• jQuery gelöscht.
• Upgrade von Popper v1.x auf Popper v2.x.
• Libsass wurde durch Dart Sass ersetzt, da unser Sass-Compiler mit Libsass veraltet war.
• Von Jekyll zu Hugo migriert, um unsere Dokumentation zu erstellen

Browserunterstützung

• Internet Explorer 10 und 11 fallen gelassen
• Verworfener Microsoft Edge < 16 (Legacy Edge)
• Firefox < 60 fallen gelassen
• Gefallene Safari < 12
• Verworfen iOS Safari < 12
• Dropped Chrome < 60

Dokumentationsänderungen

• Überarbeitete Homepage, Dokumentenlayout und Fußzeile.
• Neuer Paketleitfaden hinzugefügt .
• Neuer Abschnitt „Anpassen“ hinzugefügt , der die Theming-Seite von v4 ersetzt , mit neuen Details zu Sass, globalen Konfigurationsoptionen, Farbschemata, CSS-Variablen und mehr.
• Die gesamte Formulardokumentation wurde in den neuen Abschnitt „Formulare“ umorganisiert und der Inhalt in fokussiertere Seiten aufgeteilt.
• Ebenso wurde der Abschnitt „Layout“ aktualisiert , um den Inhalt des Rasters klarer zu gestalten.
• Komponentenseite „Navs“ in „Navs & Tabs“ umbenannt.
• Die Seite „Checks“ wurde in „Checks & Radios“ umbenannt.
• Die Navigationsleiste wurde neu gestaltet und ein neues Unternavigationssystem hinzugefügt, um die Navigation auf unseren Websites und in den Dokumentversionen zu vereinfachen.
• Neue Tastenkombination für das Suchfeld hinzugefügt: Ctrl + /.

Sass

• Wir haben die standardmäßigen Sass-Kartenzusammenführungen aufgegeben, um das Entfernen redundanter Werte zu vereinfachen. Denken Sie daran, dass Sie jetzt alle Werte in den Sass-Maps wie definieren müssen $theme-colors. Sehen Sie sich an, wie Sie mit Sass-Karten umgehen .

• Brechencolor-yiq()Funktion und zugehörige Variablen in umbenannt , color-contrast()da sie nicht mehr mit dem YIQ-Farbraum zusammenhängen. Siehe #30168.

  • $yiq-contrasted-thresholdwird umbenannt in $min-contrast-ratio.
  • $yiq-text-darkund $yiq-text-lightwerden jeweils in $color-contrast-darkund umbenannt $color-contrast-light.

• BrechenMedia-Query-Mixins-Parameter wurden für einen logischeren Ansatz geändert.

  • media-breakpoint-down()verwendet den Unterbrechungspunkt selbst anstelle des nächsten Unterbrechungspunkts (z. B. media-breakpoint-down(lg)anstelle von media-breakpoint-down(md)Zielansichtsfenstern kleiner als lg).
  • In ähnlicher Weise verwendet der zweite Parameter in media-breakpoint-between()auch den Unterbrechungspunkt selbst anstelle des nächsten Unterbrechungspunkts (z. B. media-between(sm, lg)anstelle von media-breakpoint-between(sm, md)Zielansichtsfenstern zwischen smund lg).

• BrechenDruckstile und $enable-print-stylesVariable entfernt. Print-Display-Klassen gibt es immer noch. Siehe #28339 .

• BrechenDie Funktionen color(), theme-color(), und gray()wurden zugunsten von Variablen weggelassen. Siehe #29083 .

• Brechentheme-color-level()Funktion umbenannt in color-level()und akzeptiert nun jede gewünschte Farbe statt nur $theme-colorFarben. Siehe #29083 Achtung: color-level() wurde später vorbeigeschmissen v5.0.0-alpha3.

• BrechenUmbenannt in $enable-prefers-reduced-motion-media-queryund $enable-pointer-cursor-for-buttonszu $enable-reduced-motionund $enable-button-pointersder Kürze halber.

• Brechenbg-gradient-variant()Mixin entfernt . Verwenden Sie die Klasse, um anstelle der generierten Klassen .bg-gradientFarbverläufe zu Elementen hinzuzufügen ..bg-gradient-*

• Brechen Zuvor veraltete Mixins entfernt:

  • hover, hover-focus, plain-hover-focus, undhover-focus-active
  • float()
  • form-control-mixin()
  • nav-divider()
  • retina-img()
  • text-hide()(hat auch die zugehörige Utility-Klasse gelöscht, .text-hide)
  • visibility()
  • form-control-focus()

• Brechenscale-color()Funktion in umbenannt shift-color(), um Kollisionen mit der eigenen Farbskalierungsfunktion von Sass zu vermeiden.

• box-shadowMixins erlauben jetzt nullWerte und Drop nonevon mehreren Argumenten. Siehe #30394 .

• Das border-radius()Mixin hat jetzt einen Standardwert.

Farbsystem

• Das Farbsystem, mit dem gearbeitet color-level()wurde $theme-color-interval, wurde zugunsten eines neuen Farbsystems entfernt. Alle lighten()und darken()Funktionen in unserer Codebasis werden durch tint-color()und ersetzt shade-color(). Diese Funktionen mischen die Farbe entweder mit Weiß oder Schwarz, anstatt ihre Helligkeit um einen festen Betrag zu ändern. Der shift-color()wird eine Farbe entweder tönen oder schattieren, je nachdem, ob ihr Gewichtungsparameter positiv oder negativ ist. Siehe #30622 für weitere Details.

• Neue Farbtöne und Schattierungen für jede Farbe hinzugefügt, wodurch neun separate Farben für jede Grundfarbe als neue Sass-Variablen bereitgestellt werden.

• Verbesserter Farbkontrast. Das Farbkontrastverhältnis wurde von 3:1 auf 4,5:1 erhöht und die Farben Blau, Grün, Cyan und Pink aktualisiert, um den WCAG 2.1 AA-Kontrast zu gewährleisten. Außerdem haben wir unsere Farbkontrastfarbe von $gray-900auf geändert $black.

• Zur Unterstützung unseres Farbsystems haben wir neue benutzerdefinierte Funktionen tint-color()und shade-color()Funktionen hinzugefügt, um unsere Farben angemessen zu mischen.

Grid-Updates

• Neuer Haltepunkt! Neuer xxlHaltepunkt für 1400pxund nach oben hinzugefügt. Keine Änderungen an allen anderen Breakpoints.

• Verbesserte Dachrinnen. Dachrinnen werden jetzt in Rems gesetzt und sind schmaler als v4 ( 1.5rem, oder ungefähr 24px, abwärts von 30px). Dadurch werden die Dachrinnen unseres Rastersystems mit unseren Abstandsdienstprogrammen ausgerichtet.

  • Neue Dachrinnenklasse ( .g-*, .gx-*und .gy-*) hinzugefügt, um horizontale/vertikale Dachrinnen, horizontale Dachrinnen und vertikale Dachrinnen zu steuern.
  • BrechenUmbenannt .no-guttersin .g-0, um den neuen Gutter-Utilities zu entsprechen.

• Spalten wurden nicht mehr position: relativeangewendet, daher müssen Sie möglicherweise .position-relativeeinige Elemente hinzufügen, um dieses Verhalten wiederherzustellen.

• BrechenMehrere .order-*Klassen fallen gelassen, die oft ungenutzt blieben. Wir bieten jetzt nur .order-1noch .order-5Out-of-the-Box an.

• BrechenDie .mediaKomponente wurde gelöscht, da sie mit Dienstprogrammen leicht repliziert werden kann. Ein Beispiel finden Sie unter #28265 und auf der Flex-Utilities-Seite .

• Brechen bootstrap-grid.cssgilt jetzt nur noch für box-sizing: border-boxdie Spalte, anstatt die globale Box-Größe zurückzusetzen. Auf diese Weise können unsere Rasterstile an mehr Stellen störungsfrei verwendet werden.

• $enable-grid-classesdeaktiviert nicht mehr die Generierung von Containerklassen. Siehe #29146.

• Das Mixin wurde so aktualisiert make-col, dass es standardmäßig gleiche Spalten ohne eine bestimmte Größe hat.

Inhalt, Neustart usw

• RFS ist jetzt standardmäßig aktiviert. Überschriften, die dasfont-size()Mixin verwenden, passen ihrefont-sizeSkalierung automatisch an das Ansichtsfenster an. Diese Funktion wurde zuvor mit v4 aktiviert.

• BrechenWir haben unsere Anzeigetypografie überarbeitet, um unsere $display-*Variablen und eine $display-font-sizesSass-Karte zu ersetzen. Außerdem wurden die einzelnen $display-*-weightVariablen für ein einzelnes $display-font-weightund angepasstes font-sizes entfernt.

• Zwei neue .display-*Überschriftengrößen hinzugefügt .display-5und .display-6.

• Links werden standardmäßig unterstrichen (nicht nur beim Hover), es sei denn, sie sind Teil bestimmter Komponenten.

• Neu gestaltete Tabellen , um ihre Stile zu aktualisieren und sie mit CSS-Variablen neu zu erstellen, um mehr Kontrolle über den Stil zu haben.

• BrechenVerschachtelte Tabellen erben keine Stile mehr.

• Brechen .thead-lightund .thead-darkentfallen zugunsten der .table-*Variantenklassen, die für alle Tabellenelemente verwendet werden können ( thead, tbody, tfoot, tr, thund td).

• BrechenDas table-row-variant()Mixin wird umbenannt in table-variant()und akzeptiert nur 2 Parameter: $color(Farbname) und $value(Farbcode). Die Rahmenfarbe und die Akzentfarben werden automatisch basierend auf den Tabellenfaktorvariablen berechnet.

• Teilen Sie die Füllvariablen für Tabellenzellen in -yund auf -x.

• BrechenKlasse abgebrochen .pre-scrollable. Siehe #29135

• Brechen .text-*Dienstprogramme fügen Verknüpfungen keine Schwebe- und Fokuszustände mehr hinzu. .link-*Stattdessen können Hilfsklassen verwendet werden. Siehe #29267

• BrechenKlasse abgebrochen .text-justify. Siehe #29793

• Brechen <hr>Elemente verwenden jetzt heightanstelle von , um das Attribut borderbesser zu unterstützen . sizeDies ermöglicht auch die Verwendung von Padding-Hilfsprogrammen, um dickere Trennlinien zu erstellen (z . B. <hr class="py-1">).

• Zurücksetzen der Standard-Horizontalen padding-leftauf <ul>und <ol>Elemente von Browser-Standard 40pxauf 2rem.

• Hinzugefügt $enable-smooth-scroll, das scroll-behavior: smoothglobal gilt – außer für Benutzer, die eine reduzierte Bewegung durch prefers-reduced-motionMedienabfragen anfordern. Siehe #31877

RTL

• Für die horizontale Richtung spezifische Variablen, Dienstprogramme und Mixins wurden alle umbenannt, um logische Eigenschaften zu verwenden, wie sie in Flexbox-Layouts zu finden sind – z. B. startund endanstelle von leftund right.

Formen

• Neue schwebende Formen hinzugefügt! Wir haben das Beispiel für schwebende Beschriftungen zu vollständig unterstützten Formularkomponenten hochgestuft. Sehen Sie sich die neue Seite Floating Labels an.

• Brechen Konsolidierte native und benutzerdefinierte Formularelemente. Kontrollkästchen, Optionsfelder, Auswahlen und andere Eingaben, die in v4 native und benutzerdefinierte Klassen hatten, wurden konsolidiert. Jetzt sind fast alle unsere Formularelemente vollständig benutzerdefiniert, die meisten ohne dass benutzerdefiniertes HTML erforderlich ist.

  • .custom-control.custom-checkboxist jetzt .form-check.
  • .custom-control.custom-custom-radioist jetzt .form-check.
  • .custom-control.custom-switchist jetzt .form-check.form-switch.
  • .custom-selectist jetzt .form-select.
  • .custom-fileund .form-filewurden durch benutzerdefinierte Stile zusätzlich zu .form-control.
  • .custom-rangeist jetzt .form-range.
  • Dropped native .form-control-fileund .form-control-range.

• BrechenGefallen .input-group-appendund .input-group-prepend. Sie können jetzt einfach Schaltflächen und .input-group-textals direkte untergeordnete Elemente der Eingabegruppen hinzufügen.

• Der langjährige Missing Border Radius on Input Group with Validation Feedback Bug wird endlich behoben, indem eine zusätzliche .has-validationKlasse zu Input Groups mit Validation hinzugefügt wird.

• Brechen Entfallene formularspezifische Layoutklassen für unser Rastersystem. Verwenden Sie unser Raster und unsere Dienstprogramme anstelle von .form-group, .form-row, oder .form-inline.

• BrechenFormularetiketten erfordern jetzt .form-label.

• Brechen .form-textsetzt nicht mehr display, sodass Sie Inline- oder Block-Hilfetext nach Belieben erstellen können, indem Sie einfach das HTML-Element ändern.

• Formularsteuerelemente werden heightnach Möglichkeit nicht mehr fest verwendet, sondern min-heightzur Verbesserung der Anpassung und Kompatibilität mit anderen Komponenten verschoben.

• Validierungssymbole werden nicht mehr auf <select>s mit angewendet multiple.

• Sass-Quelldateien unter neu angeordnet scss/forms/, einschließlich Eingabegruppenstile.

Komponenten

• Einheitliche paddingWerte für Warnungen, Breadcrumbs, Karten, Dropdowns, Listengruppen, Modale, Popovers und QuickInfos, die auf unserer $spacerVariablen basieren. Siehe #30564 .

Akkordeon

• Neue Akkordeonkomponente hinzugefügt .

Warnungen

• Warnungen haben jetzt Beispiele mit Symbolen .

• Benutzerdefinierte Stile für <hr>s in jeder Warnung entfernt, da sie bereits verwenden currentColor.

Abzeichen

• BrechenAlle .badge-*Farbklassen für Hintergrund-Utilities entfernt (z. B. .bg-primaryanstelle von verwenden .badge-primary).

• BrechenVerworfen – verwenden Sie stattdessen .badge-pilldas .rounded-pillDienstprogramm.

• BrechenSchwebe- und Fokusstile für <a>und <button>-Elemente entfernt.

• Erhöhte Standardauffüllung für Abzeichen von .25em/ .5embis .35em/ .65em.

Semmelbrösel

• Das standardmäßige Erscheinungsbild von Breadcrumbs wurde vereinfacht, indem padding, background-colorund entfernt wurden border-radius.

• Neue benutzerdefinierte CSS-Eigenschaft --bs-breadcrumb-dividerzur einfachen Anpassung hinzugefügt, ohne dass CSS neu kompiliert werden muss.

Tasten

• Brechen Umschaltflächen mit Kontrollkästchen oder Optionsfeldern erfordern kein JavaScript mehr und haben ein neues Markup. Wir benötigen kein Wrapping-Element mehr, fügen.btn-checkes dem<input>und koppeln es mit beliebigen.btnKlassen auf dem<label>. Siehe #30650 . Die Dokumentation dazu wurde von unserer Buttons-Seite in den neuen Formularbereich verschoben.

• Brechen .btn-blockWegen Dienstprogrammen fallen gelassen. Anstatt .btn-blockauf dem zu verwenden .btn, umschließen Sie Ihre Schaltflächen mit .d-gridund einem .gap-*Dienstprogramm, um sie nach Bedarf zu platzieren. Wechseln Sie zu responsiven Klassen, um noch mehr Kontrolle über sie zu haben. Lesen Sie die Dokumentation für einige Beispiele.

• Unsere button-variant()und button-outline-variant()Mixins wurden aktualisiert, um zusätzliche Parameter zu unterstützen.

• Aktualisierte Schaltflächen, um einen erhöhten Kontrast beim Schweben und im aktiven Zustand zu gewährleisten.

• Deaktivierte Schaltflächen haben jetzt pointer-events: none;.

Karte

• Brechen.card-deckZu Gunsten unseres Rasters fallen gelassen. Wickeln Sie Ihre Karten in Spaltenklassen ein und fügen Sie einen übergeordneten .row-cols-*Container hinzu, um Kartendecks neu zu erstellen (aber mit mehr Kontrolle über die reaktionsschnelle Ausrichtung).

• BrechenGefallen .card-columnszugunsten der Freimaurerei. Siehe #28922 .

• BrechenDas .cardbasierte Akkordeon wurde durch eine neue Akkordeonkomponente ersetzt .

Karussell

• Neue .carousel-darkVariante für dunklen Text, Bedienelemente und Anzeigen hinzugefügt (ideal für hellere Hintergründe).

• Ersetzte Chevron-Symbole für Karussellsteuerungen durch neue SVGs von Bootstrap Icons .

Schließen-Schaltfläche

• BrechenUmbenannt .closein .btn-closefür einen weniger generischen Namen.

• Schließen-Schaltflächen verwenden jetzt ein background-image(eingebettetes SVG) anstelle eines ×im HTML, was eine einfachere Anpassung ermöglicht, ohne dass Sie Ihr Markup ändern müssen.

• Neue .btn-close-whiteVariante hinzugefügt, die verwendet wird filter: invert(1), um Symbole mit höherem Kontrast vor dunkleren Hintergründen zu schließen.

Zusammenbruch

• Scrollverankerung für Akkordeons entfernt.

Dropdowns

• Neue .dropdown-menu-darkVariante und zugehörige Variablen für On-Demand-Dunkel-Dropdowns hinzugefügt.

• Neue Variable für hinzugefügt $dropdown-padding-x.

• Der Dropdown-Teiler wurde abgedunkelt, um den Kontrast zu verbessern.

• BrechenAlle Ereignisse für das Dropdown werden jetzt auf der Dropdown-Umschaltfläche ausgelöst und dann zum übergeordneten Element hochgesprudelt.

• Dropdown-Menüs haben jetzt ein data-bs-popper="static"Attribut festgelegt, wenn die Positionierung des Dropdown-Menüs statisch ist oder sich das Dropdown-Menü in der Navigationsleiste befindet. Dies wird von unserem JavaScript hinzugefügt und hilft uns, benutzerdefinierte Positionsstile zu verwenden, ohne die Positionierung von Popper zu beeinträchtigen.

• BrechenDrop flip-down-Option für das Dropdown-Plugin zugunsten der nativen Popper-Konfiguration. Sie können das Flipping-Verhalten jetzt deaktivieren, indem Sie ein leeres Array für die fallbackPlacementsOption im Flip - Modifikator übergeben.

• Dropdown-Menüs können jetzt mit einer neuen autoCloseOption zum Behandeln des automatischen Schließen-Verhaltens angeklickt werden . Sie können diese Option verwenden, um den Klick innerhalb oder außerhalb des Dropdown-Menüs zu akzeptieren, um es interaktiv zu machen.

• Dropdowns unterstützen jetzt .dropdown-itemin s eingeschlossene <li>s.

Jumbotron

• BrechenDie Jumbotron-Komponente wurde fallen gelassen, da sie mit Dienstprogrammen repliziert werden kann. Sehen Sie sich unser neues Jumbotron-Beispiel für eine Demo an.

Gruppe auflisten

• Neuer .list-group-numberedModifikator zum Auflisten von Gruppen hinzugefügt.

Navis und Tabs

• Neue nullVariablen für font-size, font-weight, colorund :hover colorzur .nav-linkKlasse hinzugefügt.

Navigationsleisten

• BrechenNavbars erfordern jetzt einen Container innerhalb (um die Abstandsanforderungen und das erforderliche CSS drastisch zu vereinfachen).
• BrechenDie .activeKlasse kann nicht mehr auf .nav-items angewendet werden, sie muss direkt auf .nav-links angewendet werden.

Leinwand

• Die neue Offcanvas-Komponente wurde hinzugefügt .

Seitennummerierung

• Paginierungslinks sind jetzt anpassbar margin-left, die an allen Ecken dynamisch abgerundet werden, wenn sie voneinander getrennt werden.

• transitions zu Paginierungslinks hinzugefügt .

Popovers

• BrechenIn unserer Standard-Popover-Vorlage umbenannt .arrowin ..popover-arrow

• whiteListOption umbenannt in allowList.

Spinner

• Spinner ehren jetzt prefers-reduced-motion: reduce, indem sie Animationen verlangsamen. Siehe #31882 .

• Verbesserte vertikale Ausrichtung des Spinners.

Toast

• Toasts können jetzt mithilfe von Positionierungsdienstprogrammen in einem positioniert werden ..toast-container

• Standard-Toastdauer auf 5 Sekunden geändert.

• Aus Toasts entfernt overflow: hiddenund durch richtige border-radiuss mit calc()Funktionen ersetzt.

Kurzinfos

• BrechenIn unserer Standard-Tooltip-Vorlage umbenannt .arrowin ..tooltip-arrow

• BrechenDer Standardwert für wurde zur besseren Platzierung von Popper-Elementen fallbackPlacementsin geändert .['top', 'right', 'bottom', 'left']

• BrechenwhiteListOption umbenannt in allowList.

Dienstprogramme

• BrechenMehrere Dienstprogramme wurden umbenannt, um logische Eigenschaftsnamen anstelle von Richtungsnamen mit zusätzlicher RTL-Unterstützung zu verwenden:

  • Umbenannt in .left-*und .right-*in .start-*und .end-*.
  • Umbenannt in .float-leftund .float-rightin .float-startund .float-end.
  • Umbenannt in .border-leftund .border-rightin .border-startund .border-end.
  • Umbenannt in .rounded-leftund .rounded-rightin .rounded-startund .rounded-end.
  • Umbenannt in .ml-*und .mr-*in .ms-*und .me-*.
  • Umbenannt in .pl-*und .pr-*in .ps-*und .pe-*.
  • Umbenannt in .text-leftund .text-rightin .text-startund .text-end.

• BrechenNegative Ränder standardmäßig deaktiviert.

• Neue Klasse hinzugefügt , um den Hintergrund von .bg-bodyschnell auf zusätzliche Elemente festzulegen.<body>

• Neue Positionsdienstprogramme für top, right, bottomund hinzugefügt left. Zu den Werten gehören 0, 50%, und 100%für jede Eigenschaft.

• Neue .translate-middle-x& .translate-middle-yDienstprogramme hinzugefügt, um absolut/fest positionierte Elemente horizontal oder vertikal zu zentrieren.

• Neue border-widthDienstprogramme hinzugefügt .

• BrechenUmbenannt .text-monospacein .font-monospace.

• BrechenEntfernt .text-hide, da es sich um eine veraltete Methode zum Ausblenden von Text handelt, der nicht mehr verwendet werden sollte.

• .fs-*Dienstprogramme für Dienstprogramme hinzugefügt font-size(mit aktiviertem RFS). Diese verwenden denselben Maßstab wie die Standardüberschriften von HTML (1-6, groß bis klein) und können über die Sass-Karte geändert werden.

• Brechen.font-weight-*Dienstprogramme .fw-*wegen Kürze und Konsistenz umbenannt .

• Brechen.font-style-*Dienstprogramme .fst-*wegen Kürze und Konsistenz umbenannt .

• Hinzugefügt .d-grid, um Dienstprogramme und neue gapDienstprogramme ( .gap) für CSS-Raster- und Flexbox-Layouts anzuzeigen.

• BrechenEntfernt .rounded-smund rounded-lgund führte eine neue Klassenskala ein, .rounded-0bis .rounded-3. Siehe #31687 .

• Neue line-heightDienstprogramme hinzugefügt: .lh-1, .lh-sm, .lh-baseund .lh-lg. Siehe hier .

• .d-noneDas Dienstprogramm wurde in unser CSS verschoben, um ihm gegenüber anderen Anzeigedienstprogrammen mehr Gewicht zu verleihen .

• .visually-hidden-focusableDer Helfer wurde erweitert , sodass er auch mit Containern funktioniert, indem er :focus-within.

Helfer

• Brechen Responsive Einbettungshelfer wurden in Ratio-Helfer mit neuen Klassennamen und verbessertem Verhalten sowie einer hilfreichen CSS-Variablen umbenannt.

  • Klassen wurden umbenannt, um das Seitenverhältnis zu byändern x. Zum Beispiel .ratio-16by9ist jetzt .ratio-16x9.
  • Wir haben den .embed-responsive-itemElementgruppenselektor und zugunsten eines einfacheren .ratio > *Selektors fallen gelassen. Es wird keine Klasse mehr benötigt, und der Verhältnishelfer funktioniert jetzt mit jedem HTML-Element.
  • Die $embed-responsive-aspect-ratiosSass-Map wurde umbenannt in $aspect-ratiosund ihre Werte wurden vereinfacht, um den Klassennamen und den Prozentsatz als key: valuePaar einzuschließen.
  • CSS-Variablen werden jetzt generiert und für jeden Wert in der Sass-Karte eingefügt. Ändern Sie die --bs-aspect-ratioVariable auf .ratio, um ein beliebiges benutzerdefiniertes Seitenverhältnis zu erstellen .

• Brechen „Screenreader“-Klassen sind jetzt „visuell verborgene“ Klassen .

  • Die Sass-Datei wurde von scss/helpers/_screenreaders.scssin geändertscss/helpers/_visually-hidden.scss
  • Umbenannt in .sr-onlyund _.sr-only-focusable.visually-hidden.visually-hidden-focusable
  • Umbenannt sr-only()und sr-only-focusable()Mixins zu visually-hidden()und visually-hidden-focusable().

• bootstrap-utilities.cssumfasst nun auch unsere Helfer. Helfer müssen nicht mehr in benutzerdefinierte Builds importiert werden.

JavaScript

• jQuery-Abhängigkeit fallen gelassen und Plugins umgeschrieben, um in regulärem JavaScript zu sein.

• BrechenDatenattribute für alle JavaScript-Plug-ins sind jetzt benannt, um die Bootstrap-Funktionalität von Drittanbietern und Ihrem eigenen Code unterscheiden zu können. Zum Beispiel verwenden wir data-bs-toggleanstelle von data-toggle.

• Alle Plugins können jetzt einen CSS-Selektor als erstes Argument akzeptieren. Sie können entweder ein DOM-Element oder einen beliebigen gültigen CSS-Selektor übergeben, um eine neue Instanz des Plugins zu erstellen:

  const modal = new bootstrap.Modal('#myModal')
  const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
  

• popperConfigkann als Funktion übergeben werden, die die Standard-Popper-Konfiguration von Bootstrap als Argument akzeptiert, sodass Sie diese Standardkonfiguration auf Ihre Weise zusammenführen können. Gilt für Dropdowns, Popovers und QuickInfos.

• Der Standardwert für wurde zur besseren Platzierung von Popper-Elementen fallbackPlacementsin geändert . Gilt für Dropdowns, Popovers und QuickInfos.['top', 'right', 'bottom', 'left']

• Unterstrich aus öffentlichen statischen Methoden wie _getInstance()→ entfernt getInstance().