Migratioun op v5

Verfollegt an iwwerpréift Ännerungen un de Bootstrap Quelldateien, Dokumentatioun a Komponenten fir Iech ze hëllefen vu v4 op v5 ze migréieren.

Op dëser Säit

v5.2.0

Erfrëscht Design

Bootstrap v5.2.0 Fonctiounen engem subtile Design Update fir eng Handvoll Komponente an Eegeschafte ganze Projet, virun allem duerch raffinéiert border-radiusWäerter op Knäppercher a Form Kontrollen . Eis Dokumentatioun ass och aktualiséiert ginn mat enger neier Homepage, méi einfachen Dokumenter Layout deen net méi Sektioune vun der Sidebar zesummeklappt, a méi prominent Beispiller vu Bootstrap Icons .

Méi CSS Verännerlechen

Mir hunn all eis Komponenten aktualiséiert fir CSS Variablen ze benotzen. Wärend Sass nach ëmmer alles ënnersträicht, gouf all Komponent aktualiséiert fir CSS Variablen op de Komponentbasisklassen (zB, .btn) ze enthalen, wat méi Echtzäit Personnalisatioun vu Bootstrap erlaabt. A spéider Verëffentlechunge wäerte mir weider eis Benotzung vun CSS Variablen an eise Layout, Formen, Helper an Utilities ausbauen. Liest méi iwwer CSS Variablen an all Komponent op hir jeweileg Dokumentatiounssäiten.

Eis CSS Variabel Notzung wäert e bëssen onkomplett sinn bis Bootstrap 6. Wärend mir dës gäre ganz iwwerall ëmsetzen, lafen se de Risiko fir briechen Ännerungen ze verursaachen. Zum Beispill, Astellung $alert-border-width: var(--bs-border-width)an eisem Quellcode brécht potenziell Sass an Ärem eegene Code wann Dir aus $alert-border-width * 2irgendege Grënn maacht.

Als esou, wa méiglech, wäerte mir weider op méi CSS Variablen drécken, awer erkennen w.e.g. datt eis Implementatioun liicht limitéiert ass a v5.

Nei`_maps.scss`

Bootstrap v5.2.0 huet eng nei Sass Datei mat _maps.scss. Et zitt e puer Sass Kaarten aus _variables.scssfir en Thema ze fixéieren wou Updates op eng originell Kaart net op sekundär Kaarten applizéiert goufen déi se verlängeren. Zum Beispill, Aktualiséierunge fir $theme-colorsgoufen net op aner Themekaarten applizéiert, déi op $theme-colorsofhängeg sinn, Schlëssel Personnalisatioun Workflows briechen. Kuerz gesot, Sass huet eng Begrenzung wou eemol eng Standardvariabel oder Kaart benotzt gouf, kann se net aktualiséiert ginn. Et gëtt en ähnlechen Defizit mat CSS Variablen wa se benotzt gi fir aner CSS Variablen ze komponéieren.

Dofir mussen variabel Personnalisatiounen am Bootstrap no kommen @import "functions", awer virun @import "variables"an de Rescht vun eisem Importstack. Datselwecht gëllt fir Sass Kaarten - Dir musst d'Defaults iwwerschreiden ier se benotzt ginn. Déi folgend Kaarte goufen op déi nei geplënnert _maps.scss:

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

Är personaliséiert Bootstrap CSS Builds sollten elo sou eppes ausgesinn mat engem getrennten Kaartenimport.

  // 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

Nei Utilities

Erweidert font-weightUtilities.fw-semibold fir semibold Schrëften ze enthalen .
Erweidert border-radiusUtilities fir zwou nei Gréissten ze enthalen, .rounded-4an .rounded-5, fir méi Optiounen.

Zousätzlech Ännerungen

