Ga naar hoofdinhoud Ga naar navigatie in documenten
Check
in English

Migreren naar v5

Volg en bekijk wijzigingen in de Bootstrap-bronbestanden, documentatie en componenten om u te helpen migreren van v4 naar v5.

Op deze pagina

v5.2.0

Vernieuwd ontwerp

Bootstrap v5.2.0 biedt een subtiele ontwerpupdate voor een handvol componenten en eigenschappen in het hele project, met name door verfijnde border-radiuswaarden op knoppen en formulierbesturingselementen . Onze documentatie is ook bijgewerkt met een nieuwe startpagina, een eenvoudigere lay-out voor documenten die niet langer delen van de zijbalk samenvouwt, en meer prominente voorbeelden van Bootstrap-pictogrammen .

Meer CSS-variabelen

We hebben al onze componenten bijgewerkt om CSS-variabelen te gebruiken. Hoewel Sass nog steeds de basis vormt voor alles, is elke component bijgewerkt om CSS-variabelen op te nemen in de basisklassen van de componenten (bijv. .btn), waardoor Bootstrap meer realtime kan worden aangepast. In volgende releases zullen we ons gebruik van CSS-variabelen blijven uitbreiden naar onze lay-out, formulieren, helpers en hulpprogramma's. Lees meer over CSS-variabelen in elk onderdeel op hun respectievelijke documentatiepagina's.

Ons gebruik van CSS-variabelen zal enigszins onvolledig zijn tot Bootstrap 6. Hoewel we deze graag over de hele linie volledig zouden implementeren, lopen ze het risico om ingrijpende wijzigingen te veroorzaken. Als u bijvoorbeeld $alert-border-width: var(--bs-border-width)onze broncode instelt, breekt potentiële Sass in uw eigen code als u om $alert-border-width * 2wat voor reden dan ook aan het doen was.

Daarom zullen we waar mogelijk blijven streven naar meer CSS-variabelen, maar houd er rekening mee dat onze implementatie enigszins beperkt kan zijn in v5.

Nieuw_maps.scss

Bootstrap v5.2.0 introduceerde een nieuw Sass-bestand met _maps.scss. Het haalt verschillende Sass-kaarten uit _variables.scssom een ​​probleem op te lossen waarbij updates van een originele kaart niet werden toegepast op secundaire kaarten die ze uitbreiden. Updates voor $theme-colorswerden bijvoorbeeld niet toegepast op andere themakaarten die afhankelijk waren van $theme-colors, waardoor belangrijke aanpassingsworkflows werden verbroken. Kortom, Sass heeft een beperking waarbij zodra een standaardvariabele of kaart is gebruikt , deze niet kan worden bijgewerkt. Er is een vergelijkbare tekortkoming met CSS-variabelen wanneer ze worden gebruikt om andere CSS-variabelen samen te stellen.

Dit is de reden waarom variabele aanpassingen in Bootstrap na @import "functions", maar vóór @import "variables"en de rest van onze importstack moeten komen. Hetzelfde geldt voor Sass-kaarten: u moet de standaardinstellingen overschrijven voordat ze worden gebruikt. De volgende kaarten zijn verplaatst naar de nieuwe _maps.scss:

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

Uw aangepaste Bootstrap CSS-builds zouden er nu ongeveer zo uit moeten zien met een afzonderlijke import van kaarten.

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

Nieuwe hulpprogramma's

