Migrimi në v5

v5.2.0

Dizajn i rifreskuar

Bootstrap v5.2.0 përmban një përditësim delikate të dizajnit për një pjesë të vogël të komponentëve dhe veçorive në të gjithë projektin, veçanërisht nëpërmjet border-radiusvlerave të rafinuara në butona dhe kontrolleve të formës . Dokumentacioni ynë gjithashtu është përditësuar me një faqe të re fillestare, një plan urbanistik më të thjeshtë të dokumenteve që nuk fshin më seksionet e shiritit anësor dhe shembuj më të spikatur të ikonave të Bootstrap .

Më shumë variabla CSS

Ne kemi përditësuar të gjithë komponentët tanë për të përdorur variablat CSS. Ndërsa Sass ende mbështet gjithçka, çdo komponent është përditësuar për të përfshirë variabla CSS në klasat bazë të komponentëve (p.sh., .btn), duke lejuar më shumë personalizim në kohë reale të Bootstrap. Në publikimet e mëvonshme, ne do të vazhdojmë të zgjerojmë përdorimin tonë të variablave CSS në paraqitjen, formularët, ndihmësit dhe shërbimet tona. Lexoni më shumë rreth variablave CSS në secilin komponent në faqet e tyre përkatëse të dokumentacionit.

Përdorimi ynë i variablave CSS do të jetë disi i paplotë deri në Bootstrap 6. Ndërsa ne do të donim t'i zbatonim plotësisht këto në të gjithë bordin, ato rrezikojnë të shkaktojnë ndryshime të thyera. Për shembull, vendosja $alert-border-width: var(--bs-border-width)në kodin tonë burimor thyen Sass-in e mundshëm në kodin tuaj nëse po e bënit $alert-border-width * 2për ndonjë arsye.

Si i tillë, kudo që të jetë e mundur, ne do të vazhdojmë të shtyjmë drejt më shumë variablave CSS, por ju lutemi pranoni se zbatimi ynë mund të jetë pak i kufizuar në v5.

I ri_maps.scss

Bootstrap v5.2.0 prezantoi një skedar të ri Sass me _maps.scss. Ai nxjerr disa harta Sass nga _variables.scsspër të rregulluar një problem ku përditësimet në një hartë origjinale nuk u zbatuan në hartat dytësore që i zgjerojnë ato. Për shembull, përditësimet në $theme-colorsnuk po aplikoheshin në hartat e tjera të temave që mbështeteshin në $theme-colors, duke thyer rrjedhat kryesore të punës së personalizimit. Me pak fjalë, Sass ka një kufizim ku pasi të përdoret një variabël ose hartë e paracaktuar , ai nuk mund të përditësohet. Ekziston një mangësi e ngjashme me variablat CSS kur ato përdoren për të kompozuar variabla të tjerë CSS.

Kjo është arsyeja pse personalizimet e variablave në Bootstrap duhet të vijnë pas @import "functions", por para @import "variables"dhe pjesa tjetër e grupit tonë të importit. E njëjta gjë vlen edhe për hartat Sass—duhet të anashkaloni parazgjedhjet përpara se ato të përdoren. Hartat e mëposhtme janë zhvendosur në të renë _maps.scss:

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

Ndërtimet tuaja të personalizuara të Bootstrap CSS tani duhet të duken diçka si kjo me një import të veçantë hartash.

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

Shërbime të reja komunale

• font-weightShërbimet e zgjeruara për të përfshirë .fw-semiboldpër fontet gjysmë të theksuara.
• border-radiusShërbimet e zgjeruara për të përfshirë dy madhësi të reja .rounded-4dhe .rounded-5, për më shumë opsione.

Ndryshime shtesë

• Prezantoi $enable-container-classesopsionin e ri. — Tani kur zgjedhni paraqitjen eksperimentale të rrjetit CSS, .container-*klasat do të përpilohen ende, përveç nëse ky opsion është caktuar në false. Kontejnerët gjithashtu tani mbajnë vlerat e tyre të ulluqit.

• Komponenti Offcanvas tani ka variacione të përgjegjshme . Klasa origjinale .offcanvasmbetet e pandryshuar - ajo fsheh përmbajtjen në të gjitha portat e shikimit. Për ta bërë atë të përgjegjshme, ndryshoni atë .offcanvasklasë në çdo .offcanvas-{sm|md|lg|xl|xxl}klasë.

• Ndarësit më të trashë tavoline tani janë të zgjedhur. — Ne kemi hequr kufirin më të trashë dhe më të vështirë për t'u anashkaluar midis grupeve të tabelave dhe e kemi zhvendosur në një klasë opsionale që mund të aplikoni, .table-group-divider. Shihni dokumentet e tabelës për një shembull.

