Flutningur í v5

v5.2.0

Endurnærð hönnun

Bootstrap v5.2.0 býður upp á fíngerða hönnunaruppfærslu fyrir handfylli af íhlutum og eiginleikum í verkefninu, einkum í gegnum fáguð border-radiusgildi á hnöppum og formstýringum . Skjölin okkar hafa einnig verið uppfærð með nýrri heimasíðu, einfaldara skjalaskipulagi sem dregur ekki lengur saman hluta hliðarstikunnar og fleiri áberandi dæmum um Bootstrap Icons .

Fleiri CSS breytur

Við höfum uppfært alla hluti okkar til að nota CSS breytur. Þó að Sass styðji enn allt, hefur hver íhlutur verið uppfærður til að innihalda CSS breytur í grunnflokkum íhluta (td .btn), sem gerir kleift að sérsníða Bootstrap í rauntíma. Í síðari útgáfum munum við halda áfram að auka notkun okkar á CSS breytum í skipulag okkar, eyðublöð, hjálpartæki og tól. Lestu meira um CSS breytur í hverjum íhlut á viðkomandi skjalasíðum.

CSS breytunotkun okkar verður nokkuð ófullnægjandi þar til Bootstrap 6. Þó að við myndum gjarnan vilja innleiða þetta að fullu yfir alla línuna, þá eiga þeir á hættu að valda brotlegum breytingum. Til dæmis, að setja $alert-border-width: var(--bs-border-width)inn frumkóðann okkar brýtur hugsanlega Sass í eigin kóða ef þú varst að gera það $alert-border-width * 2af einhverjum ástæðum.

Sem slík, þar sem mögulegt er, munum við halda áfram að þrýsta á fleiri CSS breytur, en vinsamlegast viðurkenna að útfærsla okkar gæti verið lítillega takmörkuð í v5.

Nýtt_maps.scss

Bootstrap v5.2.0 kynnti nýja Sass skrá með _maps.scss. Það dregur út nokkur Sass kort _variables.scsstil að laga vandamál þar sem uppfærslur á upprunalegu korti voru ekki notaðar á aukakort sem lengja þau. Til dæmis $theme-colorsvar ekki verið að beita uppfærslum á önnur þemakort sem treystu á $theme-colors, sem rjúfa lykilaðlögunarvinnuflæði. Í stuttu máli, Sass hefur takmörkun þar sem þegar sjálfgefna breyta eða kort hefur verið notað er ekki hægt að uppfæra hana. Það er svipaður galli á CSS breytum þegar þær eru notaðar til að semja aðrar CSS breytur.

Þetta er ástæðan fyrir því að breytilegar sérstillingar í Bootstrap verða að koma á eftir @import "functions", en á undan @import "variables"og restinni af innflutningsstafla okkar. Sama á við um Sass kort—þú verður að hnekkja sjálfgefnum stillingum áður en þau venjast. Eftirfarandi kort hafa verið færð í hið nýja _maps.scss:

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

Sérsniðin Bootstrap CSS smíði þín ætti nú að líta einhvern veginn svona út með sérstökum kortainnflutningi.

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

Ný veitur

• Stækkuð font-weighttól til að innihalda .fw-semiboldfyrir hálffeitt leturgerðir.
• Stækkuð border-radiustól til að innihalda tvær nýjar stærðir .rounded-4og .rounded-5, fyrir fleiri valkosti.

Viðbótarbreytingar

• $enable-container-classesNýr valkostur kynntur . — Nú þegar valið er inn í tilraunaútlitið CSS Grid, .container-*verða flokkar samt settir saman, nema þessi valkostur sé stilltur á false. Gámar halda nú einnig rennugildum sínum.

• Offcanvas hluti hefur nú móttækileg afbrigði . Upprunalega .offcanvasflokkurinn helst óbreyttur - hann felur efni á öllum útsýnisgáttum. Til að gera það móttækilegt skaltu breyta þeim .offcanvasflokki í hvaða .offcanvas-{sm|md|lg|xl|xxl}flokk sem er.

• Þykkri borðskil eru nú valin. — Við höfum fjarlægt þykkari og erfiðara að hnekkja ramma á milli töfluhópa og fært hann í valfrjálsan flokk sem þú getur notað, .table-group-divider. Sjá töfluskjöl til að fá dæmi.