Aanvullende wijzigingen

  • $enable-container-classesNieuwe optie geïntroduceerd . — Wanneer u zich nu aanmeldt voor de experimentele CSS-rasterlay-out, .container-*worden klassen nog steeds gecompileerd, tenzij deze optie is ingesteld op false. Ook containers behouden nu hun gootwaarde.

  • Offcanvas component heeft nu responsieve variaties . De oorspronkelijke .offcanvasklasse blijft ongewijzigd: het verbergt inhoud in alle viewports. Om het responsief te maken, wijzigt u die .offcanvasklasse in een willekeurige .offcanvas-{sm|md|lg|xl|xxl}klasse.

  • Dikkere tafelverdelers zijn nu opt-in. — We hebben de dikkere en moeilijker te overschrijven grens tussen tabelgroepen verwijderd en verplaatst naar een optionele klasse die je kunt toepassen, .table-group-divider. Zie de tabeldocumenten voor een voorbeeld.

  • Scrollspy is herschreven om de Intersection Observer API te gebruiken , wat betekent dat je geen relatieve bovenliggende wrappers meer nodig hebt, deoffsetconfiguratie afschaft en meer. Zoek naar uw Scrollspy-implementaties om nauwkeuriger en consistenter te zijn in hun navigatiemarkering.

  • Popovers en tooltips gebruiken nu CSS-variabelen. Sommige CSS-variabelen zijn bijgewerkt van hun Sass-tegenhangers om het aantal variabelen te verminderen. Als gevolg hiervan zijn in deze release drie variabelen gedeprecieerd: $popover-arrow-color, $popover-arrow-outer-color, en $tooltip-arrow-color.

  • Nieuwe .text-bg-{color}helpers toegevoegd. In plaats van individuele .text-*en .bg-*hulpprogramma's in te stellen, kunt u nu de .text-bg-*helpers gebruiken om een background-color​​contrasterende voorgrond in te stellen color.

  • .form-check-reverseModifier toegevoegd om de volgorde van labels en bijbehorende selectievakjes/radio's om te draaien.

  • Ondersteuning voor gestreepte kolommen toegevoegd aan tabellen via de nieuwe .table-striped-columnsklasse.

Zie het v5.2.0-project op GitHub voor een volledige lijst met wijzigingen .

v5.1.0

  • Experimentele ondersteuning toegevoegd voor CSS-rasterlay-out . — Dit is een werk in uitvoering en is nog niet klaar voor gebruik in productie, maar u kunt zich via Sass aanmelden voor de nieuwe functie. Om het in te schakelen, schakelt u het standaardraster uit door in te stellen $enable-grid-classes: falseen schakelt u het CSS-raster in door in te stellen $enable-cssgrid: true.

  • Bijgewerkte navigatiebalken om offcanvas te ondersteunen. — Voeg offcanvas-laden toe aan elke navigatiebalk met de responsieve .navbar-expand-*klassen en wat offcanvas-opmaak.

  • Nieuwe tijdelijke aanduiding-component toegevoegd . — Ons nieuwste onderdeel, een manier om tijdelijke blokkeringen te bieden in plaats van echte inhoud om aan te geven dat er nog iets wordt geladen op uw site of app.

  • Collapse-plug-in ondersteunt nu horizontaal samenvouwen . — Voeg toe .collapse-horizontalaan uw .collapseom de widthin plaats van de height. Vermijd het opnieuw schilderen van de browser door een min-heightof in te stellen height.

  • Nieuwe stapel- en verticale regelhulpen toegevoegd. — Pas snel meerdere flexbox-eigenschappen toe om snel aangepaste lay-outs te maken met stapels . Kies uit horizontale ( .hstack) en verticale ( .vstack) stapels. Voeg verticale verdelers toe die lijken op <hr>elementen met de nieuwe .vrhelpers .

  • Nieuwe globale :rootCSS-variabelen toegevoegd. - Verschillende nieuwe CSS-variabelen toegevoegd aan het :rootniveau voor het besturen van <body>stijlen. Er zijn er nog meer in de maak, ook voor onze hulpprogramma's en componenten, maar lees voor nu de CSS-variabelen in het gedeelte Aanpassen .

  • Gereviseerde hulpprogramma's voor kleur en achtergrond om CSS-variabelen te gebruiken, en nieuwe hulpprogramma's voor tekstdekking en achtergronddekking toegevoegd . - .text-* en .bg-*hulpprogramma's zijn nu gebouwd met CSS-variabelen en rgba()kleurwaarden, zodat u elk hulpprogramma eenvoudig kunt aanpassen met nieuwe dekkingshulpprogramma's.

  • Nieuwe fragmentvoorbeelden toegevoegd om te laten zien hoe u onze componenten kunt aanpassen. — Trek kant-en-klare aangepaste componenten en andere veelvoorkomende ontwerppatronen met onze nieuwe Snippets-voorbeelden . Omvat voetteksten , vervolgkeuzelijsten , lijstgroepen en modals .

  • Ongebruikte positioneringsstijlen uit popovers en tooltips verwijderd , aangezien deze uitsluitend door Popper worden afgehandeld. $tooltip-marginis afgekeurd en ingesteld op nullin het proces.