• Scrollspy është rishkruar për të përdorur API-në e Intersection Observer , që do të thotë se nuk keni më nevojë për mbështjellës prindëror përkatës, zhvlerësonoffsetkonfigurimin dhe më shumë. Kërkoni që zbatimet tuaja të Scrollspy të jenë më të sakta dhe të qëndrueshme në theksimin e tyre navigues.

• Popoverët dhe këshillat e veglave tani përdorin variabla CSS. Disa variabla CSS janë përditësuar nga homologët e tyre Sass për të zvogëluar numrin e variablave. Si rezultat, tre variabla janë zhvlerësuar në këtë version: $popover-arrow-color, $popover-arrow-outer-color, dhe $tooltip-arrow-color.

• .text-bg-{color}U shtuan ndihmës të rinj . Në vend që të vendosni individuale .text-*dhe .bg-*shërbime, tani mund të përdorni .text-bg-*ndihmësit për të vendosur një background-colorplan të parë me kontrast color.

• U shtua .form-check-reversemodifikues për të kthyer rendin e etiketave dhe kutive/radiove përkatëse.

• Mbështetja e kolonave me vija të shtuara në tabela nëpërmjet .table-striped-columnsklasës së re.

Për një listë të plotë të ndryshimeve, shihni projektin v5.2.0 në GitHub .

v5.1.0

• U shtua mbështetje eksperimentale për paraqitjen e rrjetit CSS . — Kjo është një punë në progres dhe nuk është ende gati për përdorim prodhimi, por ju mund të zgjidhni funksionin e ri nëpërmjet Sass. Për ta aktivizuar, çaktivizoni rrjetin e paracaktuar, duke vendosur $enable-grid-classes: falsedhe aktivizoni rrjetin CSS duke vendosur $enable-cssgrid: true.

• Shiritat e navigimit të përditësuar për të mbështetur offcanvas. — Shtoni sirtarët offcanvas në çdo shirit navigimi me klasat e përgjegjshme .navbar-expand-*dhe disa marka offcanvas.

• Është shtuar komponenti i ri mbajtës i vendndodhjes . — Komponenti ynë më i ri, një mënyrë për të ofruar blloqe të përkohshme në vend të përmbajtjes reale për të ndihmuar të tregoni se diçka është ende duke u ngarkuar në sajtin ose aplikacionin tuaj.

• Shtojca "Collapse" tani mbështet kolapsin horizontal . — Shtoni .collapse-horizontalnë .collapsetuajën për të palosur në widthvend të height. Shmangni rilyerjen e shfletuesit duke vendosur një min-heightose height.

• U shtuan ndihmës të rinj të pirgut dhe rregullave vertikale. — Zbatoni shpejt vetitë e shumta flexbox për të krijuar me shpejtësi paraqitjet e personalizuara me rafte . Zgjidhni nga raftet horizontale ( .hstack) dhe vertikale ( .vstack). Shtoni ndarës vertikalë të ngjashëm me <hr>elementët me ndihmësit e rinj.vr .

• U shtuan variabla të reja globale :rootCSS. — Shtoi disa variabla të rinj CSS në :rootnivelin për kontrollin e <body>stileve. Më shumë janë në punë, duke përfshirë shërbimet dhe komponentët tanë, por tani për tani lexoni variablat CSS në seksionin Personalizo .

• U rishikuan shërbimet e ngjyrave dhe sfondit për të përdorur variablat CSS dhe shtuan shërbime të reja për opacitetin e tekstit dhe paqartësinë e sfondit . — .text-* dhe .bg-*shërbimet janë ndërtuar tani me variabla CSS dhe rgba()vlera ngjyrash, duke ju lejuar të personalizoni lehtësisht çdo mjet me programe të reja të opacitetit.

• U shtuan shembuj të rinj të fragmenteve bazuar për të treguar se si të personalizojmë komponentët tanë. — Tërhiqeni gati për të përdorur komponentë të personalizuar dhe modele të tjera të zakonshme të dizajnit me shembujt tanë të rinj të Snippets . Përfshin fundet , pikat e lëshimit , grupet e listave dhe modalet .

• U hoqën stilet e papërdorura të pozicionimit nga popover-at dhe këshillat e veglave pasi këto trajtohen vetëm nga Popper. $tooltip-marginështë zhvlerësuar dhe është vendosur nullnë proces.

Dëshironi më shumë informacion? Lexoni postimin në blog v5.1.0.

varësitë