• Scrollspy hefur verið endurskrifað til að nota Intersection Observer API , sem þýðir að þú þarft ekki lengur hlutfallslega foreldra umbúðir, úreltiroffsetstillingar og fleira. Leitaðu að Scrollspy útfærslunum þínum til að vera nákvæmari og samkvæmari í nav auðkenningu þeirra.

• Popovers og verkfæraleiðbeiningar nota nú CSS breytur. Sumar CSS breytur hafa verið uppfærðar frá Sass hliðstæðum sínum til að fækka breytum. Þess vegna hafa þrjár breytur verið úreltar í þessari útgáfu: $popover-arrow-color, $popover-arrow-outer-color, og $tooltip-arrow-color.

• .text-bg-{color}Nýjum aðstoðarmönnum bætt við . Í stað þess að stilla einstakling .text-*og .bg-*tól, geturðu nú notað hjálparana til.text-bg-* að stilla background-colormeð andstæðum forgrunni color.

• Bætt við .form-check-reversebreytingum til að snúa röð merkimiða og tengdra gátreita/útvarpstækja.

• Bætti röndóttum dálkum stuðningi við töflur í gegnum nýja .table-striped-columnsbekkinn.

Fyrir heildarlista yfir breytingar, sjá v5.2.0 verkefnið á GitHub .

v5.1.0

• Bætti við tilraunastuðningi fyrir CSS Grid skipulag . — Þetta er í vinnslu og er ekki enn tilbúið til notkunar í framleiðslu, en þú getur valið nýja eiginleikann í gegnum Sass. Til að virkja það skaltu slökkva á sjálfgefna hnitanetinu með því að stilla $enable-grid-classes: falseog virkja CSS töfluna með því að stilla $enable-cssgrid: true.

• Uppfærðar siglingar til að styðja við offcanvas. — Bættu við skúffum fyrir utan striga í hvaða siglingastiku sem er með móttækilegum .navbar-expand-*flokkum og einhverjum offcanvas merkingum.

• Nýjum staðsetningarhluta bætt við . — Nýjasti hluti okkar, leið til að bjóða upp á tímabundnar blokkir í stað raunverulegs efnis til að gefa til kynna að eitthvað sé enn að hlaðast inn á síðuna þína eða appið.

• Collapse tappi styður nú lárétta hrun . — Bættu .collapse-horizontalvið til .collapseað fella saman í widthstað height. Forðastu endurmálun vafra með því að stilla a min-heighteða height.

• Bætt við nýjum stafla og lóðréttum reglum. — Notaðu fljótt marga flexbox eiginleika til að búa fljótt til sérsniðnar útlit með stöflum . Veldu úr láréttum ( .hstack) og lóðréttum ( .vstack) stöflum. Bættu við lóðréttum skilrúmum svipað og <hr>þætti með nýju .vrhjálparunum .

• Bætt við nýjum alþjóðlegum :rootCSS breytum. — Bætti nokkrum nýjum CSS breytum við :rootstigið til að stjórna <body>stílum. Fleiri eru í vinnslu, þar á meðal í tólum okkar og íhlutum, en í bili lestu upp CSS breytur í Customize hlutanum .

• Endurskoðaði lita- og bakgrunnstæki til að nota CSS breytur og bætti við nýjum ógagnsæi texta og ógagnsæi í bakgrunni . — .text-* og .bg-*tól eru nú smíðuð með CSS breytum og rgba()litagildum, sem gerir þér kleift að sérsníða hvaða tól sem er með nýjum ógagnsæi tólum.

• Bætti við nýjum sýnishornum til að sýna hvernig á að sérsníða hluti okkar. — Dragðu tilbúið til að nota sérsniðna íhluti og önnur algeng hönnunarmynstur með nýju dæmunum okkar . Inniheldur fætur , fellilista , listahópa og gerðir .

• Fjarlægði ónotaða staðsetningarstíl úr popovers og verkfæraleiðbeiningum þar sem þeir eru eingöngu meðhöndlaðir af Popper. $tooltip-marginhefur verið úrelt og stillt á nullí ferlinu.

Viltu frekari upplýsingar? Lestu v5.1.0 bloggfærsluna.

Ósjálfstæði

