in English

Migreer na v5

Volg en hersien veranderinge aan die Bootstrap-bronlêers, dokumentasie en komponente om jou te help om van v4 na v5 te migreer.

Op hierdie bladsy

v5.2.0

Vernuwe ontwerp

Bootstrap v5.2.0 beskik oor 'n subtiele ontwerpopdatering vir 'n handvol komponente en eienskappe regoor die projek, veral deur verfynde border-radiuswaardes op knoppies en vormkontroles . Ons dokumentasie is ook opgedateer met 'n nuwe tuisblad, eenvoudiger dokumentuitleg wat nie meer dele van die sybalk invou nie, en meer prominente voorbeelde van Bootstrap-ikone .

Meer CSS veranderlikes

Ons het al ons komponente opgedateer om CSS-veranderlikes te gebruik. Terwyl Sass steeds alles onderlê, is elke komponent opgedateer om CSS-veranderlikes op die komponentbasisklasse (bv. .btn), in te sluit, wat meer intydse aanpassing van Bootstrap moontlik maak. In daaropvolgende vrystellings sal ons voortgaan om ons gebruik van CSS-veranderlikes uit te brei na ons uitleg, vorms, helpers en nutsprogramme. Lees meer oor CSS-veranderlikes in elke komponent op hul onderskeie dokumentasiebladsye.

Ons CSS-veranderlike gebruik sal ietwat onvolledig wees tot Bootstrap 6. Alhoewel ons dit graag oor die hele linie ten volle wil implementeer, loop hulle die risiko om veranderinge te veroorsaak. Byvoorbeeld, die instelling $alert-border-width: var(--bs-border-width)van ons bronkode breek potensiële Sass in jou eie kode as jy dit $alert-border-width * 2om een of ander rede doen.

As sodanig sal ons, waar moontlik, voortgaan om na meer CSS-veranderlikes te streef, maar erken asseblief dat ons implementering effens beperk kan wees in v5.

Nuut`_maps.scss`

Bootstrap v5.2.0 het 'n nuwe Sass-lêer met _maps.scss. Dit haal verskeie Sass-kaarte uit _variables.scssom 'n probleem op te los waar opdaterings van 'n oorspronklike kaart nie toegepas is op sekondêre kaarte wat dit uitbrei nie. Opdaterings na $theme-colorsis byvoorbeeld nie toegepas op ander temakaarte wat staatgemaak het op $theme-colors, wat sleutelaanpassingswerkvloeie verbreek het. Kortom, Sass het 'n beperking waar sodra 'n verstekveranderlike of kaart gebruik is , dit nie opgedateer kan word nie. Daar is 'n soortgelyke tekortkoming met CSS-veranderlikes wanneer hulle gebruik word om ander CSS-veranderlikes saam te stel.

Dit is hoekom veranderlike aanpassings in Bootstrap na @import "functions", maar voor @import "variables"en die res van ons invoerstapel moet kom. Dieselfde geld vir Sass-kaarte—jy moet die verstekwaardes ignoreer voordat hulle gewoond raak. Die volgende kaarte is na die nuwe geskuif _maps.scss:

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

Jou pasgemaakte Bootstrap CSS-bou behoort nou so iets te lyk met 'n aparte kaartinvoer.

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

Nuwe nutsdienste

Uitgebreide font-weightnutsprogramme om in te sluit .fw-semiboldvir halfvet lettertipes.
Uitgebreide border-radiusnutsprogramme om twee nuwe groottes in te sluit, .rounded-4en .rounded-5, vir meer opsies.

Bykomende veranderinge