Wilt u meer informatie? Lees de v5.1.0 blogpost.

Hallo daar! Wijzigingen in onze eerste grote release van Bootstrap 5, v5.0.0, worden hieronder gedocumenteerd. Ze weerspiegelen niet de aanvullende wijzigingen die hierboven worden weergegeven.

afhankelijkheden

  • jQuery laten vallen.
  • Opgewaardeerd van Popper v1.x naar Popper v2.x.
  • Libsass vervangen door Dart Sass omdat onze Sass-compiler gezien Libsass verouderd was.
  • Gemigreerd van Jekyll naar Hugo voor het bouwen van onze documentatie

Browserondersteuning

  • Internet Explorer 10 en 11 laten vallen
  • Dropped Microsoft Edge < 16 (Legacy Edge)
  • Gedropt Firefox < 60
  • Gedropt Safari < 12
  • Gedropt iOS Safari < 12
  • Chrome laten vallen < 60

Documentatie wijzigingen

  • Opnieuw ontworpen startpagina, lay-out van documenten en voettekst.
  • Nieuwe pakketgids toegevoegd .
  • Nieuwe sectie Aanpassen toegevoegd , ter vervanging van de themapagina van v4 , met nieuwe details over Sass, algemene configuratie-opties, kleurenschema's, CSS-variabelen en meer.
  • Alle formulierdocumentatie gereorganiseerd in een nieuwe sectie Formulieren , waarbij de inhoud is opgedeeld in meer gerichte pagina's.
  • Op dezelfde manier is het gedeelte Lay -out bijgewerkt om de rasterinhoud duidelijker uit te werken.
  • De componentpagina "Navs" hernoemd naar "Navs & Tabs".
  • Hernoemd "Checks" pagina naar "Checks & radio's".
  • De navigatiebalk opnieuw ontworpen en een nieuwe subnav toegevoegd om het gemakkelijker te maken om onze sites en documentenversies te omzeilen.
  • Nieuwe sneltoets toegevoegd voor het zoekveld: Ctrl + /.

Sass

  • We hebben de standaard Sass-kaartsamenvoegingen gedumpt om het gemakkelijker te maken om overbodige waarden te verwijderen. Houd er rekening mee dat je nu alle waarden in de Sass-kaarten moet definiëren, zoals $theme-colors. Bekijk hoe om te gaan met Sass-kaarten .

  • Brekencolor-yiq()Functie en gerelateerde variabelen hernoemd naar color-contrast()omdat het niet langer gerelateerd is aan YIQ-kleurruimte. Zie #30168.

    • $yiq-contrasted-thresholdwordt hernoemd naar $min-contrast-ratio.
    • $yiq-text-darken $yiq-text-lightworden respectievelijk hernoemd naar $color-contrast-darken $color-contrast-light.

  • BrekenDe parameters voor mediaquery's zijn gewijzigd voor een meer logische benadering.

    • media-breakpoint-down()gebruikt het breekpunt zelf in plaats van het volgende breekpunt (bijv. media-breakpoint-down(lg)in plaats van media-breakpoint-down(md)viewports kleiner dan lg).
    • Op dezelfde manier gebruikt de tweede parameter in media-breakpoint-between()ook het breekpunt zelf in plaats van het volgende breekpunt (bijvoorbeeld in media-between(sm, lg)plaats van media-breakpoint-between(sm, md)viewports tussen smen lg).

  • BrekenAfdrukstijlen en $enable-print-stylesvariabele verwijderd. Print display klassen zijn er nog steeds. Zie #28339 .

  • BrekenDropped color(), theme-color(), en gray()functies ten gunste van variabelen. Zie #29083 .

  • BrekenHernoemde theme-color-level()functie naar color-level()en accepteert nu elke gewenste kleur in plaats van alleen $theme-colorkleuren. Zie #29083 Let op: color-level() werd later binnengelaten v5.0.0-alpha3.

  • BrekenOmgedoopt tot $enable-prefers-reduced-motion-media-queryen voor de beknoptheid.$enable-pointer-cursor-for-buttons$enable-reduced-motion$enable-button-pointers

  • BrekenDe mix verwijderd bg-gradient-variant(). Gebruik de .bg-gradientklasse om verlopen toe te voegen aan elementen in plaats van de gegenereerde .bg-gradient-*klassen.

  • Breken Eerder verouderde mixins verwijderd:

    • hover, hover-focus, plain-hover-focus, enhover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(ook de bijbehorende utility-klasse laten vallen, .text-hide)
    • visibility()
    • form-control-focus()

  • BrekenHernoemde scale-color()functie shift-color()om botsing met Sass' eigen kleurschalingsfunctie te voorkomen.

  • box-shadowmixins staan ​​nu nullwaarden toe en laten vallen nonevan meerdere argumenten. Zie #30394 .

  • De border-radius()mixin heeft nu een standaardwaarde.