• Sleppti jQuery.
• Uppfært úr Popper v1.x í Popper v2.x.
• Skipti út Libsass fyrir Dart Sass þar sem Sass þýðandinn okkar gaf Libsass var úreltur.
• Flutti frá Jekyll til Hugo fyrir að byggja upp skjölin okkar

Stuðningur við vafra

• Sleppti Internet Explorer 10 og 11
• Sleppti Microsoft Edge < 16 (Legacy Edge)
• Sleppti Firefox < 60
• Sleppti Safari < 12
• Sleppti iOS Safari < 12
• Sleppti Chrome < 60

Skjalabreytingar

• Endurhönnuð heimasíða, skjalaskipulag og fótur.
• Bætt við nýjum pakkahandbók .
• Bætti við nýjum sérsniðna hluta , í stað þemasíðu v4 , með nýjum upplýsingum um Sass, alþjóðlegum stillingarvalkostum, litavali, CSS breytum og fleira.
• Endurskipulögði öll eyðublaðaskjöl í nýjan Eyðublaðahluta og skipti efninu í sundur í einbeittari síður.
• Að sama skapi uppfærði útlitshlutann til að útfæra innihald ristarinnar betur.
• Endurnefnt „Navs“ hlutasíðu í „Navs & Tabs“.
• Endurnefnt „Ávísanir“ síðu í „Ávísanir og útvarp“.
• Endurhannaði siglingastikuna og bætti við nýrri undirsjá til að auðvelda þér að komast um síður okkar og skjalaútgáfur.
• Bætt við nýjum flýtilykla fyrir leitaarreitinn: Ctrl + /.

Sass

• Við höfum sleppt sjálfgefnum Sass kortasamsetningum til að gera það auðveldara að fjarlægja óþarfa gildi. Hafðu í huga að þú verður nú að skilgreina öll gildi í Sass kortunum eins og $theme-colors. Skoðaðu hvernig á að takast á við Sass kort .

• BrotEndurnefna color-yiq()fall og tengdar breytur color-contrast()þar sem það er ekki lengur tengt YIQ litarými. Sjá #30168.

  • $yiq-contrasted-thresholder breytt í $min-contrast-ratio.
  • $yiq-text-darkog $yiq-text-lighteru í sömu röð endurnefnd í $color-contrast-darkog $color-contrast-light​​.

• BrotFjölmiðlafyrirspurnarblöndunarfæribreytur hafa breyst fyrir rökréttari nálgun.

  • media-breakpoint-down()notar brotpunktinn sjálfan í stað næsta brotpunkts (td í media-breakpoint-down(lg)stað þess að miða við media-breakpoint-down(md)skoðanaglugga sem eru minni en lg).
  • Að sama skapi notar önnur færibreytan í media-breakpoint-between()einnig brotpunktinn sjálfan í stað næsta brotpunkts (td í media-between(sm, lg)stað media-breakpoint-between(sm, md)marksýnisgátta á milli smog lg).

• BrotFjarlægði prentstíl og $enable-print-stylesbreytu. Prentsýningarnámskeið eru enn til staðar. Sjá #28339 .

• BrotSleppt color(), theme-color(), og gray()virka í þágu breyta. Sjá #29083 .

• BrotEndurnefnd theme-color-level()aðgerð í color-level()og ​​samþykkir nú hvaða lit sem þú vilt í stað $theme-colorlita eingöngu. Sjá #29083 Passaðu þig: color-level() var seinna sleppt inn v5.0.0-alpha3.

• BrotEndurnefnt $enable-prefers-reduced-motion-media-queryog $enable-pointer-cursor-for-buttonstil $enable-reduced-motionog $enable-button-pointersí stuttu máli.

• BrotFjarlægði bg-gradient-variant()blönduna. Notaðu .bg-gradientbekkinn til að bæta halla við þætti í staðinn fyrir .bg-gradient-*flokkana sem myndaðu.

• Brot Fjarlægðar áður úreltar blöndur:

  • hover, hover-focus, plain-hover-focus, oghover-focus-active
  • float()
  • form-control-mixin()
  • nav-divider()
  • retina-img()
  • text-hide()(sleppti einnig tilheyrandi gagnsemisflokki, .text-hide)
  • visibility()
  • form-control-focus()