$enable-container-classesNuwe opsie bekendgestel . — Nou wanneer u inteken op die eksperimentele CSS Grid-uitleg, .container-*sal klasse steeds saamgestel word, tensy hierdie opsie op gestel is false. Houers behou ook nou hul geutwaardes.
Offcanvas-komponent het nou responsiewe variasies . Die oorspronklike .offcanvasklas bly onveranderd - dit versteek inhoud oor alle kykpoorte. Om dit responsief te maak, verander daardie .offcanvasklas na enige .offcanvas-{sm|md|lg|xl|xxl}klas.
Dikker tafelverdelers word nou aanvaar. — Ons het die dikker en moeiliker om te ignoreer grens tussen tabelgroepe verwyder en dit geskuif na 'n opsionele klas wat jy kan toepas, .table-group-divider. Sien die tabeldokumente vir 'n voorbeeld.
Scrollspy is herskryf om die Intersection Observer API te gebruik , wat beteken dat jy nie meer relatieweoffsetkonfigurasie afkeur, en meer. Soek vir jou Scrollspy-implementerings om meer akkuraat en konsekwent te wees in hul navigasie-uitlig.
Popovers en gereedskapwenke gebruik nou CSS-veranderlikes. Sommige CSS-veranderlikes is vanaf hul Sass-eweknieë opgedateer om die aantal veranderlikes te verminder. Gevolglik is drie veranderlikes in hierdie vrystelling afgekeur: $popover-arrow-color, $popover-arrow-outer-color, en $tooltip-arrow-color.
.text-bg-{color}Nuwe helpers bygevoeg . In plaas daarvan om individue .text-*en .bg-*nutsprogramme in te stel, kan jy nou die .text-bg-*helpers gebruik om 'n background-colormet kontrasterende voorgrond te stel color.
Bygevoeg .form-check-reversewysiger om die volgorde van etikette en gepaardgaande merkblokkies/radio's om te draai.
Bygevoeg gestreepte kolomme ondersteuning by tabelle via die nuwe .table-striped-columnsklas.

Vir 'n volledige lys van veranderinge, sien die v5.2.0-projek op GitHub .

v5.1.0

Bygevoeg eksperimentele ondersteuning vir CSS Grid uitleg . — Dit is 'n werk aan die gang, en is nog nie gereed vir produksiegebruik nie, maar jy kan inteken op die nuwe kenmerk via Sass. Om dit te aktiveer, deaktiveer die verstekrooster deur $enable-grid-classes: falsedie CSS-rooster in te stel en te aktiveer deur te stel $enable-cssgrid: true.
Opgedateerde navigasiebalke om offcanvas te ondersteun. - Voeg offcanvas-laaie in enige navigasiebalk by met die responsiewe .navbar-expand-*klasse en 'n paar offcanvas-opmaak.
Nuwe plekhouer-komponent bygevoeg . — Ons nuutste komponent, 'n manier om tydelike blokke in plaas van werklike inhoud te verskaf om te help om aan te dui dat iets nog in jou werf of toepassing laai.
Invou-inprop ondersteun nou horisontale ineenstorting . — Voeg .collapse-horizontalby jou om die in plaas van die in .collapsete vou . Vermy blaaier-herverf deur 'n of te stel .widthheightmin-heightheight
Bygevoeg nuwe stapel en vertikale reël helpers. - Pas vinnig verskeie flexbox-eienskappe toe om vinnig pasgemaakte uitlegte met stapels te skep . Kies uit horisontale ( .hstack) en vertikale ( .vstack) stapels. Voeg vertikale verdelers soortgelyk aan <hr>elemente by met die nuwe .vrhelpers .
Bygevoeg nuwe globale :rootCSS veranderlikes. - Verskeie nuwe CSS-veranderlikes bygevoeg tot die :rootvlak vir die beheer van <body>style. Meer is in die werke, insluitend oor ons nutsprogramme en komponente, maar lees vir eers CSS-veranderlikes in die Pasmaak-afdeling .
Kleur- en agtergrondhulpmiddels hersien om CSS-veranderlikes te gebruik, en nuwe teksdeursigtigheid- en agtergrond -deursigtigheidnutsmiddels bygevoeg . - .text-* en .bg-*nutsprogramme word nou gebou met CSS-veranderlikes en rgba()kleurwaardes, waardeur u enige nutsmiddel maklik kan aanpas met nuwe ondeursigtigheidshulpmiddels.
Bygevoeg nuwe brokkie voorbeelde gebaseer om te wys hoe om ons komponente aan te pas. — Trek gereed om pasgemaakte komponente en ander algemene ontwerppatrone te gebruik met ons nuwe Snippets-voorbeelde . Sluit voettekste , aftreklys , lysgroepe en modale in.
Het ongebruikte posisioneringstyle van popovers en gereedskapwenke verwyder aangesien dit uitsluitlik deur Popper hanteer word. $tooltip-marginis afgekeur en nullin die proses gestel.