Nei $enable-container-classesOptioun agefouert. - Elo wann Dir op den experimentellen CSS Grid Layout entscheet, ginn d' .container-*Klassen nach ëmmer kompiléiert, ausser dës Optioun ass op gesat false. Container behalen och elo hir Guttwäerter.
Offcanvas Komponent huet elo reaktiounsfäeger Variatiounen . Déi ursprénglech .offcanvasKlass bleift onverännert - et verstoppt Inhalt iwwer all Viewports. Fir et reaktiounsfäeger ze maachen, ännert dës .offcanvasKlass an all .offcanvas-{sm|md|lg|xl|xxl}Klass.
Décke Dëschdeeler sinn elo opt-in. — Mir hunn déi méi déck a méi schwéier ze iwwerschreiden Grenz tëscht Dëschgruppen ewechgeholl an se an eng fakultativ Klass geplënnert, déi Dir benotze kënnt .table-group-divider,. Kuckt d'Tabelldokumenter fir e Beispill.
Scrollspy gouf nei geschriwwe fir d'Intersection Observer API ze benotzen , dat heescht datt Dir net méi relativ Elterendeel Wrapper brauch, deprecéiertoffsetConfiguratioun a méi. Kuckt fir Är Scrollspy Implementatiounen fir méi präzis a konsequent an hirer Nav Highlight ze sinn.
Popovers an Tooltips benotzen elo CSS Variablen. E puer CSS Variablen goufen vun hire Sass Géigeparteien aktualiséiert fir d'Zuel vun de Variablen ze reduzéieren. Als Resultat sinn dräi Variabelen an dëser Verëffentlechung ofgeschaaft ginn: $popover-arrow-color, $popover-arrow-outer-color, an $tooltip-arrow-color.
Nei .text-bg-{color}Helfer dobäigesat. Amplaz individuell .text-*an .bg-*Utilities ze setzen, kënnt Dir elo d' .text-bg-*Helfer benotze fir e background-colormat contrastesche Virdergrond ze setzen color.
Modifikateur bäigefüügt .form-check-reversefir d'Uerdnung vun den Etiketten an assoziéiert Checkboxen / Radios ëmzedréinen.
Dobäi gesträifte Sailen Ënnerstëtzung fir Dëscher iwwer déi nei .table-striped-columnsKlass.

Fir eng komplett Lëscht vun Ännerungen, kuckt de v5.2.0 Projet op GitHub .

v5.1.0

Zousätzlech experimentell Ënnerstëtzung fir CSS Grid Layout . - Dëst ass eng Aarbecht amgaang, an ass nach net prett fir d'Produktioun ze benotzen, awer Dir kënnt Iech op déi nei Feature iwwer Sass entscheeden. Fir et z'aktivéieren, deaktivéiert d'Standardgitter, andeems Dir $enable-grid-classes: falsed'CSS Grid setzt an aktivéiert andeems Dir $enable-cssgrid: true.
Aktualiséiert Navbars fir Offcanvas z'ënnerstëtzen. - Füügt Offcanvas Tiräng an all Navbar mat de reaktiounsfäeger .navbar-expand-*Klassen an e puer Offcanvas Markup.
Neie Plazhalterkomponent dobäigesat . - Eis neiste Komponent, e Wee fir temporär Spären amplaz vum realen Inhalt ze bidden fir ze weisen datt eppes nach ëmmer op Ärem Site oder App gelueden ass.
Zesummebroch Plugin ënnerstëtzt elo horizontal Zesummebroch . — Add .collapse-horizontalto your .collapseto collapse the widthamplaz vun der height. Vermeit de Browser nei ze molen andeems Dir en min-heightoder setzt height.
Neie Stack a vertikale Regelhëllef bäigefüügt. - Gëlle séier verschidde Flexbox Eegeschafte fir séier personaliséiert Layouten mat Stacks ze kreéieren . Wielt aus horizontalen ( .hstack) a vertikalen ( .vstack) Stacks. Füügt vertikal Dividere ähnlech wéi <hr>Elementer mat den neien .vrHelfer .
Nei global :rootCSS Verännerlechen dobäigesat. - Verschidde nei CSS Variablen op den :rootNiveau bäigefüügt fir <body>Stiler ze kontrolléieren. Méi sinn an de Wierker, och iwwer eis Utilities a Komponenten, awer fir elo liesen CSS Variablen an der Customize Sektioun .
Iwwerhaapt Faarf an Hannergrond Utilities fir CSS Variablen ze benotzen, an nei Text Opazitéit an Hannergrond Opazitéit Utilities bäigefüügt. - .text-* an .bg-*Utilities ginn elo mat CSS Variablen a rgba()Faarfwäerter gebaut, wat Iech erlaabt Iech all Utility mat neien Opazitéit Utilities einfach ze personaliséieren.
Nei Snipp Beispiller bäigefüügt fir ze weisen wéi een eis Komponenten personaliséiere kann. - Pull prett fir personaliséiert Komponenten an aner gemeinsam Designmuster mat eisen neie Snippets Beispiller ze benotzen . Ëmfaasst Fousszeilen , Dropdowns , Lëschtgruppen a Modaler .
Onbenotzt Positionéierungsstiler aus Popovers an Tooltips ewechgeholl well dës nëmme vu Popper gehandhabt ginn. $tooltip-margingouf ofgeschaaft an nullam Prozess gesat.