Kleur systeem

  • Het kleursysteem dat werkte met color-level()en $theme-color-intervalwerd verwijderd ten gunste van een nieuw kleursysteem. Alle lighten()en darken()functies in onze codebase worden vervangen door tint-color()en shade-color(). Deze functies mengen de kleur met wit of zwart in plaats van de lichtheid met een vaste hoeveelheid te veranderen. Afhankelijk van of de shift-color()gewichtsparameter positief of negatief is, wordt een kleur getint of geschaduwd. Zie #30622 voor meer details.

  • Nieuwe tinten en tinten toegevoegd voor elke kleur, met negen afzonderlijke kleuren voor elke basiskleur, als nieuwe Sass-variabelen.

  • Verbeterd kleurcontrast. Verhoogde kleurcontrastverhouding van 3:1 tot 4,5:1 en bijgewerkte blauwe, groene, cyaan en roze kleuren om WCAG 2.1 AA-contrast te garanderen. Ook onze kleurcontrastkleur gewijzigd van $gray-900naar $black.

  • Om ons kleursysteem te ondersteunen, hebben we nieuwe gewoontes tint-color()en shade-color()functies toegevoegd om onze kleuren op de juiste manier te mengen.

Rasterupdates

  • Nieuw breekpunt! Nieuw xxlbreekpunt toegevoegd voor 1400pxen hoger. Geen wijzigingen in alle andere breekpunten.

  • Verbeterde goten. Dakgoten zijn nu ingesteld in rems en zijn smaller dan v4 ( 1.5rem, of ongeveer 24px, lager vanaf 30px). Dit brengt de goten van ons rastersysteem op één lijn met onze afstandshulpprogramma's.

    • Nieuwe gootklasse ( .g-*, .gx-*, en .gy-*) toegevoegd om horizontale/verticale goten, horizontale goten en verticale goten te bedienen.
    • BrekenHernoemd .no-guttersnaar .g-0om overeen te komen met nieuwe goothulpprogramma's.

  • Kolommen zijn niet langer van position: relativetoepassing, dus u moet mogelijk .position-relativeenkele elementen toevoegen om dat gedrag te herstellen.

  • BrekenVerschillende .order-*klassen laten vallen die vaak ongebruikt bleven. We leveren nu alleen .order-1out .order-5-of-the-box.

  • BrekenHet .mediaonderdeel verwijderd omdat het gemakkelijk kan worden gerepliceerd met hulpprogramma's. Zie #28265 en de flex utilities-pagina voor een voorbeeld .

  • Breken bootstrap-grid.cssis nu alleen van toepassing box-sizing: border-boxop de kolom in plaats van de globale box-sizing opnieuw in te stellen. Op deze manier kunnen onze rasterstijlen op meer plaatsen worden gebruikt zonder interferentie.

  • $enable-grid-classesschakelt het genereren van containerklassen niet meer uit. Zie #29146.

  • make-colDe mixin bijgewerkt naar standaard naar gelijke kolommen zonder een opgegeven grootte.