Wil jy meer inligting hê? Lees die v5.1.0-blogplasing.

Haai daar! Veranderinge aan ons eerste groot vrystelling van Bootstrap 5, v5.0.0, word hieronder gedokumenteer. Hulle weerspieël nie die bykomende veranderinge wat hierbo gewys word nie.

Afhanklikhede

Het jQuery laat val.
Opgegradeer van Popper v1.x na Popper v2.x.
Het Libsass met Dart Sass vervang aangesien ons Sass-samesteller gegewe Libsass afgekeur is.
Van Jekyll na Hugo migreer vir die bou van ons dokumentasie

Blaaier ondersteuning

Internet Explorer 10 en 11 laat val
Microsoft Edge < 16 laat val (Legacy Edge)
Firefox < 60 laat val
Safari laat vaar < 12
iOS Safari < 12 laat val
Chrome < 60 laat val

Dokumentasie veranderinge

Herontwerpte tuisblad, dokumentuitleg en voetskrif.
Nuwe Pakkiegids bygevoeg .
Nuwe Pasmaak-afdeling bygevoeg , wat v4 se Tema-bladsy vervang , met nuwe besonderhede oor Sass, globale konfigurasie-opsies, kleurskemas, CSS-veranderlikes, en meer.
Het alle vormdokumentasie in 'n nuwe Vorms-afdeling herorganiseer en die inhoud in meer gefokusde bladsye opgebreek.
Op dieselfde manier het die Uitleg-afdeling opgedateer om roosterinhoud duideliker uit te beeld.
Hernoem "Navs" komponent bladsy na "Navs & Tabs".
Hernoem "Tjeks"-bladsy na "Tjeks en radio's".
Het die navigasiebalk herontwerp en 'n nuwe subnav bygevoeg om dit makliker te maak om by ons werwe en dokumentweergawes rond te kom.
Bygevoeg nuwe sleutelbordkortpad vir die soekveld: Ctrl + /.

Sass

Ons het die standaard Sass-kaartsamevoegings laat vaar om dit makliker te maak om oortollige waardes te verwyder. Hou in gedagte dat jy nou alle waardes in die Sass-kaarte moet definieer, soos $theme-colors. Kyk hoe om Sass-kaarte te hanteer .
BreekHernoem color-yiq()funksie en verwante veranderlikes na color-contrast()aangesien dit nie meer verband hou met YIQ-kleurruimte nie. Sien #30168.
- $yiq-contrasted-thresholdword hernoem na $min-contrast-ratio.
- $yiq-text-darken $yiq-text-lightword onderskeidelik hernoem na $color-contrast-darken $color-contrast-light.
BreekMedianavrae-mengparameters het verander vir 'n meer logiese benadering.
- media-breakpoint-down()gebruik die breekpunt self in plaas van die volgende breekpunt (bv., media-breakpoint-down(lg)in plaas van media-breakpoint-down(md)teiken kykpoorte kleiner as lg).
- Net so gebruik die tweede parameter in media-breakpoint-between()ook die breekpunt self in plaas van die volgende breekpunt (bv. media-between(sm, lg)in plaas van media-breakpoint-between(sm, md)teiken-kykpoorte tussen smen lg).
BreekVerwyder drukstyle en $enable-print-stylesveranderlike. Drukvertoonklasse is nog steeds beskikbaar. Sien #28339 .
BreekLaat val color(), theme-color(), en gray()funksioneer ten gunste van veranderlikes. Sien #29083 .
BreekHernoem theme-color-level()funksie na color-level()en aanvaar nou enige kleur wat jy wil hê in plaas van net $theme-colorkleure. Sien #29083 Pasop: color-level() is later ingeval v5.0.0-alpha3.
BreekHernoem $enable-prefers-reduced-motion-media-queryen $enable-pointer-cursor-for-buttonsna $enable-reduced-motionen $enable-button-pointersvir beknoptheid.
BreekHet die bg-gradient-variant()mengsel verwyder. Gebruik die .bg-gradientklas om gradiënte by elemente te voeg in plaas van die gegenereerde .bg-gradient-*klasse.
Breek Verwyder voorheen verouderde mengsels:
- hover, hover-focus, plain-hover-focus, enhover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(het ook die gepaardgaande nutsklas laat vaar, .text-hide)
- visibility()
- form-control-focus()
BreekHernoem scale-color()funksie na shift-color()om botsing met Sass se eie kleurskaalfunksie te vermy.
box-shadowmixins laat nou nullwaardes toe en val nonevan verskeie argumente af. Sien #30394 .
Die border-radius()mixin het nou 'n verstekwaarde.