• BrotEndurnefnt scale-color()aðgerð til shift-color()að forðast árekstur við eigin litaskalaaðgerð Sass.

• box-shadowmixins leyfa nú nullgildi og falla nonefrá mörgum rökum. Sjá #30394 .

• Blandan border-radius()hefur nú sjálfgefið gildi.

Litakerfi

• Litakerfið sem virkaði með color-level()og $theme-color-intervalvar fjarlægt í þágu nýs litakerfis. Öllum lighten()og darken()aðgerðum í kóðagrunninum okkar er skipt út fyrir tint-color()og shade-color(). Þessar aðgerðir munu blanda litnum við annað hvort hvítt eða svart í stað þess að breyta léttleika hans um ákveðið magn. Hann shift-color()mun annað hvort lita eða skyggja lit eftir því hvort þyngdarbreyta hans er jákvæð eða neikvæð. Sjá #30622 fyrir frekari upplýsingar.

• Bætt við nýjum litum og tónum fyrir hvern lit, sem gefur níu aðskilda liti fyrir hvern grunnlit, sem nýjar Sass breytur.

• Bætt litaskil. Skoðað litaskilahlutfall frá 3:1 til 4,5:1 og uppfærðir bláir, grænir, blár og bleikir litir til að tryggja WCAG 2.1 AA birtuskil. Breyttum líka litaskilalitnum okkar úr $gray-900í $black.

• Til að styðja við litakerfið okkar höfum við bætt við nýjum sérsniðnum tint-color()og shade-color()aðgerðum til að blanda litunum okkar á viðeigandi hátt.

Grid uppfærslur

• Nýr brotastaður! Bætt við nýjum xxlbrotapunkti fyrir 1400pxog upp. Engar breytingar á öllum öðrum brotastöðum.

• Endurbætt þakrennur. Rennur eru nú settar í rems og eru mjórri en v4 ( 1.5rem, eða um 24px, niður frá 30px). Þetta samræmir þakrennur kerfiskerfisins okkar við bilið okkar.

  • Bætt við nýjum þakrennum ( .g-*, .gx-*, og .gy-*) til að stjórna láréttum/lóðréttum rennum, láréttum rennum og lóðréttum rennum.
  • BrotEndurnefnt .no-guttersí til .g-0að passa við nýjar þakrennuveitur.

• Dálkar hafa ekki lengur átt position: relativevið, svo þú gætir þurft að bæta .position-relativevið sumum þáttum til að endurheimta þá hegðun.

• BrotHætti nokkrum .order-*bekkjum sem oft fóru ónotaðir. Við veitum nú aðeins .order-1til .order-5úr kassanum.

• BrotSleppti .mediaíhlutnum þar sem auðvelt er að endurtaka hann með tólum. Sjá #28265 og flex utilities síðuna til að fá dæmi .

• Brot bootstrap-grid.cssá nú aðeins við box-sizing: border-boxum dálkinn í stað þess að endurstilla alþjóðlega kassastærð. Þannig er hægt að nota ristastílana okkar á fleiri stöðum án truflana.

• $enable-grid-classesslekkur ekki lengur á myndun gámaflokka lengur. Sjá #29146.

• Uppfærði make-colmixin í sjálfgefið í jafna dálka án tiltekinnar stærðar.

Efni, endurræsa osfrv

• RFS er nú sjálfgefið virkt. Fyrirsagnir sem notafont-size()mixin munu sjálfkrafa stilla þærfont-sizeað mælikvarða með útsýnisglugganum. Þessi eiginleiki var áður valinn með v4.

• BrotEndurskoðaði leturgerð skjásins okkar til að skipta um $display-*breytur okkar og með $display-font-sizesSass korti. Fjarlægði einnig einstakar $display-*-weightbreytur fyrir eina $display-font-weightog leiðrétta font-sizes.

• Bætt við tveimur nýjum .display-*fyrirsagnarstærðum .display-5og .display-6.

• Tenglar eru sjálfgefið undirstrikaðir (ekki bara á sveimi), nema þeir séu hluti af sérstökum hlutum.

• Endurhönnuðu töflur til að hressa upp á stíl þeirra og endurbyggja þá með CSS breytum til að fá meiri stjórn á stíl.