• U hodh jQuery.
• Përmirësuar nga Popper v1.x në Popper v2.x.
• Zëvendësoi Libsass me Dart Sass pasi përpiluesi ynë Sass i dhënë Libsass ishte zhvlerësuar.
• Emigruar nga Jekyll në Hugo për ndërtimin e dokumentacionit tonë

Mbështetja e shfletuesit

• U hoqi Internet Explorer 10 dhe 11
• Largohet Microsoft Edge < 16 (Legacy Edge)
• Ra Firefox < 60
• Safari i rënë < 12
• U hoq iOS Safari < 12
• Ka rënë Chrome < 60

Ndryshimet e dokumentacionit

• Faqja kryesore, faqosja e dokumenteve dhe fundi i ridizajnuar.
• U shtua udhëzues i ri i parcelës .
• U shtua seksioni i ri "Përshtatje ", duke zëvendësuar faqen "Theming" të v4 , me detaje të reja mbi Sass, opsionet e konfigurimit global, skemat e ngjyrave, variablat CSS dhe më shumë.
• Riorganizoi të gjithë dokumentacionin e formularit në seksionin e ri Forms , duke e ndarë përmbajtjen në faqe më të fokusuara.
• Në mënyrë të ngjashme, përditësoi seksionin Layout , për të pasqyruar më qartë përmbajtjen e rrjetit.
• Faqja e komponentit "Navs" u riemërua në "Navs & Tabs".
• Faqja e "Kontrollimeve" u riemërua në "Kontrollet dhe radiot".
• Ridizajnuar shiritin e navigimit dhe shtoi një subnav të ri për ta bërë më të lehtë qarkullimin e faqeve tona dhe versionet e dokumenteve.
• U shtua shkurtore e re e tastierës për fushën e kërkimit: Ctrl + /.

Sass

• Ne kemi hequr dorë nga bashkimet e paracaktuara të hartës Sass për ta bërë më të lehtë heqjen e vlerave të tepërta. Mbani në mend se tani duhet të përcaktoni të gjitha vlerat në hartat Sass si $theme-colors. Shikoni se si të merreni me hartat Sass .

• Thyerjecolor-yiq()Funksioni dhe variablat e lidhur u riemëruan color-contrast()pasi nuk janë më të lidhura me hapësirën e ngjyrave YIQ. Shihni #30168.

  • $yiq-contrasted-thresholdështë riemërtuar në $min-contrast-ratio.
  • $yiq-text-darkdhe $yiq-text-lightpërkatësisht emërtohen në $color-contrast-darkdhe $color-contrast-light.

• ThyerjeParametrat e përzierjes së pyetjeve të medias kanë ndryshuar për një qasje më logjike.

  • media-breakpoint-down()përdor vetë pikën e ndërprerjes në vend të pikës tjetër të ndërprerjes (p.sh., media-breakpoint-down(lg)në vend të media-breakpoint-down(md)objektivave të pamjeve më të vogla se lg).
  • Në mënyrë të ngjashme, parametri i dytë në media-breakpoint-between()përdor gjithashtu vetë pikën e ndërprerjes në vend të pikës tjetër të ndërprerjes (p.sh., media-between(sm, lg)në vend të media-breakpoint-between(sm, md)objektivave të pamjeve ndërmjet smdhe lg).

• ThyerjeU hoqën stilet dhe $enable-print-stylesvariablat e printimit. Klasat e ekranit të printimit janë ende përreth. Shihni #28339 .

• ThyerjeU hodh color(), theme-color(), dhe gray()funksionon në favor të variablave. Shihni #29083 .

• Thyerjetheme-color-level()Funksioni u riemërua color-level()dhe tani pranon çdo ngjyrë që dëshironi në vend të vetëm $theme-colorngjyrave. Shih #29083 Kujdes: color-level() më vonë u hodh në v5.0.0-alpha3.

• ThyerjeRiemërtuar $enable-prefers-reduced-motion-media-querydhe $enable-pointer-cursor-for-buttonspër të $enable-reduced-motiondhe $enable-button-pointerspër shkurtësi.

• ThyerjeE hoqi bg-gradient-variant()miksin. Përdorni .bg-gradientklasën për të shtuar gradient në elementë në vend të .bg-gradient-*klasave të gjeneruara.

• Thyerje Përzierjet e hequra më parë të vjetruara:

  • hover, hover-focus, plain-hover-focus, dhehover-focus-active
  • float()
  • form-control-mixin()
  • nav-divider()
  • retina-img()
  • text-hide()(gjithashtu hoqi klasën e shërbimeve të lidhura, .text-hide)
  • visibility()
  • form-control-focus()