Kleur stelsel

Die kleurstelsel waarmee gewerk color-level()en $theme-color-intervalverwyder is ten gunste van 'n nuwe kleurstelsel. Alle lighten()en darken()funksies in ons kodebasis word vervang deur tint-color()en shade-color(). Hierdie funksies sal die kleur met óf wit óf swart meng in plaas daarvan om die ligheid daarvan met 'n vaste hoeveelheid te verander. Die shift-color()kleur sal óf tint óf 'n kleur skaker, afhangende van of die gewigsparameter positief of negatief is. Sien #30622 vir meer besonderhede.
Bygevoeg nuwe kleure en skakerings vir elke kleur, wat nege afsonderlike kleure vir elke basiskleur verskaf, as nuwe Sass-veranderlikes.
Verbeterde kleurkontras. Gestampte kleurkontrasverhouding van 3:1 tot 4.5:1 en opgedateerde blou, groen, siaan en pienk kleure om WCAG 2.1 AA kontras te verseker. Het ook ons kleurkontraskleur verander van $gray-900na $black.
Om ons kleurstelsel te ondersteun, het ons nuwe pasgemaakte tint-color()en shade-color()funksies bygevoeg om ons kleure gepas te meng.

Roosteropdaterings

Nuwe breekpunt! Bygevoeg nuwe xxlbreekpunt vir 1400pxen op. Geen veranderinge aan alle ander breekpunte nie.
Verbeterde geute. Geute is nou in rems gestel en is nouer as v4 ( 1.5rem, of ongeveer 24px, af van 30px). Dit bring ons roosterstelsel se geute in lyn met ons spasiëringshulpmiddels.
- Bygevoeg nuwe geute klas ( .g-*, .gx-*, en .gy-*) om horisontale/vertikale geute, horisontale geute en vertikale geute te beheer.
- BreekHernoem .no-guttersna .g-0om by nuwe geuthulpprogramme te pas.
Kolomme het nie meer position: relativetoegepas nie, so jy sal dalk .position-relativeby sommige elemente moet byvoeg om daardie gedrag te herstel.
BreekVerskeie .order-*klasse laat val wat dikwels ongebruik gegaan het. Ons verskaf nou net .order-1aan .order-5uit die boks.
BreekHet die .mediakomponent laat val aangesien dit maklik met nutsprogramme gerepliseer kan word. Sien #28265 en die flex utilities-bladsy vir 'n voorbeeld .
Breek bootstrap-grid.cssis nou net van toepassing box-sizing: border-boxop die kolom in plaas daarvan om die globale boksgrootte terug te stel. Op hierdie manier kan ons roosterstyle sonder inmenging op meer plekke gebruik word.
$enable-grid-classesdeaktiveer nie meer die generering van houerklasse nie. Sien #29146.
Het die make-colmixin opgedateer na verstek na gelyke kolomme sonder 'n gespesifiseerde grootte.

Inhoud, herlaai, ens