• BrotHreiður töflur erfa ekki stíla lengur.

• Brot .thead-lightog .thead-darkfalla niður í þágu .table-*afbrigðisflokkanna sem hægt er að nota fyrir alla töflueiningar ( thead, tbody, tfoot, tr, thog td).

• BrotBlandan table-row-variant()er endurnefnd í table-variant()og ​​tekur aðeins við 2 breytur: $color(litaheiti) og $value(litakóði). Rammaliturinn og áherslulitirnir eru sjálfkrafa reiknaðir út frá breytum töflustuðla.

• Skiptu töflufrumufyllingarbreytum í -yog -x​​.

• BrotHætti .pre-scrollablebekknum. Sjá #29135

• Brot .text-*veitur bæta ekki sveima og fókus ríkjum við tengla lengur. .link-*Hægt er að nota hjálparnámskeið í staðinn. Sjá #29267

• BrotHætti .text-justifybekknum. Sjá #29793

• Brot <hr>þættir nota nú heightí stað þess borderað styðja betur við sizeeiginleikann. Þetta gerir einnig kleift að nota bólstrun tól til að búa til þykkari skilrúm (td <hr class="py-1">).

• Endurstilla sjálfgefið lárétt padding-leftá <ul>og <ol>þætti úr sjálfgefnu vafra 40pxí 2rem.

• Bætt við $enable-smooth-scroll, sem á við á scroll-behavior: smoothheimsvísu - nema fyrir notendur sem biðja um minni hreyfingu í gegnum prefers-reduced-motionfjölmiðlafyrirspurn. Sjá #31877

RTL

• Sértækar breytur, tól og blöndur fyrir lárétt stefnu hafa öll verið endurnefnd til að nota rökræna eiginleika eins og þeir sem finnast í flexbox skipulagi - td startog endí staðinn fyrir leftog right.

Eyðublöð

• Bætt við nýjum fljótandi eyðublöðum! Við höfum kynnt dæmið um fljótandi merki að fullu studdum eyðublaðahlutum. Sjá nýju fljótandi merkisíðuna.

• Brot Samþættir innfæddir og sérsniðnir formþættir. Gátreitir, útvarp, val og önnur inntak sem höfðu innfædda og sérsniðna flokka í v4 hafa verið sameinuð. Núna eru næstum allir formþættir okkar algjörlega sérsniðnir, flestir án þess að þurfa sérsniðna HTML.

  • .custom-control.custom-checkboxer núna .form-check.
  • .custom-control.custom-custom-radioer núna .form-check.
  • .custom-control.custom-switcher núna .form-check.form-switch.
  • .custom-selecter núna .form-select.
  • .custom-fileog .form-filehefur verið skipt út fyrir sérsniðna stíla ofan á .form-control.
  • .custom-rangeer núna .form-range.
  • Fallið innfæddur .form-control-fileog .form-control-range.

• BrotSleppt .input-group-appendog .input-group-prepend. Þú getur nú bara bætt við hnöppum og .input-group-textsem beinum börnum inntakshópanna.

• Langvarandi radíus vantar landamæri á inntakshópi með staðfestingarviðbrögðsvillu er loksins lagaður með því að bæta viðbótarflokki .has-validationvið inntakshópa með staðfestingu.

• Brot Slepptu formsértækum skipulagsflokkum fyrir netkerfi okkar. Notaðu netið okkar og tólin í staðinn fyrir .form-group, .form-row, eða .form-inline.

• BrotEyðublaðamerki þurfa nú .form-label.

• Brot .form-textstillir ekki lengur display, sem gerir þér kleift að búa til innbyggðan eða loka hjálpartexta eins og þú vilt bara með því að breyta HTML-einingunni.

• Formstýringar eru ekki lengur notaðar fastar heightþegar mögulegt er, í staðinn er frestað til min-heightað bæta aðlögun og samhæfni við aðra hluti.

• Staðfestingartákn eru ekki lengur notuð á <select>s með multiple.

• Endurraðað uppruna Sass skrár undir scss/forms/, þar á meðal inntakshópastílar.

Íhlutir

• Sameinuð paddinggildi fyrir áminningar, brauðmola, kort, fellilista, listahópa, snið, sprettiglugga og verkfæraábendingar til að byggjast á $spacerbreytunni okkar. Sjá #30564 .