• Thyerjescale-color()Funksioni u riemërua në shift-color()për të shmangur përplasjen me funksionin e shkallëzimit të ngjyrave të vetë Sass.

• box-shadowmixins tani lejojnë nullvlerat dhe heqin nonenga argumente të shumta. Shihni #30394 .

• Miksin border-radius()tani ka një vlerë të paracaktuar.

Sistemi i ngjyrave

• Sistemi i ngjyrave i cili funksionoi color-level()dhe $theme-color-intervalu hoq në favor të një sistemi të ri ngjyrash. Të gjitha lighten()dhe darken()funksionet në bazën tonë të kodeve zëvendësohen nga tint-color()dhe shade-color(). Këto funksione do të përziejnë ngjyrën me të bardhën ose me të zezën në vend që të ndryshojnë lehtësinë e saj me një sasi fikse. Ngjyrosja shift-color()ose do të ngjyroset një ngjyrë në varësi të faktit nëse parametri i peshës së saj është pozitiv ose negativ. Shihni #30622 për më shumë detaje.

• U shtuan nuanca dhe nuanca të reja për çdo ngjyrë, duke siguruar nëntë ngjyra të veçanta për secilën ngjyrë bazë, si variabla të reja Sass.

• Kontrasti i përmirësuar i ngjyrave. Rriti raportin e kontrastit të ngjyrave nga 3:1 në 4,5:1 dhe ngjyrat e përditësuara blu, jeshile, cian dhe rozë për të siguruar kontrast WCAG 2,1 AA. Ndryshoi gjithashtu ngjyrën tonë të kontrastit të ngjyrave nga $gray-900në $black.

• Për të mbështetur sistemin tonë të ngjyrave, ne kemi shtuar porosi tint-color()dhe shade-color()funksione të reja për të përzier ngjyrat tona në mënyrë të përshtatshme.

Përditësimet e rrjetit

• Pika e re e ndërprerjes! U shtua pika e re e xxlndërprerjes për 1400pxdhe lart. Asnjë ndryshim në të gjitha pikat e tjera të ndërprerjes.

• Ulluqe të përmirësuara. Ulluqet tani janë vendosur në rems dhe janë më të ngushta se v4 ( 1.5rem, ose rreth 24px, poshtë nga 30px). Kjo përafron ulluqet e sistemit tonë të rrjetit me shërbimet tona të ndarjes.

  • U shtua klasa e re e ulluqeve ( .g-*, .gx-*, dhe .gy-*) për të kontrolluar ulluqet horizontale/vertikale, ulluqet horizontale dhe ulluqet vertikale.
  • ThyerjeU riemërua .no-guttersnë për .g-0t'iu përshtatur shërbimeve të reja të kanalizimeve.

• Kolonat nuk janë position: relativeaplikuar më, kështu që mund t'ju duhet të shtoni .position-relativenë disa elementë për të rivendosur atë sjellje.

• ThyerjeU hodhën disa .order-*klasa që shpesh mbetën të papërdorura. Ne tani ofrojmë vetëm .order-1jashtë .order-5kutisë.

• ThyerjeKomponenti u hoq .mediapasi mund të përsëritet lehtësisht me shërbimet komunale. Shikoni #28265 dhe faqen e shërbimeve flex për një shembull .

• Thyerje bootstrap-grid.csstani vlen vetëm box-sizing: border-boxpër kolonën në vend që të rivendoset madhësia globale e kutisë. Në këtë mënyrë, stilet tona të rrjetës mund të përdoren në më shumë vende pa ndërhyrje.

• $enable-grid-classesnuk e çaktivizon më gjenerimin e klasave të kontejnerëve. Shihni #29146.

• Përditësuar make-colmixin në parazgjedhje në kolona të barabarta pa një madhësi të caktuar.

Përmbajtja, Rinisja, etj

• RFS tani është aktivizuar si parazgjedhje. Titujt duke përdorurfont-size()miksin do të rregullojnë automatikishtfont-sizeshkallën e tyre me portin e shikimit. Kjo veçori ishte zgjedhur më parë me v4.

• ThyerjeRiparuam tipografinë tonë të ekranit për të zëvendësuar $display-*variablat tona dhe me një $display-font-sizeshartë Sass. Gjithashtu u hoqën $display-*-weightvariablat individuale për një s të vetme $display-font-weightdhe u rregulluan font-size.

• U shtuan dy .display-*madhësi të reja të titullit .display-5dhe .display-6.

• Lidhjet nënvizohen si parazgjedhje (jo vetëm në lëvizje), përveç nëse ato janë pjesë e komponentëve të veçantë.