Wëllt Dir méi Informatiounen? Liest de v5.1.0 Blog Post.

Moien! Ännerungen un eiser éischter grousser Verëffentlechung vu Bootstrap 5, v5.0.0, ginn hei ënnen dokumentéiert. Si reflektéieren net déi zousätzlech Ännerungen hei uewen gewisen.

Ofhängegkeeten

JQuery erofgefall.
Upgrade vu Popper v1.x op Popper v2.x.
Ersat de Libsass duerch Dart Sass well eise Sass Compiler deen de Libsass ofgeschaaft gouf.
Migréiert vu Jekyll op Hugo fir eis Dokumentatioun ze bauen

Browser Ënnerstëtzung

Internet Explorer 10 an 11 erofgelooss
Microsoft Edge <16 erofgaang (Legacy Edge)
Firefox <60 erofgefall
Safari erofgefall < 12
iOS Safari erofgefall < 12
Chrome erofgaang < 60

Dokumentatioun Ännerungen

Redesignéiert Homepage, Dokumenter Layout, a Fousszeil.
Neie Pak Guide dobäigesat .
Nei Customize Sektioun bäigefüügt , ersetzt v4's Theming Säit , mat neien Detailer iwwer Sass, global Konfiguratiounsoptiounen, Faarfschemaen, CSS Variablen, a méi.
Reorganiséiert all Form Dokumentatioun an nei Forms Sektioun , zerbriechen den Inhalt a méi fokusséiert Säiten.
Ähnlech huet d'Layout Sektioun aktualiséiert , fir de Rasterinhalt méi kloer auszeschaffen.
Ëmbenannt "Navs" Komponent Säit op "Navs & Tabs".
Ëmbenannt "Checks" Säit op "Checks & Radios".
D'Navbar nei designt an en neien Subnav bäigefüügt fir et méi einfach ze maachen ronderëm eis Siten an Dokumenter Versiounen ze kommen.
Nei Tastatur Ofkiirzung fir d'Sichfeld dobäigesat Ctrl + /:.

Sass

Mir hunn d'Standard Sass Kaart fusionéiert fir et méi einfach ze maachen redundante Wäerter ze läschen. Denkt drun datt Dir elo all Wäerter an de Sass Kaarten definéiere musst wéi $theme-colors. Kuckt wéi Dir mat Sass Kaarten ëmgeet .
OfbriechenËmbenannt color-yiq()Funktioun a verwandte Variablen, color-contrast()well et net méi mam YIQ Faarfraum verbonnen ass. Kuckt #30168.
- $yiq-contrasted-thresholdgëtt ëmbenannt op $min-contrast-ratio.
- $yiq-text-darka $yiq-text-lightsinn respektiv ëmbenannt an $color-contrast-darkan $color-contrast-light.
OfbriechenMedia Query Mixins Parameteren hu geännert fir eng méi logesch Approche.
- media-breakpoint-down()benotzt den Breakpoint selwer amplaz vum nächsten Breakpoint (zB media-breakpoint-down(lg)amplaz media-breakpoint-down(md)Zielen Viewports méi kleng wéi lg).
- Ähnlech benotzt den zweete Parameter an media-breakpoint-between()och den Breakpoint selwer amplaz vum nächsten Breakpoint (zB media-between(sm, lg)amplaz media-breakpoint-between(sm, md)Zielen Viewports tëscht sman lg).
OfbriechenGeläscht Drécken Stiler a $enable-print-stylesVariabel. Drécken Affichage Klassen sinn nach ronderëm. Kuckt #28339 .
OfbriechenGefall color(), theme-color(), a gray()Funktiounen zugonschte vun Verännerlechen. Kuckt #29083 .
OfbriechenUmbenannt theme-color-level()Funktioun color-level()an akzeptéiert elo all Faarf Dir wëllt amplaz nëmmen $theme-colorFaarwen. Kuckt # 29083 Opgepasst: color-level() gouf méi spéit erofgelooss v5.0.0-alpha3.
OfbriechenUmbenannt $enable-prefers-reduced-motion-media-queryan $enable-pointer-cursor-for-buttonszu $enable-reduced-motiona $enable-button-pointersfir kuerz.
OfbriechenD'Mëschung bg-gradient-variant()ewechgeholl. Benotzt d' .bg-gradientKlass fir Gradienten un Elementer ze addéieren anstatt déi generéiert .bg-gradient-*Klassen.
Ofbriechen Ewechzehuelen virdru ofgeschaaft Mixins:
- hover, hover-focus, plain-hover-focusanhover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(och déi assoziéiert Utility-Klass erofgelooss, .text-hide)
- visibility()
- form-control-focus()
OfbriechenËmbenannt scale-color()Funktioun shift-color()fir Kollisioun mat Sass senger eegener Faarf Skala Funktioun ze vermeiden.
box-shadowmixins erlaben elo nullWäerter a falen noneaus méi Argumenter. Kuckt #30394 .
De border-radius()Mixin huet elo e Standardwäert.

