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.
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 . -
Brechen
color-yiq()
Funktion und zugehörige Variablen in umbenannt ,color-contrast()
da sie nicht mehr mit dem YIQ-Farbraum zusammenhängen. Siehe #30168.$yiq-contrasted-threshold
wird umbenannt in$min-contrast-ratio
.$yiq-text-dark
und$yiq-text-light
werden jeweils in$color-contrast-dark
und 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 vonmedia-breakpoint-down(md)
Zielansichtsfenstern kleiner alslg
).- 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 vonmedia-breakpoint-between(sm, md)
Zielansichtsfenstern zwischensm
undlg
).
-
BrechenDruckstile und
$enable-print-styles
Variable entfernt. Print-Display-Klassen gibt es immer noch. Siehe #28339 . -
BrechenDie Funktionen
color()
,theme-color()
, undgray()
wurden zugunsten von Variablen weggelassen. Siehe #29083 . -
Brechen
theme-color-level()
Funktion umbenannt incolor-level()
und akzeptiert nun jede gewünschte Farbe statt nur$theme-color
Farben. Siehe #29083 Achtung:color-level()
wurde später vorbeigeschmissenv5.0.0-alpha3
. -
BrechenUmbenannt in
$enable-prefers-reduced-motion-media-query
und$enable-pointer-cursor-for-buttons
zu$enable-reduced-motion
und$enable-button-pointers
der Kürze halber. -
Brechen
bg-gradient-variant()
Mixin entfernt . Verwenden Sie die Klasse, um anstelle der generierten Klassen.bg-gradient
Farbverlä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()
-
Brechen
scale-color()
Funktion in umbenanntshift-color()
, um Kollisionen mit der eigenen Farbskalierungsfunktion von Sass zu vermeiden. -
box-shadow
Mixins erlauben jetztnull
Werte und Dropnone
von 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. Allelighten()
unddarken()
Funktionen in unserer Codebasis werden durchtint-color()
und ersetztshade-color()
. Diese Funktionen mischen die Farbe entweder mit Weiß oder Schwarz, anstatt ihre Helligkeit um einen festen Betrag zu ändern. Dershift-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-900
auf geändert$black
. -
Zur Unterstützung unseres Farbsystems haben wir neue benutzerdefinierte Funktionen
tint-color()
undshade-color()
Funktionen hinzugefügt, um unsere Farben angemessen zu mischen.
Grid-Updates
-
Neuer Haltepunkt! Neuer
xxl
Haltepunkt für1400px
und 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ähr24px
, abwärts von30px
). 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-gutters
in.g-0
, um den neuen Gutter-Utilities zu entsprechen.
- Neue Dachrinnenklasse (
-
Spalten wurden nicht mehr
position: relative
angewendet, daher müssen Sie möglicherweise.position-relative
einige Elemente hinzufügen, um dieses Verhalten wiederherzustellen. -
BrechenMehrere
.order-*
Klassen fallen gelassen, die oft ungenutzt blieben. Wir bieten jetzt nur.order-1
noch.order-5
Out-of-the-Box an. -
BrechenDie
.media
Komponente 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.css
gilt jetzt nur noch fürbox-sizing: border-box
die 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-classes
deaktiviert 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 das
font-size()
Mixin verwenden, passen ihrefont-size
Skalierung 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-sizes
Sass-Karte zu ersetzen. Außerdem wurden die einzelnen$display-*-weight
Variablen für ein einzelnes$display-font-weight
und angepasstesfont-size
s entfernt. -
Zwei neue
.display-*
Überschriftengrößen hinzugefügt.display-5
und.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-light
und.thead-dark
entfallen zugunsten der.table-*
Variantenklassen, die für alle Tabellenelemente verwendet werden können (thead
,tbody
,tfoot
,tr
,th
undtd
). -
BrechenDas
table-row-variant()
Mixin wird umbenannt intable-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
-y
und 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 -
Zurücksetzen der Standard-Horizontalen
padding-left
auf<ul>
und<ol>
Elemente von Browser-Standard40px
auf2rem
. -
Hinzugefügt
$enable-smooth-scroll
, dasscroll-behavior: smooth
global gilt – außer für Benutzer, die eine reduzierte Bewegung durchprefers-reduced-motion
Medienabfragen 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.
start
undend
anstelle vonleft
undright
.
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-check
ist jetzt.form-check
..custom-check.custom-switch
ist jetzt.form-check.form-switch
..custom-select
ist jetzt.form-select
..custom-file
und.form-file
wurden durch benutzerdefinierte Stile zusätzlich zu.form-control
..custom-range
ist jetzt.form-range
.- Dropped native
.form-control-file
und.form-control-range
.
-
BrechenGefallen
.input-group-append
und.input-group-prepend
. Sie können jetzt einfach Schaltflächen und.input-group-text
als 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-validation
Klasse 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-text
setzt nicht mehrdisplay
, 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 angewendetmultiple
. -
Sass-Quelldateien unter neu angeordnet
scss/forms/
, einschließlich Eingabegruppenstile.
Komponenten
- Einheitliche
padding
Werte für Warnungen, Breadcrumbs, Karten, Dropdowns, Listengruppen, Modale, Popovers und QuickInfos, die auf unserer$spacer
Variablen 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 verwendencurrentColor
.
Abzeichen
-
BrechenAlle
.badge-*
Farbklassen für Hintergrund-Utilities entfernt (z. B..bg-primary
anstelle von verwenden.badge-primary
). -
BrechenVerworfen – verwenden Sie stattdessen
.badge-pill
das.rounded-pill
Dienstprogramm. -
BrechenSchwebe- und Fokusstile für
<a>
und<button>
-Elemente entfernt. -
Erhöhte Standardauffüllung für Abzeichen von
.25em
/.5em
bis.35em
/.65em
.
Semmelbrösel
-
Das standardmäßige Erscheinungsbild von Breadcrumbs wurde vereinfacht, indem
padding
,background-color
und entfernt wurdenborder-radius
. -
Neue benutzerdefinierte CSS-Eigenschaft
--bs-breadcrumb-divider
zur 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-check
es dem<input>
und koppeln es mit beliebigen.btn
Klassen auf dem<label>
. Siehe #30650 . Die Dokumentation dazu wurde von unserer Buttons-Seite in den neuen Formularbereich verschoben. -
Brechen
.btn-block
Wegen Dienstprogrammen fallen gelassen. Anstatt.btn-block
auf dem zu verwenden.btn
, umschließen Sie Ihre Schaltflächen mit.d-grid
und 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()
undbutton-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-deck
Zu 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-columns
zugunsten der Freimaurerei. Siehe #28922 . -
BrechenDas
.card
basierte Akkordeon wurde durch eine neue Akkordeonkomponente ersetzt .
Karussell
-
Neue
.carousel-dark
Variante 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
.close
in.btn-close
fü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-white
Variante hinzugefügt, die verwendet wirdfilter: 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-dark
Variante 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 unddata-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 diefallbackPlacements
Option im Flip - Modifikator übergeben. -
Dropdown-Menüs können jetzt mit einer neuen
autoClose
Option 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-item
in 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-numbered
Modifikator zum Auflisten von Gruppen hinzugefügt.
Navis und Tabs
- Neue
null
Variablen fürfont-size
,font-weight
,color
und:hover
color
zur.nav-link
Klasse hinzugefügt.
Navigationsleisten
- BrechenNavbars erfordern jetzt einen Container innerhalb (um die Abstandsanforderungen und das erforderliche CSS drastisch zu vereinfachen).
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. -
transition
s zu Paginierungslinks hinzugefügt .
Popovers
-
BrechenIn unserer Standard-Popover-Vorlage umbenannt
.arrow
in ..popover-arrow
-
whiteList
Option umbenannt inallowList
.
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: hidden
und durch richtigeborder-radius
s mitcalc()
Funktionen ersetzt.
Kurzinfos
-
BrechenIn unserer Standard-Tooltip-Vorlage umbenannt
.arrow
in ..tooltip-arrow
-
BrechenDer Standardwert für wurde zur besseren Platzierung von Popper-Elementen
fallbackPlacements
in geändert .['top', 'right', 'bottom', 'left']
-
Brechen
whiteList
Option umbenannt inallowList
.
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-left
und.float-right
in.float-start
und.float-end
. - Umbenannt in
.border-left
und.border-right
in.border-start
und.border-end
. - Umbenannt in
.rounded-left
und.rounded-right
in.rounded-start
und.rounded-end
. - Umbenannt in
.ml-*
und.mr-*
in.ms-*
und.me-*
. - Umbenannt in
.pl-*
und.pr-*
in.ps-*
und.pe-*
. - Umbenannt in
.text-left
und.text-right
in.text-start
und.text-end
.
- Umbenannt in
-
BrechenNegative Ränder standardmäßig deaktiviert.
-
Neue Klasse hinzugefügt , um den Hintergrund von
.bg-body
schnell auf zusätzliche Elemente festzulegen.<body>
-
Neue Positionsdienstprogramme für
top
,right
,bottom
und hinzugefügtleft
. Zu den Werten gehören0
,50%
, und100%
für jede Eigenschaft. -
Neue
.translate-middle-x
&.translate-middle-y
Dienstprogramme hinzugefügt, um absolut/fest positionierte Elemente horizontal oder vertikal zu zentrieren. -
Neue
border-width
Dienstprogramme hinzugefügt . -
BrechenUmbenannt
.text-monospace
in.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ügtfont-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 neuegap
Dienstprogramme (.gap
) für CSS-Raster- und Flexbox-Layouts anzuzeigen. -
BrechenEntfernt
.rounded-sm
undrounded-lg
und führte eine neue Klassenskala ein,.rounded-0
bis.rounded-3
. Siehe #31687 . -
Neue
line-height
Dienstprogramme hinzugefügt:.lh-1
,.lh-sm
,.lh-base
und.lh-lg
. Siehe hier . -
.d-none
Das Dienstprogramm wurde in unser CSS verschoben, um ihm gegenüber anderen Anzeigedienstprogrammen mehr Gewicht zu verleihen . -
.visually-hidden-focusable
Der 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
ändernx
. Zum Beispiel.ratio-16by9
ist jetzt.ratio-16x9
. - Wir haben den
.embed-responsive-item
Elementgruppenselektor 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-ratios
Sass-Map wurde umbenannt in$aspect-ratios
und ihre Werte wurden vereinfacht, um den Klassennamen und den Prozentsatz alskey: value
Paar einzuschließen. - CSS-Variablen werden jetzt generiert und für jeden Wert in der Sass-Karte eingefügt. Ändern Sie die
--bs-aspect-ratio
Variable auf.ratio
, um ein beliebiges benutzerdefiniertes Seitenverhältnis zu erstellen .
- Klassen wurden umbenannt, um das Seitenverhältnis zu
-
Brechen „Screenreader“-Klassen sind jetzt „visuell verborgene“ Klassen .
- Die Sass-Datei wurde von
scss/helpers/_screenreaders.scss
in geändertscss/helpers/_visually-hidden.scss
- Umbenannt in
.sr-only
und _.sr-only-focusable
.visually-hidden
.visually-hidden-focusable
- Umbenannt
sr-only()
undsr-only-focusable()
Mixins zuvisually-hidden()
undvisually-hidden-focusable()
.
- Die Sass-Datei wurde von
-
bootstrap-utilities.css
umfasst 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-toggle
anstelle vondata-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"]')
-
popperConfig
kann 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
fallbackPlacements
in geändert . Gilt für Dropdowns, Popovers und QuickInfos.['top', 'right', 'bottom', 'left']
-
Unterstrich aus öffentlichen statischen Methoden wie
_getInstance()
→ entferntgetInstance()
.