• Tabelat e ridizajnuara për të rifreskuar stilet e tyre dhe për t'i rindërtuar ato me variabla CSS për më shumë kontroll mbi stilimin.

• ThyerjeTabelat e mbivendosura nuk trashëgojnë më stile.

• Thyerje .thead-lightdhe .thead-darkjanë hequr në favor të .table-*klasave të varianteve të cilat mund të përdoren për të gjithë elementët e tabelës ( thead, tbody, tfoot, tr, thdhe td).

• ThyerjeMiksin table-row-variant()është riemërtuar table-variant()dhe pranon vetëm 2 parametra: $color(emri i ngjyrës) dhe $value(kodi i ngjyrës). Ngjyra e kufirit dhe ngjyrat e theksit llogariten automatikisht bazuar në variablat e faktorit të tabelës.

• Ndani variablat e mbushjes së qelizave të tabelës në -ydhe -x.

• ThyerjeE braktisi .pre-scrollableklasën. Shihni #29135

• Thyerje .text-*shërbimet nuk i shtojnë më gjendjet e pezullimit dhe fokusimit te lidhjet. .link-*Në vend të tyre mund të përdoren klasa ndihmëse. Shihni #29267

• ThyerjeE braktisi .text-justifyklasën. Shihni #29793

• Thyerje <hr>elementet tani përdoren heightnë vend të borderpër të mbështetur më mirë sizeatributin. Kjo gjithashtu mundëson përdorimin e mjeteve të mbushjes për të krijuar ndarës më të trashë (p.sh., <hr class="py-1">).

• Rivendosni parazgjedhjen horizontale padding-leftnë <ul>dhe <ol>elementet nga parazgjedhja e shfletuesit 40pxnë 2rem.

• U shtua $enable-smooth-scroll, e cila zbatohet scroll-behavior: smoothglobalisht—përveç përdoruesve që kërkojnë lëvizje të reduktuar përmes prefers-reduced-motionpyetjeve të medias. Shihni #31877

RTL

• Variablat specifike të drejtimit horizontal, shërbimet dhe miksinat janë riemërtuar të gjithë për të përdorur vetitë logjike si ato që gjenden në paraqitjet flexbox-p.sh., startdhe endnë vend të leftdhe right.

Formularët

• U shtuan forma të reja lundruese! Ne kemi promovuar shembullin e etiketave lundruese në komponentët e formularit të mbështetur plotësisht. Shikoni faqen e re të etiketave lundruese.

• Thyerje Elemente të konsoliduara të formës amtare dhe të personalizuara. Kutitë e kontrollit, radiot, përzgjedhjet dhe hyrjet e tjera që kishin klasa vendase dhe të personalizuara në v4 janë konsoliduar. Tani pothuajse të gjithë elementët tanë të formës janë krejtësisht të personalizuara, shumica pa pasur nevojë për HTML të personalizuar.

  • .custom-control.custom-checkboxështë tani .form-check.
  • .custom-control.custom-custom-radioështë tani .form-check.
  • .custom-control.custom-switchështë tani .form-check.form-switch.
  • .custom-selectështë tani .form-select.
  • .custom-filedhe .form-filejanë zëvendësuar me stile të personalizuara në krye të .form-control.
  • .custom-rangeështë tani .form-range.
  • Ra vendas .form-control-filedhe .form-control-range.

• ThyerjeU rrëzua .input-group-appenddhe .input-group-prepend. Tani mund të shtoni vetëm butona dhe .input-group-textsi fëmijë të drejtpërdrejtë të grupeve të hyrjes.

• Rrezja e kufirit që mungon për një kohë të gjatë në grupin e hyrjes me gabimin e reagimit të vlefshmërisë më në fund rregullohet duke shtuar një .has-validationklasë shtesë në grupet e hyrjes me vlefshmëri.

• Thyerje Klasat e paraqitjes specifike të formës janë hequr për sistemin tonë të rrjetit. Përdorni rrjetin dhe shërbimet tona në vend të .form-group, .form-row, ose .form-inline.

• ThyerjeEtiketat e formularit tani kërkojnë .form-label.

• Thyerje .form-textnuk vendos më display, duke ju lejuar të krijoni tekst ndihmës në linjë ose të bllokoni sipas dëshirës vetëm duke ndryshuar elementin HTML.

• Kontrollet e formularit nuk përdoren më të fiksuara heightkur është e mundur, në vend të kësaj shtyhen për min-heighttë përmirësuar personalizimin dhe përputhshmërinë me komponentët e tjerë.

• Ikonat e verifikimit nuk aplikohen më në <select>s me multiple.

• Skedarët Sass me burim të riorganizuar nën scss/forms/, duke përfshirë stilet e grupit të hyrjes.