Faarf System

De Faarfsystem, dee mat geschafft color-level()a $theme-color-intervalgeläscht gouf zugonschte vun engem neie Faarfsystem. All lighten()a darken()Funktiounen an eiser Codebase ginn duerch tint-color()an ersat shade-color(). Dës Funktiounen vermëschen d'Faarf entweder mat wäiss oder schwaarz anstatt seng Liichtegkeet mat engem fixen Betrag z'änneren. D' shift-color()Faarf gëtt entweder Tint oder Schatten eng Faarf ofhängeg ob säi Gewiichtsparameter positiv oder negativ ass. Gesinn # 30622 fir méi Detailer.
Nei Faarwen a Schatten bäigefüügt fir all Faarf, déi néng separat Faarwen fir all Basisfaarf ubidden, als nei Sass Variablen.
Verbesserte Faarfkontrast. Bumped Faarfkontrastverhältnis vun 3:1 bis 4.5:1 an aktualiséiert blo, gréng, Cyan a rosa Faarwen fir WCAG 2.1 AA Kontrast ze garantéieren. Och eis Faarfkontrastfaarf vun $gray-900op geännert $black.
Fir eise Faarfsystem z'ënnerstëtzen, hu mir nei Benotzerdefinéiert tint-color()a shade-color()Funktiounen bäigefüügt fir eis Faarwen entspriechend ze vermëschen.

Gitter Updates

Neie Breakpoint! Neie xxlBreakpoint bäigefüügt fir 1400pxan erop. Keng Ännerunge fir all aner breakpoints.
Verbesserte Rennen. Gutters sinn elo a Rems gesat, a si méi enk wéi v4 ( 1.5rem, oder ongeféier 24px, erof vun 30px). Dëst alignéiert d'Rennen vun eisem Gittersystem mat eise Abstands-Utilities.
- Nei Rennenklass ( .g-*, .gx-*, an .gy-*) bäigefüügt fir horizontal/vertikal Rennen, horizontalen Rennen a vertikale Rennen ze kontrolléieren.
- OfbriechenËmbenannt .no-guttersfir .g-0nei Gutter Utilities ze passen.
Kolonnen sinn net méi position: relativeugewannt, sou datt Dir vläicht un e .position-relativepuer Elementer musst derbäisetzen fir dat Verhalen ze restauréieren.
OfbriechenE puer .order-*Klassen erofgefall, déi dacks net benotzt gi sinn. Mir bidden elo nëmmen .order-1aus .order-5der Këscht.
OfbriechenDe .mediaKomponent erofgefall well et einfach mat Utilities replizéiert ka ginn. Kuckt #28265 an d' Flex Utilities Säit fir e Beispill .
Ofbriechen bootstrap-grid.cssgëlt elo nëmme box-sizing: border-boxfir d'Kolonn amplaz vun der globaler Këschtgréisst zréckzesetzen. Op dës Manéier kënnen eis Gitterstiler op méi Plazen ouni Amëschung benotzt ginn.
$enable-grid-classesnet méi deaktivéiert d'Generatioun vu Containerklassen méi. Kuckt #29146.
Aktualiséiert de make-colMixin op Standard op gläiche Kolonnen ouni eng spezifizéiert Gréisst.

Inhalt, Restart, etc