Inhoud, opnieuw opstarten, enz.

  • RFS is nu standaard ingeschakeld. Koppen die defont-size()mixin gebruiken, passen hun schaal automatischfont-sizeaan met de viewport. Deze functie was eerder aangemeld bij v4.

  • BrekenOnze weergavetypografie gereviseerd om onze $display-*variabelen te vervangen en met een $display-font-sizesSass-kaart. Ook de individuele $display-*-weightvariabelen voor een enkele $display-font-weighten aangepaste font-sizes verwijderd.

  • Twee nieuwe .display-*kopgroottes toegevoegd, .display-5en .display-6.

  • Links zijn standaard onderstreept (niet alleen bij de muisaanwijzer), tenzij ze deel uitmaken van specifieke componenten.

  • Herontworpen tabellen om hun stijlen te vernieuwen en ze opnieuw op te bouwen met CSS-variabelen voor meer controle over styling.

  • BrekenGeneste tabellen nemen geen stijlen meer over.

  • Breken .thead-lighten .thead-darkworden weggelaten ten gunste van de .table-*variantklassen die voor alle tabelelementen kunnen worden gebruikt ( thead, tbody, tfoot, tr, then td).

  • BrekenDe table-row-variant()mixin wordt hernoemd naar table-variant()en accepteert slechts 2 parameters: $color(kleurnaam) en $value(kleurcode). De randkleur en accentkleuren worden automatisch berekend op basis van de tabelfactorvariabelen.

  • Splits tabelcelopvullingsvariabelen in -yen -x.

  • BrekenGevallen .pre-scrollableklasse. Zie #29135

  • Breken .text-*hulpprogramma's voegen geen hover- en focusstatussen meer toe aan links. .link-*In plaats daarvan kunnen helperklassen worden gebruikt. Zie #29267

  • BrekenGevallen .text-justifyklasse. Zie #29793

  • Breken <hr>elementen gebruiken nu in heightplaats van borderom het sizeattribuut beter te ondersteunen. Dit maakt ook het gebruik van opvulhulpmiddelen mogelijk om dikkere verdelers te maken (bijv. <hr class="py-1">).

  • Reset standaard horizontaal padding-leftop <ul>en <ol>elementen van browser standaard 40pxnaar 2rem.

  • Toegevoegd $enable-smooth-scroll, dat scroll-behavior: smoothwereldwijd van toepassing is, behalve voor gebruikers die om minder beweging vragen via prefers-reduced-motionmediaquery's. Zie #31877

RTL

  • Horizontale richting-specifieke variabelen, hulpprogramma's en mixins zijn allemaal hernoemd om logische eigenschappen te gebruiken zoals die in flexbox-lay-outs worden gevonden, bijvoorbeeld starten endin plaats van leften right.

Formulieren

  • Nieuwe zwevende formulieren toegevoegd! We hebben het voorbeeld van zwevende labels gepromoot naar volledig ondersteunde formuliercomponenten. Zie de nieuwe pagina Zwevende labels.

  • Breken Geconsolideerde native en aangepaste formulierelementen. Selectievakjes, radio's, selecties en andere invoer met native en aangepaste klassen in v4 zijn geconsolideerd. Nu zijn bijna al onze formulierelementen volledig aangepast, de meeste zonder de noodzaak van aangepaste HTML.

    • .custom-control.custom-checkboxis nu .form-check.
    • .custom-control.custom-custom-radiois nu .form-check.
    • .custom-control.custom-switchis nu .form-check.form-switch.
    • .custom-selectis nu .form-select.
    • .custom-fileen .form-filezijn vervangen door aangepaste stijlen bovenop .form-control.
    • .custom-rangeis nu .form-range.
    • Inheems .form-control-fileen .form-control-range.

  • BrekenGedropt .input-group-appenden .input-group-prepend. U kunt nu gewoon knoppen toevoegen en .input-group-textals directe kinderen van de invoergroepen.

  • De al lang bestaande ontbrekende grensradius op invoergroep met validatiefeedback-bug is eindelijk opgelost door een extra .has-validationklasse toe te voegen aan invoergroepen met validatie.

  • Breken Vormspecifieke lay-outklassen voor ons rastersysteem laten vallen. Gebruik ons ​​netwerk en hulpprogramma's in plaats van .form-group, .form-row, of .form-inline.

  • BrekenFormulierlabels vereisen nu .form-label.

  • Breken .form-textniet langer sets display, zodat u naar wens inline- of blokkeerhulptekst kunt maken door het HTML-element te wijzigen.

  • Formulierbesturingselementen worden heightwaar mogelijk niet meer vast gebruikt, maar worden uitgesteld om min-heightde aanpassing en compatibiliteit met andere componenten te verbeteren.

  • Validatiepictogrammen worden niet langer toegepast op <select>s met multiple.

  • Herschikte bron Sass-bestanden onder scss/forms/, inclusief invoergroepstijlen.