Komponentët

• Vlerat e unifikuara paddingpër sinjalizimet, grimcat e bukës, kartat, pikat rënëse, grupet e listave, modalet, popover-et dhe këshillat e veglave që do të bazohen në $spacervariablin tonë. Shihni #30564 .

Fizarmonikë

• Është shtuar komponenti i ri i fizarmonikës .

Alarmet

• Alarmet tani kanë shembuj me ikona .

• U hoqën stilet e personalizuara për <hr>s në çdo sinjalizues pasi ato përdorin tashmë currentColor.

Shenjat

• ThyerjeU hoqën të gjitha .badge-*klasat e ngjyrave për shërbimet e sfondit (p.sh., përdorni .bg-primarynë vend të .badge-primary).

• ThyerjeU hoq .badge-pill- përdorni programin .rounded-pillnë vend.

• ThyerjeU hoqën stilet e qëndrimit dhe fokusimit për <a>dhe <button>elementët.

• Rritja e mbushjes së paracaktuar për distinktivët nga .25em/ .5emnë .35em/ .65em.

Therrime buke

• Thjeshtoi pamjen e paracaktuar të bukës duke hequr padding, background-color, dhe border-radius.

• U shtua veçori e re me porosi CSS --bs-breadcrumb-dividerpër personalizim të lehtë pa pasur nevojë të ripërpiloni CSS.

Butonat

• Thyerje Butonat e ndërrimit , me kutitë e kontrollit ose radiot, nuk kërkojnë më JavaScript dhe kanë shënime të reja. Ne nuk kërkojmë më një element mbështjellës, shtojmë.btn-checknë<input>, dhe e çiftojmë me asnjë.btnklasë në<label>. Shihni #30650 . Dokumentet për këtë janë zhvendosur nga faqja jonë e butonave në seksionin e ri Forms.

• Thyerje U hoq .btn-blockpër shërbime komunale. Në vend që të përdorni .btn-blocknë .btn, mbështillni butonat me .d-griddhe një .gap-*mjet për t'i ndarë ato sipas nevojës. Kalo në klasa të përgjegjshme për më shumë kontroll mbi to. Lexoni dokumentet për disa shembuj.

• Përditësuam përzierjet tona button-variant()dhe button-outline-variant()për të mbështetur parametra shtesë.

• Butonat e përditësuar për të siguruar kontrast të shtuar në gjendjet e lëvizjes dhe aktive.

• Butonat e çaktivizuar tani kanë pointer-events: none;.

Kartelë

• ThyerjeRa .card-decknë favor të rrjetit tonë. Mbështillni kartat tuaja në klasa kolone dhe shtoni një .row-cols-*kontejner prind për të rikrijuar kuvertën e kartave (por me më shumë kontroll mbi shtrirjen e përgjegjshme).

• ThyerjeU hodh .card-columnsnë favor të Masonerisë. Shihni #28922 .

• ThyerjeZëvendësoi .cardfizarmonikën e bazuar me një komponent të ri Fizarmonikë .

Karuseli

• U shtua një .carousel-darkvariant i ri për tekst të errët, kontrolle dhe tregues (i shkëlqyeshëm për sfonde më të lehta).

• Zëvendësuan ikonat e shevronit për kontrollet e karuselit me SVG të reja nga Bootstrap Icons .

Butoni i mbylljes

• ThyerjeRiemëruar .closenë .btn-closepër një emër më pak të përgjithshëm.

• Butonat e mbylljes tani përdorin një background-image(SVG të ngulitur) në vend të një ×në HTML, duke lejuar personalizimin më të lehtë pa pasur nevojë të prekni shënimin tuaj.

• U shtua një .btn-close-whitevariant i ri që përdor filter: invert(1)për të mundësuar ikonat e heqjes së kontrastit më të lartë kundër sfondeve më të errëta.

Kolapsi

• U hoq ankorimi i rrotullës për fizarmonikë.

Dropdowns

• U shtua .dropdown-menu-darkvarianti i ri dhe variabla të lidhur për zbritjet e errëta sipas kërkesës.

• U shtua ndryshore e re për $dropdown-padding-x.

• Errësuar ndarësin me rënie për kontrast të përmirësuar.

• ThyerjeTë gjitha ngjarjet për listën rënëse aktivizohen tani në butonin e ndërrimit me zbritje dhe më pas flluskohen në elementin prind.

• Menytë rënëse tani kanë një data-bs-popper="static"atribut të caktuar kur pozicionimi i listës rënëse është statik ose kur ajo me zbritje është në shiritin e navigimit. Kjo shtohet nga JavaScript-i ynë dhe na ndihmon të përdorim stilet e pozicionit të personalizuar pa ndërhyrë në pozicionimin e Popper-it.