Harmonikku

• Nýr harmonikkuþáttur bættur við .

Viðvaranir

• Viðvaranir hafa nú dæmi með táknum .

• Fjarlægði sérsniðna stíla fyrir <hr>s í hverri viðvörun þar sem þeir nota nú þegar currentColor.

Merki

• BrotSleppti öllum .badge-*litaflokkum fyrir bakgrunnsforrit (td notað .bg-primaryí staðinn fyrir .badge-primary).

• BrotSleppt .badge-pill— notaðu .rounded-pilltólið í staðinn.

• BrotFjarlægði sveima og fókusstíl fyrir <a>og <button>þætti.

• Aukin sjálfgefna fylling fyrir merki frá .25em/ .5emtil .35em/ .65em.

Brauðmylsna

• Einfaldaði sjálfgefið útlit brauðmola með því að fjarlægja padding, background-color, og border-radius.

• Bætti við nýjum CSS sérsniðnum eiginleikum --bs-breadcrumb-dividertil að auðvelda sérsníða án þess að þurfa að endursafna CSS.

Hnappar

• Brot Skiptahnappar , með gátreitum eða útvarpstækjum, þurfa ekki lengur JavaScript og hafa nýja merkingu. Við þurfum ekki lengur umbúðaþátt, bætum.btn-checkvið<input>, og pörum það við hvaða.btnflokka sem er á<label>. Sjá #30650 . Skjölin fyrir þetta hafa færst frá hnappasíðunni okkar yfir í nýja Eyðublöð hlutann.

• Brot Sleppt .btn-blockfyrir veitur. Í stað þess að nota .btn-blocká .btnhnappinn skaltu vefja hnappana þína með .d-gridog .gap-*tól til að rýma þá eftir þörfum. Skiptu yfir í móttækilega flokka til að fá enn meiri stjórn á þeim. Lestu skjölin fyrir nokkur dæmi.

• Uppfærði okkar button-variant()og button-outline-variant()mixins til að styðja við viðbótarfæribreytur.

• Uppfærðir hnappar til að tryggja aukna birtuskil á sveimi og virku ástandi.

• Óvirkir hnappar hafa nú pointer-events: none;.

Spil

• BrotFallið .card-deckí þágu ristarinnar okkar. Vefðu spilunum þínum inn í dálkaflokka og bættu við foreldri .row-cols-*ílát til að endurskapa spilastokka (en með meiri stjórn á móttækilegri röðun).

• BrotFallið .card-columnsí þágu múrverks. Sjá #28922 .

• BrotSkipti .cardút grunnharmonikkunni fyrir nýjan harmonikkuþátt .

Hringekja

• Bætt við nýju .carousel-darkafbrigði fyrir dökkan texta, stýringar og vísbendingar (frábært fyrir ljósari bakgrunn).

• Skipt var út táknum fyrir hringekjustýringu fyrir nýja SVG frá Bootstrap Icons .

Loka hnappur

• BrotEndurnefnt .closeí .btn-closefyrir minna almennt nafn.

• Lokahnappar nota nú background-image(innfellt SVG) í stað a ×í HTML, sem gerir kleift að sérsníða auðveldari án þess að þurfa að snerta merkinguna þína.

• Bætt við nýju .btn-close-whiteafbrigði sem notar filter: invert(1)til að gera kleift að hafna táknum með meiri birtuskilum gegn dekkri bakgrunni.

Hrun

• Fjarlægði skrúfufestingu fyrir harmonikkur.

Dropdowns

• Bætt við nýju .dropdown-menu-darkafbrigði og tengdum breytum fyrir dökkar fellivalmyndir á eftirspurn.

• Ný breytu bætt við fyrir $dropdown-padding-x.

• Dökknaði fellilistann til að bæta birtuskil.

• BrotAllir atburðir fyrir fellilistann eru nú ræstir á fellivalhnappnum og síðan bólað upp í foreldraþáttinn.

• Fellivalmyndir hafa nú data-bs-popper="static"eiginleika stillt þegar staðsetning fellilistans er kyrrstæð, eða fellivalmyndin er í stýristikunni. Þessu er bætt við með JavaScript okkar og hjálpar okkur að nota sérsniðna staðsetningarstíla án þess að trufla staðsetningu Popper.