Componenten

  • Uniforme paddingwaarden voor waarschuwingen, broodkruimels, kaarten, vervolgkeuzelijsten, lijstgroepen, modals, popovers en tooltips die op onze $spacervariabele moeten worden gebaseerd. Zie #30564 .

Accordeon

Waarschuwingen

  • Waarschuwingen hebben nu voorbeelden met pictogrammen .

  • Aangepaste stijlen voor <hr>s in elke waarschuwing verwijderd omdat ze al currentColor.

Insignes

  • BrekenAlle .badge-*kleurklassen voor achtergrondhulpprogramma's verwijderd (bijv. gebruiken .bg-primaryin plaats van .badge-primary).

  • BrekenDropped .badge-pill—gebruik .rounded-pillin plaats daarvan het hulpprogramma.

  • BrekenAanwijzer- en focusstijlen voor <a>en <button>elementen verwijderd.

  • Verhoogde standaard opvulling voor badges van .25em/ .5emnaar .35em/ .65em.

  • Vereenvoudigde de standaardweergave van breadcrumbs door padding, background-color, en te verwijderen border-radius.

  • Nieuwe aangepaste CSS-eigenschap toegevoegd --bs-breadcrumb-dividervoor eenvoudige aanpassing zonder dat CSS opnieuw hoeft te worden gecompileerd.

Toetsen

  • Breken Schakelknoppen , met selectievakjes of radio's, hebben geen JavaScript meer nodig en hebben nieuwe opmaak. We hebben niet langer een verpakkingselement nodig, voegen toe.btn-checkaan de<input>, en koppelen deze aan.btnklassen op de<label>. Zie #30650 . De documenten hiervoor zijn verplaatst van onze pagina Knoppen naar de nieuwe sectie Formulieren.

  • Breken Gedropt .btn-blockvoor nutsbedrijven. In plaats van .btn-blockop de te gebruiken .btn, wikkel je je knoppen met .d-griden een .gap-*hulpprogramma om ze naar behoefte te spreiden. Schakel over naar responsieve klassen voor nog meer controle over hen. Lees de documenten voor enkele voorbeelden.

  • Onze button-variant()en button-outline-variant()mixins bijgewerkt om aanvullende parameters te ondersteunen.

  • Bijgewerkte knoppen voor meer contrast bij zweven en actieve statussen.

  • Uitgeschakelde knoppen hebben nu pointer-events: none;.

Kaart

  • BrekenGedropt .card-deckten gunste van ons raster. Wikkel uw kaarten in kolomklassen en voeg een bovenliggende .row-cols-*container toe om kaartspellen opnieuw te maken (maar met meer controle over responsieve uitlijning).

  • BrekenGedropt .card-columnsten gunste van metselwerk. Zie #28922 .

  • BrekenDe .cardgebaseerde accordeon vervangen door een nieuwe accordeoncomponent .

  • Nieuwe .carousel-darkvariant toegevoegd voor donkere tekst, bedieningselementen en indicatoren (ideaal voor lichtere achtergronden).

  • Chevronpictogrammen voor carrouselbesturing vervangen door nieuwe SVG's van Bootstrap Icons .

Sluit knop

  • BrekenOmgedoopt .closetot .btn-closevoor een minder generieke naam.

  • Knoppen voor sluiten gebruiken nu een background-image(ingebedde SVG) in plaats van een &times;in de HTML, waardoor aanpassingen eenvoudiger zijn zonder dat u uw markeringen hoeft aan te raken.

  • Nieuwe .btn-close-whitevariant toegevoegd die gebruikt filter: invert(1)om afwijzingspictogrammen met een hoger contrast in te schakelen tegen donkere achtergronden.