RFS is nou by verstek geaktiveer. Opskrifte wat diefont-size()mixin gebruik, sal hulle outomaties aanpasfont-sizena skaal met die viewport. Hierdie kenmerk is voorheen ingeteken met v4.
BreekHet ons vertoontipografie hersien om ons $display-*veranderlikes te vervang en met 'n $display-font-sizesSass-kaart. Verwyder ook die individuele $display-*-weightveranderlikes vir 'n enkele $display-font-weighten aangepaste font-sizes.
Het twee nuwe .display-*opskrifgroottes bygevoeg, .display-5en .display-6.
Skakels word by verstek onderstreep (nie net as jy beweeg nie), tensy dit deel is van spesifieke komponente.
Herontwerp tabelle om hul style te verfris en hulle te herbou met CSS veranderlikes vir meer beheer oor stilering.
BreekGeneste tabelle erf nie meer style nie.
Breek .thead-lighten .thead-darkword laat vaar ten gunste van die .table-*variantklasse wat vir alle tabelelemente ( thead, tbody, tfoot, tr, then td) gebruik kan word.
BreekDie table-row-variant()mixin word hernoem na table-variant()en aanvaar slegs 2 parameters: $color(kleurnaam) en $value(kleurkode). Die randkleur en aksentkleure word outomaties bereken op grond van die tabelfaktorveranderlikes.
Verdeel tabelselvulveranderlikes in -yen -x.
BreekKlas gedaal .pre-scrollable. Sien #29135
Breek .text-*nutsprogramme voeg nie meer sweef- en fokustoestande by skakels nie. .link-*helperklasse kan eerder gebruik word. Sien #29267
BreekKlas gedaal .text-justify. Sien #29793
Breek <hr>elemente gebruik nou in heightplaas van borderom die sizekenmerk beter te ondersteun. Dit maak dit ook moontlik om opvullingshulpmiddels te gebruik om dikker verdelers te skep (bv. <hr class="py-1">).
Stel verstek horisontaal padding-leftaan <ul>en <ol>elemente van blaaier verstek 40pxna 2rem.
Bygevoeg $enable-smooth-scroll, wat scroll-behavior: smoothwêreldwyd van toepassing is—behalwe vir gebruikers wat vir verminderde beweging deur middel van prefers-reduced-motionmedianavraag vra. Sien #31877

RTL

Horisontale rigting-spesifieke veranderlikes, nutsprogramme en mixins is almal hernoem om logiese eienskappe te gebruik soos dié wat in flexbox-uitlegte gevind word—bv. starten endin plaas van leften right.

Vorms

Nuwe drywende vorms bygevoeg! Ons het die voorbeeld van swewende etikette bevorder tot volledig ondersteunde vormkomponente. Sien die nuwe drywende etikette-bladsy.
Breek Gekonsolideerde inheemse en pasgemaakte vormelemente. Merkblokkies, radio's, keuses en ander insette wat oorspronklike en pasgemaakte klasse in v4 gehad het, is gekonsolideer. Nou is byna al ons vormelemente heeltemal pasgemaak, die meeste sonder die behoefte aan persoonlike HTML.
- .custom-control.custom-checkboxis nou .form-check.
- .custom-control.custom-custom-radiois nou .form-check.
- .custom-control.custom-switchis nou .form-check.form-switch.
- .custom-selectis nou .form-select.
- .custom-fileen .form-fileis vervang deur pasgemaakte style bo-op .form-control.
- .custom-rangeis nou .form-range.
- Geval inheemse .form-control-fileen .form-control-range.
BreekGeval .input-group-appenden .input-group-prepend. Jy kan nou net knoppies en .input-group-textas direkte kinders van die invoergroepe byvoeg.
Die jarelange ontbrekende grensradius op invoergroep met valideringterugvoerfout word uiteindelik reggestel deur 'n bykomende .has-validationklas by insetgroepe met validering by te voeg.
Breek Vormspesifieke uitlegklasse vir ons roosterstelsel laat val. Gebruik ons rooster en nutsprogramme in plaas van .form-group, .form-row, of .form-inline.
BreekVormetikette vereis nou .form-label.
Breek .form-textstel nie meer in nie display, wat jou toelaat om inlyn- of blokhulpteks te skep soos jy wil net deur die HTML-element te verander.
Vormkontroles wat nie meer gebruik word nie, is vasgestel heightwaar moontlik, maar word uitgestel min-heightom aanpassing en versoenbaarheid met ander komponente te verbeter.
Validasie-ikone word nie meer toegepas op <select>s met multiple.
Herrangskik bron Sass-lêers onder scss/forms/, insluitend invoergroepstyle.