• ThyerjeOpsioni i hequr flippër shtojcën rënëse në favor të konfigurimit vendas të Popper. Tani mund të çaktivizoni sjelljen e rrotullimit duke kaluar një grup bosh për fallbackPlacementsopsion në modifikuesin e rrokullisjes .

• Menytë në dropdown tani mund të klikohen me një autoCloseopsion të ri për të trajtuar sjelljen e mbylljes automatike . Ju mund ta përdorni këtë opsion për të pranuar klikimin brenda ose jashtë menysë rënëse për ta bërë atë interaktive.

• Dropdowns tani mbështesin .dropdown-items të mbështjellë në <li>s.

Jumbotron

• ThyerjeU hodh komponenti jumbotron pasi mund të përsëritet me shërbimet komunale. Shikoni shembullin tonë të ri Jumbotron për një demonstrim.

Lista e grupit

• U shtua .list-group-numberedmodifikues i ri në grupet e listave.

Navs dhe skeda

• nullU shtuan variabla të reja për font-size, font-weight, colordhe :hover colornë .nav-linkklasë.

Shiritat e navigimit

• ThyerjeShiritat e navigimit tani kërkojnë një kontejner brenda (për të thjeshtuar në mënyrë drastike kërkesat e ndarjes dhe kërkohet CSS).
• ThyerjeKlasa .activenuk mund të aplikohet më në .nav-items, ajo duhet të aplikohet drejtpërdrejt në .nav-links.

Jashtë kanavacë

• U shtua komponenti i ri offcanvas .

Faqezim

• Lidhjet e faqezimit tani kanë të personalizueshme margin-leftqë janë të rrumbullakosura në mënyrë dinamike në të gjitha qoshet kur ndahen nga njëra-tjetra.

• Shtuar transitions në lidhjet e faqes.

Popovers

• ThyerjeRiemërtuar .arrownë .popover-arrownë shabllonin tonë të paracaktuar popover.

• whiteListOpsioni u riemërua në allowList.

Spiners

• Spinners tani nderojnë prefers-reduced-motion: reduceduke ngadalësuar animacionet. Shihni #31882 .

• Përmirësimi i shtrirjes vertikale të rrotulluesit.

Dollitë

• Dollitë tani mund të pozicionohen në një .toast-containerme ndihmën e shërbimeve të pozicionimit .

• Ndryshoi kohëzgjatjen e paracaktuar të dollisë në 5 sekonda.

• Hiqet overflow: hiddennga dollitë dhe zëvendësohet me border-radiuss të duhura me calc()funksione.

Këshilla për veglat

• ThyerjeRiemërtuar .arrownë .tooltip-arrownë shabllonin tonë të parazgjedhur të këshillës së veglave.

• ThyerjeVlera e paracaktuar për the fallbackPlacementsështë ndryshuar në ['top', 'right', 'bottom', 'left']për vendosje më të mirë të elementeve popper.

• ThyerjewhiteListOpsioni u riemërua në allowList.

Shërbimet komunale

• ThyerjeU riemëruan disa shërbime për të përdorur emra logjik të pronave në vend të emrave të drejtimit me shtimin e mbështetjes RTL:

  • Riemërtuar .left-*dhe .right-*te .start-*dhe .end-*.
  • Riemërtuar .float-leftdhe .float-rightte .float-startdhe .float-end.
  • Riemërtuar .border-leftdhe .border-rightte .border-startdhe .border-end.
  • Riemërtuar .rounded-leftdhe .rounded-rightte .rounded-startdhe .rounded-end.
  • Riemërtuar .ml-*dhe .mr-*te .ms-*dhe .me-*.
  • Riemërtuar .pl-*dhe .pr-*te .ps-*dhe .pe-*.
  • Riemërtuar .text-leftdhe .text-rightte .text-startdhe .text-end.

• ThyerjeMarzhet negative të çaktivizuara si parazgjedhje.

• U shtua një .bg-bodyklasë e re për vendosjen e shpejtë të <body>sfondit të 's në elementë shtesë.

• U shtuan shërbime të reja pozicioni për top, right, bottom, dhe left. Vlerat përfshijnë 0, 50%, dhe 100%për çdo pronë.

• U shtuan të reja .translate-middle-xdhe .translate-middle-yshërbime në qendrën horizontalisht ose vertikalisht në elementët e pozicionuar absolut/fiks.

• U shtuan border-widthshërbime të reja .

• ThyerjeRiemërtuar .text-monospacenë .font-monospace.