Instorten

  • Scrollverankering voor accordeons verwijderd.

  • Nieuwe .dropdown-menu-darkvariant en bijbehorende variabelen toegevoegd voor on-demand donkere vervolgkeuzelijsten.

  • Nieuwe variabele toegevoegd voor $dropdown-padding-x.

  • De dropdown-verdeler is donkerder gemaakt voor een beter contrast.

  • BrekenAlle gebeurtenissen voor de vervolgkeuzelijst worden nu geactiveerd op de vervolgkeuzeknop en vervolgens naar het bovenliggende element gebubbeld.

  • Vervolgkeuzemenu's hebben nu een data-bs-popper="static"attribuut ingesteld wanneer de positionering van de vervolgkeuzelijst statisch is of de vervolgkeuzelijst zich in de navigatiebalk bevindt. Dit wordt toegevoegd door ons JavaScript en helpt ons om aangepaste positiestijlen te gebruiken zonder de positionering van Popper te verstoren.

  • BrekenOptie flipvoor dropdown-plug-in weggelaten ten gunste van native Popper-configuratie. U kunt het flipping-gedrag nu uitschakelen door een lege array door te geven voor fallbackPlacementsoptie in flip - modifier.

  • Er kunnen nu vervolgkeuzemenu's worden aangeklikt met een nieuwe autoCloseoptie om het gedrag van automatisch sluiten af ​​te handelen . U kunt deze optie gebruiken om de klik binnen of buiten het vervolgkeuzemenu te accepteren om het interactief te maken.

  • Dropdowns ondersteunen nu .dropdown-items verpakt in <li>s.

Jumbotron

Lijst groep

  • Nieuwe nullvariabelen toegevoegd voor font-size, font-weight, coloren :hover coloraan de .nav-linkklasse.
  • BrekenNavbars vereisen nu een container binnen (om de spatiëringsvereisten en CSS-vereisten drastisch te vereenvoudigen).
  • BrekenDe .activeklasse kan niet langer worden toegepast op .nav-items, deze moet rechtstreeks op .nav-links worden toegepast.

Off-canvas

Paginering

  • Pagineringslinks kunnen nu worden aangepast margin-leften dynamisch worden afgerond op alle hoeken wanneer ze van elkaar zijn gescheiden.

  • transitionS aan paginatielinks toegevoegd .

Popovers

  • BrekenHernoemd .arrownaar .popover-arrowin onze standaard popover-sjabloon.

  • Hernoemde whiteListoptie naar allowList.

Spinners

  • Spinners eren nu prefers-reduced-motion: reducedoor animaties te vertragen. Zie #31882 .

  • Verbeterde verticale uitlijning van de spinner.

Toast

  • Toasts kunnen nu in een a worden gepositioneerd.toast-container met behulp van positioneringshulpmiddelen .

  • Standaard toastduur gewijzigd in 5 seconden.

  • Verwijderd overflow: hiddenvan toast en vervangen door de juiste border-radiuss met calc()functies.

Knopinfo

  • BrekenHernoemd .arrownaar .tooltip-arrowin onze standaard tooltip-sjabloon.

  • BrekenDe standaardwaarde voor de fallbackPlacementsis gewijzigd in ['top', 'right', 'bottom', 'left']voor een betere plaatsing van popper-elementen.

  • BrekenHernoemde whiteListoptie naar allowList.

Nutsvoorzieningen

  • BrekenVerschillende hulpprogramma's hernoemd om logische eigenschapsnamen te gebruiken in plaats van richtingsnamen met de toevoeging van RTL-ondersteuning:

    • Hernoemd .left-*en .right-*naar .start-*en .end-*.
    • Hernoemd .float-leften .float-rightnaar .float-starten .float-end.
    • Hernoemd .border-leften .border-rightnaar .border-starten .border-end.
    • Hernoemd .rounded-leften .rounded-rightnaar .rounded-starten .rounded-end.
    • Hernoemd .ml-*en .mr-*naar .ms-*en .me-*.
    • Hernoemd .pl-*en .pr-*naar .ps-*en .pe-*.
    • Hernoemd .text-leften .text-rightnaar .text-starten .text-end.

  • BrekenNegatieve marges standaard uitgeschakeld.

  • Nieuwe .bg-bodyklasse toegevoegd voor het snel instellen van de <body>achtergrond van extra elementen.

  • Nieuwe positiehulpprogramma's toegevoegd voor top, right, bottom, en left. Waarden omvatten 0, 50%, en 100%voor elke eigenschap.

  • Nieuwe .translate-middle-x& .translate-middle-yhulpprogramma's toegevoegd om absolute/vast gepositioneerde elementen horizontaal of verticaal te centreren.

  • Nieuwe border-widthhulpprogramma's toegevoegd .

  • BrekenHernoemd .text-monospacenaar .font-monospace.

  • BrekenVerwijderd .text-hideomdat het een verouderde methode is om tekst te verbergen die niet meer zou moeten worden gebruikt.

  • .fs-*Hulpprogramma's voor hulpprogramma's toegevoegd font-size(met RFS ingeschakeld). Deze gebruiken dezelfde schaal als de standaardkoppen van HTML (1-6, van groot naar klein) en kunnen worden gewijzigd via Sass-kaart.

  • BrekenHernoemde .font-weight-*hulpprogramma's .fw-*voor beknoptheid en consistentie.

  • BrekenHernoemde .font-style-*hulpprogramma's .fst-*voor beknoptheid en consistentie.

  • Toegevoegd .d-gridom hulpprogramma's en nieuwe gaphulpprogramma's ( .gap) weer te geven voor CSS-raster- en flexboxlay-outs.

  • BrekenVerwijderd .rounded-smen rounded-lg, en introduceerde een nieuwe schaal van klassen, .rounded-0naar .rounded-3. Zie #31687 .

  • Nieuwe line-heighthulpprogramma's toegevoegd: .lh-1, .lh-sm, .lh-baseen .lh-lg. Zie hier .

  • Het hulpprogramma in onze CSS verplaatst .d-noneom het meer gewicht te geven dan andere weergavehulpprogramma's.

  • De .visually-hidden-focusablehelper uitgebreid om ook aan containers te werken, met behulp van :focus-within.