Komponente

Verenigde paddingwaardes vir waarskuwings, broodkrummels, kaarte, aftreklys, lysgroepe, modale, popovers en gereedskapwenke om op ons $spacerveranderlike gebaseer te wees. Sien #30564 .

Trekklavier

Bygevoeg nuwe trekklavier komponent .

Waarskuwings

Waarskuwings het nou voorbeelde met ikone .
Verwyder pasgemaakte style vir <hr>s in elke waarskuwing aangesien hulle reeds gebruik currentColor.

Kentekens

BreekHet alle .badge-*kleurklasse vir agtergrondhulpmiddels laat val (bv. gebruik .bg-primaryin plaas van .badge-primary).
BreekGeval — gebruik eerder .badge-pilldie hulpprogram..rounded-pill
BreekVerwyder beweeg- en fokusstyle vir <a>en <button>elemente.
Verhoogde verstekvulling vir kentekens van .25em/ .5emna .35em/ .65em.

Broodkrummels

Vereenvoudig die verstekvoorkoms van broodkrummels deur padding, background-color, en te verwyder border-radius.
Nuwe CSS-pasgemaakte eiendom bygevoeg --bs-breadcrumb-dividervir maklike aanpassing sonder om CSS te hersaamstel.

Knoppies

Breek Wisselknoppies , met merkblokkies of radio's, benodig nie meer JavaScript nie en het nuwe opmaak. Ons benodig nie meer 'n wikkelelement nie, voeg.btn-checkby die<input>, en koppel dit met enige.btnklasse op die<label>. Sien #30650 . Die dokumente hiervoor het van ons Knoppies-bladsy na die nuwe Vorms-afdeling geskuif.
Breek Geval .btn-blockvir nutsdienste. In plaas daarvan om .btn-blockop die te gebruik .btn, draai jou knoppies toe met .d-grid'n .gap-*nutsding om hulle te spasieer soos nodig. Skakel oor na responsiewe klasse vir selfs meer beheer daaroor. Lees die dokumente vir 'n paar voorbeelde.
Het ons button-variant()en button-outline-variant()mixins opgedateer om bykomende parameters te ondersteun.
Opgedateerde knoppies om verhoogde kontras op sweef en aktiewe toestande te verseker.
Gedeaktiveerde knoppies het nou pointer-events: none;.

Kaart

BreekGeval .card-deckten gunste van ons rooster. Draai jou kaarte in kolomklasse toe en voeg 'n ouerhouer .row-cols-*by om kaartdekke te herskep (maar met meer beheer oor responsiewe belyning).
BreekGeval .card-columnsten gunste van Masonry. Sien #28922 .
BreekVervang die .cardgebaseerde trekklavier met 'n nuwe Trekklavier-komponent .

Karrousel

Bygevoeg nuwe .carousel-darkvariant vir donker teks, kontroles en aanwysers (ideaal vir ligter agtergronde).
Vervang chevron-ikone vir karrouselkontroles met nuwe SVG's van Bootstrap Icons .

Maak toe-knoppie

BreekHernoem .closena .btn-closevir 'n minder generiese naam.
Maak toe-knoppies gebruik nou 'n background-image(ingebedde SVG) in plaas van 'n ×in die HTML, wat dit makliker maak om aan te pas sonder dat dit nodig is om aan jou opmaak te raak.
.btn-close-whiteNuwe variant bygevoeg wat gebruik filter: invert(1)word om hoër kontras te aktiveer om ikone teen donkerder agtergronde te verwyder.

Inval

Verwyder rol-ankering vir trekklaviere.

Aftrekkies