RFS ass elo als Standard aktivéiert. Rubriken, déi defont-size()Mixin benotzen, passen hir automateschfont-sizeop Skala mam Viewport un. Dës Feature war virdru opt-in mat v4.
OfbriechenIwwerhaapt eis Display Typographie fir eis $display-*Variabelen ze ersetzen a mat enger $display-font-sizesSass Kaart. Och geläscht déi eenzel $display-*-weightVerännerlechen fir eng eenzeg $display-font-weightan ugepasst font-sizes.
Zwou nei .display-*Rubrikgréissten dobäigesat, .display-5an .display-6.
Links ginn als Standard ënnersträicht (net nëmmen um Hover), ausser se sinn Deel vu spezifesche Komponenten.
Redesignéiert Dëscher fir hir Stiler z'erfrëschen an se mat CSS Variablen opzebauen fir méi Kontroll iwwer Styling.
OfbriechenNestéiert Dëscher ierwen keng Stiler méi.
Ofbriechen .thead-lighta .thead-darksinn zugonschte vun der .table-*Variant Klassen falen déi fir all Dësch Elementer benotzt ginn ( thead,,,,, tbodyan ) .tfoottrthtd
OfbriechenDe table-row-variant()Mixin gëtt ëmbenannt table-variant()an akzeptéiert nëmmen 2 Parameteren: $color(Faarfnumm) an $value(Faarfcode). D'Grenzfaarf an Akzentfaarwen ginn automatesch berechent op Basis vun den Tabellfaktorvariablen.
Split Dësch Zell padding Variabelen an -yan -x.
OfbriechenKlass gefall .pre-scrollable. Kuckt #29135
Ofbriechen .text-*Utilities fügen net méi Hover a fokusséieren Staaten op Links méi. .link-*Hëllefsklassen kënnen amplaz benotzt ginn. Kuckt #29267
OfbriechenKlass gefall .text-justify. Kuckt #29793
Ofbriechen <hr>Elementer benotzen elo heightamplaz borderfir den sizeAttribut besser z'ënnerstëtzen. Dëst erlaabt och d'Benotzung vu Padding-Utilities fir méi déck Treiber ze kreéieren (zB <hr class="py-1">.
Reset Standard horizontal padding-leftop <ul>an <ol>Elementer vum Browser Standard 40pxop 2rem.
bäigefüügt $enable-smooth-scroll, wat weltwäit gëlt scroll-behavior: smooth- ausser fir Benotzer déi no reduzéierter Bewegung duerch prefers-reduced-motionMedienufro froen. Kuckt #31877

RTL.lu

Horizontal Richtung spezifesch Variablen, Utilities, a Mixins goufen all ëmbenannt fir logesch Eegeschaften ze benotzen wéi déi a Flexbox Layouten fonnt - zB, startan endamplaz leftan right.

Formen

Nei schwiewend Formen dobäigesat! Mir hunn de Floating Etiketten Beispill fir voll ënnerstëtzt Formkomponenten gefördert. Kuckt déi nei Floating Etiketten Säit.
Ofbriechen Konsolidéiert gebierteg a personaliséiert Formelementer. Checkboxen, Radioen, Selektiounen an aner Inputen déi gebierteg a personaliséiert Klassen am v4 haten goufen konsolidéiert. Elo si bal all eis Formelementer ganz personaliséiert, meeschtens ouni de Besoin fir personaliséiert HTML.
- .custom-control.custom-checkboxass elo .form-check.
- .custom-control.custom-custom-radioass elo .form-check.
- .custom-control.custom-switchass elo .form-check.form-switch.
- .custom-selectass elo .form-select.
- .custom-filea .form-filegoufen duerch personaliséiert Stiler uewen ersat .form-control.
- .custom-rangeass elo .form-range.
- Gefall gebierteg .form-control-filean .form-control-range.
OfbriechenGefall .input-group-appendan .input-group-prepend. Dir kënnt elo just Knäppercher addéieren an .input-group-textals direkt Kanner vun den Inputgruppen.
De laangjärege Vermësste Grenzradius op Inputgrupp mat Validatiounsfeedback Käfer gëtt endlech fixéiert andeems en zousätzlech .has-validationKlass fir Inputgruppen mat Validatioun bäigefüügt gëtt.
Ofbriechen Formspezifesch Layoutklassen fir eise Gittersystem erofgefall. Benotzt eist Gitter an Utilities amplaz .form-group, .form-row, oder .form-inline.
OfbriechenForm Etiketten erfuerderen elo .form-label.
Ofbriechen .form-textnet méi setzt display, wat Iech erlaabt Inline- oder Hëllefstext ze blockéieren wéi Dir wëllt just andeems Dir den HTML-Element ännert.
Form Kontrollen net méi benotzt fix heightwann et méiglech ass, amplaz min-heightfir d'Personaliséierung an d'Kompatibilitéit mat anere Komponenten ze verbesseren.
Validatiounsikoner ginn net méi op <select>s mat applizéiert multiple.
Rearrangéiert Quell Sass Fichieren ënner scss/forms/, dorënner Input Grupp Stiler.

Komponenten

Vereenegt paddingWäerter fir Alarmer, Broutkriibs, Kaarten, Dropdowns, Lëschtgruppen, Modale, Popovers, an Tooltips fir op eiser $spacerVariabel ze baséieren. Kuckt #30564 .

Akkordeon

Neien Akkordeonkomponent bäigefüügt .

Alarmer

Alerts hunn elo Beispiller mat Ikonen .
Benotzerdefinéiert Stiler fir <hr>s an all Alarm geläscht well se scho benotzen currentColor.

Schëlder

OfbriechenAll .badge-*Faarfklassen fir Hannergrond Utilities erofgefall (zB benotzen .bg-primaryamplaz .badge-primary).
OfbriechenDropgesat .badge-pill- benotzt d' .rounded-pillUtility amplaz.
OfbriechenGeläscht Hover a Fokusstiler fir <a>an <button>Elementer.
Erweidert Standardpolsterung fir Badges vun .25em/ .5embis .35em/ .65em.

Brout

Vereinfacht d'Default Erscheinung vu Broutkummeren andeems Dir padding, background-color, an border-radius.
Nei CSS personaliséiert Eegeschafte bäigefüügt --bs-breadcrumb-dividerfir einfach Personnalisatioun ouni CSS nei ze kompiléieren.

Knäppercher

Ofbriechen Toggle Buttons , mat Checkboxen oder Radioen, erfuerderen net méi JavaScript an hunn nei Markup. Mir verlaangen net méi e wrapping Element, füügt.btn-checkder<input>, a Koppelen et mat all.btnKlassen op der<label>. Kuckt #30650 . D'Dokumenter fir dëst sinn vun eiser Buttons Säit an déi nei Forms Sektioun geplënnert.
Ofbriechen Gefall .btn-blockfir Utilities. Amplaz .btn-blockop der ze benotzen .btn, wéckelt Är Knäppercher mat .d-gridan engem .gap-*Utility fir se ze raumen wéi néideg. Wiesselt op reaktiounsfäeger Klassen fir nach méi Kontroll iwwer hinnen. Liest d'Dokumenter fir e puer Beispiller.
Eis button-variant()a button-outline-variant()Mixins aktualiséiert fir zousätzlech Parameteren z'ënnerstëtzen.
Aktualiséiert Knäppercher fir e verstäerkte Kontrast op Hover an aktive Staaten ze garantéieren.
Behënnerte Knäppercher hunn elo pointer-events: none;.

Kaart

OfbriechenGefall .card-deckzugonschte vun eisem Gitter. Wickelt Är Kaarten a Kolonnklassen a füügt en Elterendeel .row-cols-*bäi fir Kaartdeck ze kreéieren (awer mat méi Kontroll iwwer reaktiounsfäeger Ausriichtung).
OfbriechenGefall .card-columnszugonschte vun Steemetzerei. Kuckt #28922 .
OfbriechenErsat de .cardbaséiert Akkordeon mat engem neien Akkordeonkomponent .

Karussell

Nei .carousel-darkVariant bäigefüügt fir däischter Text, Kontrollen an Indikatoren (super fir méi hell Hannergrënn).
Ersat Chevron Symboler fir Karussell Kontrollen mat neie SVGs vu Bootstrap Icons .

Zoumaachen Knäppchen

OfbriechenUmbenannt .closefir .btn-closee manner generesche Numm.
Zoumaachen Knäppercher benotzen elo e background-image(embedded SVG) amplaz vun engem ×am HTML, wat et erlaabt eng méi einfach Personnalisatioun ze maachen ouni Är Markup ze beréieren.
Nei .btn-close-whiteVariant bäigefüügt déi benotzt filter: invert(1)fir méi héije Kontrast Entlooss Ikonen géint däischter Hannergrënn z'erméiglechen.

Zesummebroch

Geläscht Scrollverankerung fir Akkordeonen.

Dropdowns

Nei .dropdown-menu-darkVariant bäigefüügt an assoziéiert Variablen fir on-demand donkel Dropdowns.
Nei Variabel dobäigesat fir $dropdown-padding-x.
Däischter den Dropdown-Divider fir e verbesserte Kontrast.
OfbriechenAll d'Evenementer fir den Dropdown ginn elo um Dropdown Toggle Knäppchen ausgeléist an dann op d'Elterenelement gebubbelt.
Dropdown-Menüen hunn elo en data-bs-popper="static"Attribut gesat wann d'Positioun vum Dropdown statesch ass, oder Dropdown an der Navbar ass. Dëst gëtt vun eisem JavaScript bäigefüügt an hëlleft eis personaliséiert Positiounsstiler ze benotzen ouni dem Popper seng Positionéierung ze stéieren.
OfbriechenDropdown flipOptioun fir Dropdown Plugin zugonschte vun der gebierteg Popper Konfiguratioun. Dir kënnt elo de Flipping Verhalen auszeschalten andeems Dir eng eidel Array fir fallbackPlacementsOptioun am Flip Modifier passéiert.
Dropdown-Menüen kënnen elo klickbar sinn mat enger neier autoCloseOptioun fir d' Auto-Zoumaache Verhalen ze handhaben . Dir kënnt dës Optioun benotze fir de Klick bannen oder ausserhalb vum Dropdown-Menü ze akzeptéieren fir se interaktiv ze maachen.
Dropdowns ënnerstëtzen elo .dropdown-items gewéckelt an <li>s.

Jumbotron

OfbriechenDe Jumbotron Komponent erofgefall well et mat Utilities replizéiert ka ginn. Kuckt eist neit Jumbotron Beispill fir eng Demo.

Lëscht Grupp

Neie .list-group-numberedModifier bäigefüügt fir Gruppen ze lëschten.

Navs an Tabs

Nei nullVariablen fir font-size, font-weight, color, an :hover coloran d' .nav-linkKlass bäigefüügt.

Navbars

OfbriechenNavbars erfuerderen elo e Container bannent (fir d'Distanzfuerderunge drastesch ze vereinfachen an CSS erfuerderlech).
OfbriechenD' .activeKlass kann net méi op s applizéiert ginn .nav-item, se muss direkt op .nav-links applizéiert ginn.

Offcanvas

Déi nei Offcanvas Komponent bäigefüügt .

Paginatioun

Paginéierungslinks hunn elo personaliséierbar margin-left, déi dynamesch op all Ecker ofgerënnt sinn, wa se vuneneen getrennt sinn.
Dobäigesat transitions zu pagineringslinks.

Popovers

OfbriechenUmbenannt .arrowan .popover-arroweiser Standard Popover Schabloun.
Ëmbenannt whiteListOptioun ze allowList.

Spinner

Spinner éieren elo prefers-reduced-motion: reduceandeems se Animatiounen verlangsamen. Kuckt #31882 .
Verbesserte Spinner vertikal Ausrichtung.

Toasts

Toasts kënnen elo an engem positionéiert.toast-container ginn mat Hëllef vu Positionéierungsservicer .
Geännert Standard Toast Dauer op 5 Sekonnen.
Geläscht overflow: hiddenaus toasts an ersat mat adäquate border-radiuss mat calc()Funktiounen.

Tooltips

OfbriechenUmbenannt .arrowan .tooltip-arrowan eisem Standard Tooltip Schabloun.
OfbriechenDe Standardwäert fir de fallbackPlacementsgëtt geännert fir ['top', 'right', 'bottom', 'left']eng besser Plazéierung vu Popper Elementer.
OfbriechenËmbenannt whiteListOptioun ze allowList.

Utilities

OfbriechenVerschidden Utilities ëmbenannt fir logesch Eegentumsnamen ze benotzen anstatt Direktiounsnimm mat der Zousatz vun RTL Support:
- Umbenannt .left-*an .right-*zu .start-*an .end-*.
- Umbenannt .float-leftan .float-rightzu .float-startan .float-end.
- Umbenannt .border-leftan .border-rightzu .border-startan .border-end.
- Umbenannt .rounded-leftan .rounded-rightzu .rounded-startan .rounded-end.
- Umbenannt .ml-*an .mr-*zu .ms-*an .me-*.
- Umbenannt .pl-*an .pr-*zu .ps-*an .pe-*.
- Umbenannt .text-leftan .text-rightzu .text-startan .text-end.
OfbriechenBehënnert negativ Margen par défaut.
Nei .bg-bodyKlass bäigefüügt fir séier <body>den Hannergrond op zousätzlech Elementer ze setzen.
Nei Positiouns Utilities bäigefüügt fir top, right, bottom, an left. Wäerter enthalen 0, 50%, a 100%fir all Immobilie.
Nei Utilities .translate-middle-xbäigefüügt .translate-middle-yfir horizontal oder vertikal zentréieren absolut / fix positionéiert Elementer.
Nei border-widthUtilities bäigefüügt .
OfbriechenUmbenannt .text-monospaceop .font-monospace.
OfbriechenGeläscht .text-hidewell et eng antike Method ass fir Text ze verstoppen deen net méi sollt benotzt ginn.
Zousätzlech .fs-*Utilities fir font-sizeUtilities (mat RFS aktivéiert). Dës benotzen déi selwecht Skala wéi HTML d'Standard Rubriken (1-6, grouss bis kleng), a kann via Sass Kaart geännert ginn.
OfbriechenUmbenannt .font-weight-*Utilities wéi .fw-*fir Kuerzegkeet a Konsistenz.
OfbriechenUmbenannt .font-style-*Utilities wéi .fst-*fir Kuerzegkeet a Konsistenz.
Derbäigesat .d-gridfir Utilities an nei gapUtilities ( .gap) fir CSS Grid a Flexbox Layouten ze weisen.
OfbriechenGeläscht .rounded-sman rounded-lg, an agefouert eng nei Skala vun Klassen, .rounded-0zu .rounded-3. Kuckt #31687 .
Nei line-heightUtilities dobäigesat: .lh-1, .lh-sm, .lh-basean .lh-lg. Kuckt hei .
Beweegt den .d-noneUtility an eiser CSS fir et méi Gewiicht ze ginn iwwer aner Display Utilities.
Den .visually-hidden-focusableHelfer verlängert fir och op Container ze schaffen, mat :focus-within.

Helfer

Ofbriechen Responsive Embed Helfer goufen ëmbenannt an Verhältnishëllefer mat neie Klassennimm a verbessert Verhalen, souwéi eng hëllefräich CSS Variabel.
- Klassen goufen ëmbenannt fir byam xAspekt Verhältnis z'änneren. Zum Beispill, .ratio-16by9ass elo .ratio-16x9.
- Mir hunn den .embed-responsive-iteman Element Grupp Selector zugonschte vun engem méi einfache .ratio > *Selektor erofgelooss. Et gëtt keng Klass méi gebraucht, an de Verhältnishëllefer funktionnéiert elo mat all HTML Element.
- D' $embed-responsive-aspect-ratiosSass Kaart gouf ëmbenannt $aspect-ratiosa seng Wäerter goufen vereinfacht fir de Klassennumm an de Prozentsaz als key: valuePair ze enthalen.
- CSS Variablen ginn elo generéiert a fir all Wäert an der Sass Kaart abegraff. Ännert d' --bs-aspect-ratioVariabel op der .ratiofir all personaliséiert Aspekt Verhältnis ze kreéieren .
Ofbriechen "Screen Reader" Klassen sinn elo "visuell verstoppt" Klassen .
- D'Sass-Datei geännert vun scss/helpers/_screenreaders.scssopscss/helpers/_visually-hidden.scss
- Umbenannt .sr-onlyan .sr-only-focusablezu .visually-hiddenan.visually-hidden-focusable
- Umbenannt sr-only()an sr-only-focusable()mixins zu visually-hidden()an visually-hidden-focusable().
bootstrap-utilities.cssenthält elo och eis Helfer. Helfer brauchen net méi a personaliséierte Builds importéiert ze ginn.

JavaScript

D'JQuery Ofhängegkeet erofgefall an Plugins ëmgeschriwwen fir a reguläre JavaScript ze sinn.
OfbriechenDateattributer fir all JavaScript Plugins sinn elo opgedeelt fir d'Bootstrap Funktionalitéit vun Drëtt Parteien an Ären eegene Code z'ënnerscheeden. Zum Beispill benotze mir data-bs-toggleamplaz data-toggle.
All Plugins kënnen elo e CSS Selector als éischt Argument akzeptéieren. Dir kënnt entweder en DOM Element oder all gültege CSS Selector passéieren fir eng nei Instanz vum Plugin ze kreéieren:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigkann als Funktioun passéiert ginn, déi dem Bootstrap seng Standard Popper Config als Argument akzeptéiert, sou datt Dir dës Standardkonfiguratioun op Äre Wee fusionéiere kënnt. Gëllt fir Dropdowns, Popovers an Tooltips.
D'Default Wäert fir de fallbackPlacementsgëtt geännert fir ['top', 'right', 'bottom', 'left']eng besser Placement vun Popper Elementer. Gëllt fir Dropdowns, Popovers an Tooltips.
Geläscht Ënnersichung vun ëffentleche statesche Methoden wéi _getInstance()→ getInstance().