Helpers

  • Breken Responsieve embed-helpers zijn hernoemd naar ratio-helpers met nieuwe klassenamen en verbeterd gedrag, evenals een handige CSS-variabele.

    • Klassen zijn hernoemd om te veranderen byin xde beeldverhouding. .ratio-16by9Is nu bijvoorbeeld .ratio-16x9.
    • We hebben de .embed-responsive-itemen elementgroepselector laten vallen ten gunste van een eenvoudigere .ratio > *selector. Er is geen klasse meer nodig en de ratio-helper werkt nu met elk HTML-element.
    • De $embed-responsive-aspect-ratiosSass-kaart is hernoemd naar $aspect-ratiosen de waarden zijn vereenvoudigd om de klassenaam en het percentage als het key: valuepaar op te nemen.
    • CSS-variabelen worden nu gegenereerd en opgenomen voor elke waarde in de Sass-kaart. Wijzig de --bs-aspect-ratiovariabele op de .ratioom een ​​aangepaste beeldverhouding te maken .

  • Breken "Schermlezer" klassen zijn nu "visueel verborgen" klassen .

    • Het Sass-bestand gewijzigd van scss/helpers/_screenreaders.scssnaarscss/helpers/_visually-hidden.scss
    • Hernoemd .sr-onlyen .sr-only-focusablenaar .visually-hiddenen.visually-hidden-focusable
    • Hernoemd sr-only()en sr-only-focusable()mixins naar visually-hidden()en visually-hidden-focusable().

  • bootstrap-utilities.cssnu ook onze helpers. Helpers hoeven niet meer te worden geïmporteerd in aangepaste builds.

JavaScript

  • JQuery-afhankelijkheid verwijderd en plug-ins herschreven om in normaal JavaScript te zijn.

  • BrekenGegevenskenmerken voor alle JavaScript-plug-ins hebben nu een naamruimte om de Bootstrap-functionaliteit te onderscheiden van derden en uw eigen code. We gebruiken bijvoorbeeld in data-bs-toggleplaats van data-toggle.

  • Alle plug-ins kunnen nu een CSS-selector als eerste argument accepteren. U kunt een DOM-element of een geldige CSS-selector doorgeven om een ​​nieuwe instantie van de plug-in te maken:

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

  • popperConfigkan worden doorgegeven als een functie die de standaard Popper-configuratie van Bootstrap als argument accepteert, zodat je deze standaardconfiguratie op jouw manier kunt samenvoegen. Is van toepassing op vervolgkeuzemenu's, popovers en knopinfo.

  • De standaardwaarde voor de fallbackPlacementsis gewijzigd in ['top', 'right', 'bottom', 'left']voor een betere plaatsing van Popper-elementen. Is van toepassing op vervolgkeuzemenu's, popovers en knopinfo.

  • Onderstrepingsteken verwijderd uit openbare statische methoden zoals _getInstance()→ getInstance().