Bygevoeg nuwe .dropdown-menu-darkvariant en gepaardgaande veranderlikes vir op-aanvraag donker dropdowns.
Bygevoeg nuwe veranderlike vir $dropdown-padding-x.
Het die aftrekverdeler verdonker vir verbeterde kontras.
BreekAl die gebeure vir die aftreklys word nou op die aftrek-skakelknoppie geaktiveer en dan opgeborrel na die ouerelement.
Aftrekkieslys het nou 'n data-bs-popper="static"kenmerk gestel wanneer die posisionering van die aftreklys staties is, of aftreklys in die navigasiebalk is. Dit word bygevoeg deur ons JavaScript en help ons om pasgemaakte posisiestyle te gebruik sonder om met Popper se posisionering in te meng.
BreekOpsie vir dropdown plugin laat val flipten gunste van inheemse Popper-konfigurasie. U kan nou die flipgedrag deaktiveer deur 'n leë skikking vir fallbackPlacementsopsie in flip - wysiger deur te gee.
Aftrekkieslyste kan nou klikbaar wees met 'n nuwe autoCloseopsie om die outomatiese toemaakgedrag te hanteer . U kan hierdie opsie gebruik om die klik binne of buite die aftreklys te aanvaar om dit interaktief te maak.
Aftrekkies ondersteun nou .dropdown-items toegedraai in <li>s.

Jumbotron

BreekHet die jumbotron-komponent laat val aangesien dit met nutsprogramme gerepliseer kan word. Sien ons nuwe Jumbotron-voorbeeld vir 'n demo.

Lys groep

Nuwe .list-group-numberedwysiger by lysgroepe gevoeg.

Navs en oortjies

Het nuwe nullveranderlikes vir font-size, font-weight, color, en :hover colorby die .nav-linkklas gevoeg.

Navbars

BreekNavbars benodig nou 'n houer binne (om spasiëringvereistes en CSS vereis drasties te vereenvoudig).
BreekDie .activeklas kan nie meer op .nav-items toegepas word nie, dit moet direk op .nav-links toegepas word.

Offcanvas

Het die nuwe offcanvas-komponent bygevoeg .

Paginering

Pagineringskakels het nou aanpasbare margin-leftwat dinamies op alle hoeke afgerond is wanneer dit van mekaar geskei word.
Bygevoeg transitions by paginering skakels.

Popovers

BreekHernoem .arrowna .popover-arrowin ons verstek popover-sjabloon.
Hernoem whiteListopsie na allowList.

Spinners

Spinners eer nou prefers-reduced-motion: reducedeur animasies te vertraag. Sien #31882 .
Verbeterde draaier vertikale belyning.

Heilbroodjies

Heilbroodjies kan nou in ' n geposisioneer word .toast-containermet behulp van posisioneringshulpmiddels .
Verander verstek roosterbrood duur na 5 sekondes.
Van roosterbrood verwyder overflow: hiddenen vervang met behoorlike border-radiuss met calc()funksies.

Gereedskapwenke

BreekHernoem .arrowna .tooltip-arrowin ons verstek nutswenk-sjabloon.
BreekDie verstekwaarde vir die fallbackPlacementsword verander na ['top', 'right', 'bottom', 'left']vir 'n beter plasing van springer-elemente.
BreekHernoem whiteListopsie na allowList.

Nutsprogramme