• ThyerjeU hoq .text-hidepasi është një metodë e vjetëruar për fshehjen e tekstit që nuk duhet të përdoret më.

• Shërbimet e shtuara .fs-*për font-sizeshërbimet komunale (me RFS të aktivizuar). Këto përdorin të njëjtën shkallë si titujt e paracaktuar të HTML (1-6, i madh në i vogël) dhe mund të modifikohen nëpërmjet hartës Sass.

• Thyerje.font-weight-*Shërbimet e riemërtuara .fw-*për nga shkurtësia dhe qëndrueshmëria.

• Thyerje.font-style-*Shërbimet e riemërtuara .fst-*për nga shkurtësia dhe qëndrueshmëria.

• Shtuar .d-gridnë shfaqjen e shërbimeve dhe shërbimeve të reja gap( .gap) për paraqitjet CSS Grid dhe flexbox.

• ThyerjeU hoq .rounded-smdhe rounded-lg, dhe prezantoi një shkallë të re klasash, .rounded-0në .rounded-3. Shihni #31687 .

• U shtuan line-heightshërbime të reja: .lh-1, .lh-sm, .lh-basedhe .lh-lg. Shihni këtu .

• U zhvendos në .d-noneprogramin tonë CSS për t'i dhënë më shumë peshë ndaj shërbimeve të tjera të ekranit.

• Zgjeroi .visually-hidden-focusablendihmësin për të punuar edhe në kontejnerë, duke përdorur :focus-within.

Ndihmuesit

• Thyerje Ndihmuesit e integruar të përgjegjshëm janë riemërtuar në ndihmës të raportit me emra të rinj klasash dhe sjellje të përmirësuara, si dhe një ndryshore të dobishme CSS.

  • Klasat janë riemërtuar për të ndryshuar bynë xraportin e pamjes. Për shembull, .ratio-16by9është tani .ratio-16x9.
  • Ne kemi hequr .embed-responsive-itempërzgjedhësin dhe grupin e elementeve në favor të një .ratio > *përzgjedhësi më të thjeshtë. Nuk nevojitet më klasë, dhe ndihmësi i raportit tani punon me çdo element HTML.
  • Harta $embed-responsive-aspect-ratiosSass është riemërtuar në $aspect-ratiosdhe vlerat e saj janë thjeshtuar për të përfshirë emrin e klasës dhe përqindjen si key: valueçift.
  • Variablat CSS tani gjenerohen dhe përfshihen për secilën vlerë në hartën Sass. Modifikoni --bs-aspect-ratiovariablin në .ratiopër të krijuar një raport të personalizuar të aspektit .

• Thyerje Klasat e "lexuesit të ekranit" tani janë klasa "të fshehura vizualisht" .

  • Ndryshoi skedarin Sass nga scss/helpers/_screenreaders.scssnëscss/helpers/_visually-hidden.scss
  • Riemërtuar .sr-onlydhe .sr-only-focusablete .visually-hiddendhe.visually-hidden-focusable
  • Riemërohet sr-only()dhe sr-only-focusable()përzihet në visually-hidden()dhe visually-hidden-focusable().

• bootstrap-utilities.csstani përfshin edhe ndihmësit tanë. Ndihmuesit nuk kanë më nevojë të importohen në ndërtime me porosi.

JavaScript

• U hoq varësia nga jQuery dhe rishkruan shtojcat për të qenë në JavaScript të rregullt.

• ThyerjeAtributet e të dhënave për të gjitha shtojcat JavaScript tani janë me hapësirë ​​emri për të ndihmuar në dallimin e funksionalitetit të Bootstrap nga palët e treta dhe kodin tuaj. Për shembull, ne përdorim data-bs-togglenë vend të data-toggle.

• Të gjitha shtojcat tani mund të pranojnë një përzgjedhës CSS si argumentin e parë. Ju ose mund të kaloni një element DOM ose ndonjë përzgjedhës të vlefshëm CSS për të krijuar një shembull të ri të shtojcës:

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

• popperConfigmund të kalohet si një funksion që pranon konfigurimin e paracaktuar të Popper të Bootstrap si argument, në mënyrë që të mund të bashkoni këtë konfigurim të paracaktuar në mënyrën tuaj. Zbatohet për zbritjet, popover-et dhe këshillat e veglave.

• Vlera e paracaktuar për the fallbackPlacementsështë ndryshuar në ['top', 'right', 'bottom', 'left']për vendosje më të mirë të elementeve Popper. Zbatohet për zbritjet, popover-et dhe këshillat e veglave.

• U hoq nënvizat nga metodat statike publike si _getInstance()→ getInstance().