Zum Hauptinhalt springen Zur Dokumentennavigation springen
in English

Migration auf v5

Verfolgen und überprüfen Sie Änderungen an den Bootstrap-Quelldateien, der Dokumentation und den Komponenten, um Sie bei der Migration von v4 zu v5 zu unterstützen.

Auf dieser Seite

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.
  • In ähnlicher Weise 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-checkist jetzt .form-check.
    • .custom-check.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.

  • 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

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.

  • 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 .

  • 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 &times;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.

  • 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 gesetzt, wenn die Positionierung des Dropdown-Menüs statisch ist und data-bs-popper="none"wenn 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

Gruppe auflisten

  • Neue nullVariablen für font-size, font-weight, colorund :hover colorzur .nav-linkKlasse hinzugefügt.
  • BrechenNavbars erfordern jetzt einen Container innerhalb (um die Abstandsanforderungen und das erforderliche CSS drastisch zu vereinfachen).

Leinwand

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:

    var modal = new bootstrap.Modal('#myModal')
var 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().