BreekVerskeie nutsprogramme hernoem om logiese eiendomsname in plaas van rigtingname te gebruik met die byvoeging van RTL-ondersteuning:
- Hernoem .left-*en .right-*na .start-*en .end-*.
- Hernoem .float-leften .float-rightna .float-starten .float-end.
- Hernoem .border-leften .border-rightna .border-starten .border-end.
- Hernoem .rounded-leften .rounded-rightna .rounded-starten .rounded-end.
- Hernoem .ml-*en .mr-*na .ms-*en .me-*.
- Hernoem .pl-*en .pr-*na .ps-*en .pe-*.
- Hernoem .text-leften .text-rightna .text-starten .text-end.
BreekNegatiewe marges by verstek gedeaktiveer.
Nuwe klas bygevoeg .bg-bodyom die agtergrond vinnig <body>op bykomende elemente te stel.
Bygevoeg nuwe posisie nutsprogramme vir top, right, bottom, en left. Waardes sluit in 0, 50%, en 100%vir elke eiendom.
Bygevoeg nuwe .translate-middle-xen .translate-middle-ynutsprogramme om horisontaal of vertikaal absolute/vaste geposisioneerde elemente te sentreer.
border-widthNuwe nutsprogramme bygevoeg .
BreekHernoem .text-monospacena .font-monospace.
BreekVerwyder .text-hideaangesien dit 'n verouderde metode is om teks te versteek wat nie meer gebruik behoort te word nie.
Bygevoeg .fs-*nutsprogramme vir font-sizenutsprogramme (met RFS geaktiveer). Hierdie gebruik dieselfde skaal as HTML se verstekopskrifte (1-6, groot tot klein), en kan via Sass-kaart gewysig word.
BreekHernoem .font-weight-*nutsprogramme .fw-*vir bondigheid en konsekwentheid.
BreekHernoem .font-style-*nutsprogramme .fst-*vir bondigheid en konsekwentheid.
Bygevoeg .d-gridom nutsprogramme en nuwe gapnutsprogramme ( .gap) vir CSS Grid en flexbox-uitlegte te vertoon.
BreekVerwyder .rounded-smen rounded-lg, en het 'n nuwe skaal van klasse bekendgestel, .rounded-0na .rounded-3. Sien #31687 .
Bygevoeg nuwe line-heightnutsprogramme: .lh-1, .lh-sm, .lh-baseen .lh-lg. Kyk hier .
Het die .d-nonenutsprogram in ons CSS geskuif om dit meer gewig te gee bo ander vertoonnutsprogramme.
Die .visually-hidden-focusablehelper is uitgebrei om ook op houers te werk, met behulp van :focus-within.

Helpers

Breek Responsiewe inbedhelpers is hernoem na verhoudinghelpers met nuwe klasname en verbeterde gedrag, sowel as 'n nuttige CSS-veranderlike.
- Klasse is hernoem om byna xin die aspekverhouding te verander. Byvoorbeeld, .ratio-16by9is nou .ratio-16x9.
- Ons het die .embed-responsive-itemen elementgroepkieser laat vaar ten gunste van 'n eenvoudiger .ratio > *keurder. Nie meer klas is nodig nie, en die verhouding helper werk nou met enige HTML element.
- Die $embed-responsive-aspect-ratiosSass-kaart is hernoem na $aspect-ratiosen sy waardes is vereenvoudig om die klasnaam en die persentasie as die key: valuepaar in te sluit.
- CSS-veranderlikes word nou gegenereer en ingesluit vir elke waarde in die Sass-kaart. Verander die --bs-aspect-ratioveranderlike op die .ratioom enige pasgemaakte aspekverhouding te skep .
Breek "Skermleser"-klasse is nou "visueel versteekte" klasse .
- Het die Sass-lêer verander van scss/helpers/_screenreaders.scssnascss/helpers/_visually-hidden.scss
- Hernoem .sr-onlyen .sr-only-focusablena .visually-hiddenen.visually-hidden-focusable
- Hernoem sr-only()en sr-only-focusable()meng na visually-hidden()en visually-hidden-focusable().
bootstrap-utilities.csssluit nou ook ons helpers in. Helpers hoef nie meer in gepasmaakte geboue ingevoer te word nie.

JavaScript

Het jQuery-afhanklikheid laat val en inproppe herskryf om in gewone JavaScript te wees.
BreekData-kenmerke vir alle JavaScript-inproppe is nou naamspasiëring om te help om Bootstrap-funksionaliteit van derde partye en jou eie kode te onderskei. Byvoorbeeld, ons gebruik data-bs-togglein plaas van data-toggle.
Alle inproppe kan nou 'n CSS-kieser as die eerste argument aanvaar. Jy kan óf 'n DOM-element óf enige geldige CSS-kieser deurgee om 'n nuwe instansie van die inprop te skep:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigkan deurgegee word as 'n funksie wat die Bootstrap se verstek Popper-konfigurasie as 'n argument aanvaar, sodat jy hierdie verstekkonfigurasie op jou manier kan saamvoeg. Van toepassing op aftreklys, popovers en gereedskapwenke.
Die verstekwaarde vir die fallbackPlacementsword verander na ['top', 'right', 'bottom', 'left']vir beter plasing van Popper-elemente. Van toepassing op aftreklys, popovers en gereedskapwenke.
Verwyder onderstreep van publieke statiese metodes soos _getInstance()→ getInstance().