• BrotValkostur flipfyrir fellivalmyndaviðbót sleppt í þágu innfæddrar Popper stillingar. Þú getur nú slökkt á snúningshegðuninni með því að senda tómt fylki fyrir fallbackPlacementsvalmöguleika í flip modifier.

• Nú er hægt að smella á fellivalmyndir með nýjum autoClosemöguleika til að takast á við sjálfvirka lokun . Þú getur notað þennan valkost til að samþykkja smellinn innan eða utan fellivalmyndarinnar til að gera hann gagnvirkan.

• Fellilistar styðja nú .dropdown-items vafinn í <li>s.

Jumbotron

• BrotSleppti jumbotron íhlutnum þar sem hægt er að endurtaka hann með tólum. Sjáðu nýja Jumbotron dæmið okkar fyrir kynningu.

Listahópur

• Nýjum breytingum bætt við .list-group-numberedlistahópa .

Navs og flipar

• Bætti nýjum nullbreytum fyrir font-size, font-weight, color, og :hover colorí .nav-linkbekkinn.

Navbars

• BrotNavbars krefjast nú gáms innan (til að einfalda bilkröfur verulega og CSS krafist).
• BrotEkki .activeer lengur hægt að nota flokkinn á .nav-items, það verður að beita honum beint á .nav-links.

Offcanvas

• Bætti við nýja offcanvas íhlutnum .

Síðuskipting

• Síðunartenglar eru nú sérhannaðar margin-leftsem eru ávöl á öllum hornum þegar þeir eru aðskildir hver frá öðrum.

• Bætt við transitions við blaðsíðutengla.

Popovers

• BrotEndurnefnt .arrowí .popover-arrowsjálfgefið popover sniðmát okkar.

• Endurnefndur whiteListvalkostur í allowList.

Snúðar

• Spinners heiðra nú prefers-reduced-motion: reducemeð því að hægja á hreyfimyndum. Sjá #31882 .

• Bætt lóðrétt röðun snúnings.

Ristað brauð

• Ristað brauð er nú hægt að staðsetja í a .toast-containermeð hjálp staðsetningartóla .

• Breytt sjálfgefna tímalengd ristuðu brauðs í 5 sekúndur.

• Fjarlægt overflow: hiddenúr ristuðu brauði og skipt út fyrir rétta border-radiuss með calc()aðgerðum.

Verkfæraráð

• BrotEndurnefnt .arrowí .tooltip-arrowsjálfgefið sniðmát fyrir verkfæraleiðbeiningar.

• BrotSjálfgefið gildi fyrir fallbackPlacementser breytt í til ['top', 'right', 'bottom', 'left']að fá betri staðsetningu á popparaþáttum.

• BrotEndurnefndur whiteListvalkostur í allowList.

Veitur

• BrotEndurnefna nokkur tól til að nota rökrétt eignarheiti í stað stefnunafna með því að bæta við RTL stuðningi:

  • Endurnefnt .left-*og .right-*til .start-*og .end-*.
  • Endurnefnt .float-leftog .float-righttil .float-startog .float-end.
  • Endurnefnt .border-leftog .border-righttil .border-startog .border-end.
  • Endurnefnt .rounded-leftog .rounded-righttil .rounded-startog .rounded-end.
  • Endurnefnt .ml-*og .mr-*til .ms-*og .me-*.
  • Endurnefnt .pl-*og .pr-*til .ps-*og .pe-*.
  • Endurnefnt .text-leftog .text-righttil .text-startog .text-end.

• BrotSjálfgefið óvirkt neikvæð framlegð.

• Bætti við nýjum .bg-bodyflokki til að fljótt stilla <body>bakgrunninn á fleiri þætti.

• Bætt við nýjum stöðutólum fyrir top, right, bottom, og left. Gildin innihalda 0, 50%, og 100%fyrir hverja eign.

• Bætt við nýjum .translate-middle-xog .translate-middle-ytólum til að miðja lárétta eða lóðrétta þætti í algerum/föstu staðsetningu.

• Bætt við nýjum border-widthtólum .

• BrotEndurnefnt .text-monospaceí .font-monospace.

• BrotFjarlægt .text-hideþar sem það er úrelt aðferð til að fela texta sem ætti ekki að nota lengur.

• Bætt við .fs-*tólum fyrir font-sizetól (með RFS virkt). Þessar nota sama mælikvarða og sjálfgefnar fyrirsagnir HTML (1-6, stórar til litlar) og hægt er að breyta þeim í gegnum Sass kort.

• BrotEndurnefnt .font-weight-*tól sem .fw-*fyrir stuttu og samkvæmni.

• BrotEndurnefnt .font-style-*tól sem .fst-*fyrir stuttu og samkvæmni.

• Bætt við .d-gridað sýna tól og ný gaptól ( .gap) fyrir CSS Grid og flexbox skipulag.

• BrotFjarlægði .rounded-smog rounded-lg, og kynnti nýjan flokkakvarða, .rounded-0til .rounded-3. Sjá #31687 .

• Bætt við nýjum line-heighttólum: .lh-1, .lh-sm, .lh-baseog .lh-lg. Sjá hér .

• Færði .d-nonetólið í CSS okkar til að gefa því meira vægi umfram önnur skjától.

• Framlengdi .visually-hidden-focusablehjálparann ​​til að vinna einnig á gámum með því að nota :focus-within.

Hjálparar

• Brot Móttækir innfellingarhjálparar hafa verið endurnefndir í hlutfallshjálparmenn með nýjum flokksnöfnum og bættri hegðun, auk gagnlegrar CSS breytu.

  • Flokkar hafa verið endurnefndir til að breytast byí xstærðarhlutföll. Til dæmis .ratio-16by9er núna .ratio-16x9.
  • Við höfum sleppt .embed-responsive-itemog þáttahópsvalinu í þágu einfaldara .ratio > *vals. Ekki er þörf á fleiri flokkum og hlutfallshjálpin virkar nú með hvaða HTML frumefni sem er.
  • Sass $embed-responsive-aspect-ratioskortinu hefur verið breytt í $aspect-ratiosog ​​gildi þess hafa verið einfölduð til að innihalda flokksnafnið og prósentuna sem key: valueparið.
  • CSS breytur eru nú búnar til og teknar með fyrir hvert gildi í Sass kortinu. Breyttu --bs-aspect-ratiobreytunni á til .ratioað búa til sérsniðið stærðarhlutfall .

• Brot „Skjálesara“ flokkar eru nú „sjónrænt faldir“ flokkar .

  • Breytti Sass skránni úr scss/helpers/_screenreaders.scssíscss/helpers/_visually-hidden.scss
  • Endurnefnt .sr-onlyog .sr-only-focusabletil .visually-hiddenog.visually-hidden-focusable
  • Endurnefnt sr-only()og sr-only-focusable()blandast í visually-hidden()og visually-hidden-focusable()​​.

• bootstrap-utilities.cssfelur nú einnig í sér aðstoðarmenn okkar. Hjálparar þurfa ekki lengur að vera fluttir inn í sérsniðnum smíðum.

JavaScript

• Sleppti jQuery ósjálfstæði og endurskrifuðu viðbætur til að vera í venjulegu JavaScript.

• BrotGagnaeiginleikar fyrir öll JavaScript viðbætur eru nú skipt með nafni til að hjálpa til við að greina Bootstrap virkni frá þriðja aðila og þínum eigin kóða. Til dæmis notum við data-bs-toggleí staðinn fyrir data-toggle.

• Allar viðbætur geta nú samþykkt CSS veljara sem fyrstu rökin. Þú getur annað hvort sent DOM frumefni eða hvaða gildu CSS val sem er til að búa til nýtt tilvik af viðbótinni:

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

• popperConfighægt að senda sem aðgerð sem samþykkir sjálfgefna Popper stillingu Bootstrap sem rök, þannig að þú getur sameinað þessa sjálfgefna stillingu á þinn hátt. Á við um fellilista, sprettiglugga og verkfæraábendingar.

• Sjálfgefið gildi fyrir fallbackPlacementser breytt í ['top', 'right', 'bottom', 'left']fyrir betri staðsetningu Popper þátta. Á við um fellilista, sprettiglugga og verkfæraábendingar.

• Fjarlægði undirstrik úr opinberum kyrrstöðuaðferðum eins og _getInstance()→ getInstance().