Tsibela kumxholo oyintloko Tsibela kukhangelo lwamaxwebhu
in English

Ukufudukela kwi-v5

Landa kwaye ujonge kwakhona utshintsho kwiifayile zomthombo weBootstrap, uxwebhu, kunye namacandelo okukunceda ufuduke ukusuka kwi-v4 ukuya kwi-v5.

Kweli phepha

Ukuxhomekeka

  • Ilahliwe i-jQuery.
  • Iphuculwe ukusuka kwiPopper v1.x ukuya kwiPopper v2.x.
  • Kutshintshwe i-Libsass nge-Dart Sass njengoko umqambi wethu we-Sass onikwe i-Libsass iye yarhoxiswa.
  • Wafuduka e-Jekyll waya eHugo ukuze sakhe amaxwebhu ethu

Inkxaso yebhrawuza

  • Yehla i-Internet Explorer 10 kunye ne-11
  • Iwisiwe iMicrosoft Edge < 16 (Legacy Edge)
  • IFirefox iwile <60
  • I-Safari yehlisiwe <12
  • Iwiswe iOS Safari <12
  • IChrome iwisiwe <60

Utshintsho lwamaxwebhu

  • Iphepha lasekhaya eliyilwe ngokutsha, uyilo lwamaxwebhu, kunye nekhasi elisezantsi.
  • Kongezwe isikhokelo esitsha sePasela .
  • Kongezwe icandelo elitsha le-Customize , ibuyisela i-v4 yephepha le-Theming , kunye neenkcukacha ezintsha kwi-Sass, iinketho zokucwangciswa kwehlabathi jikelele, izikimu zemibala, ii-CSS variables, kunye nokunye.
  • Ulungelelaniswa ngokutsha onke amaxwebhu efom kwicandelo elitsha leeFom , ukwahlula umxholo kumaphepha agxininise ngakumbi.
  • Ngokufanayo, ihlaziywe icandelo loYilo , ukwenza igridi isiqulatho ngokucacileyo ngakumbi.
  • Ithiywe ngokutsha "I-Navs" yecandelo lephepha ukuya kwi-"Navs & Tabs".
  • Lithiywe ngokutsha "Iitsheki" iphepha ukuya ku "Iitshekhi kunye nonomathotholo".
  • Uyilwe ngokutsha i-navbar kwaye wongeza i-subnav entsha ukwenza kube lula ukujikeleza iisayithi zethu kunye neenguqulelo zamaxwebhu.
  • Kongezwe isinqumli esitsha sebhodi yezitshixo kwindawo yokukhangela: Ctrl + /.

Sass

  • Siluyekile udibaniso lwemaphu ye-Sass ukuze kube lula ukususa amaxabiso angafunekiyo. Gcina ukhumbula ukuba ngoku kufuneka uchaze onke amaxabiso kwiimephu zeSass njenge $theme-colors. Jonga indlela yokujongana neemephu zakwaSass .

  • Ukwaphula umsebenzi othiywe ngokutshacolor-yiq() kunye noguquko olunxulumeneyo color-contrast()njengoko ungasanxulumananga nesithuba sombala se-YIQ. Bona #30168.

    • $yiq-contrasted-thresholdithiywe kwakhona ku $min-contrast-ratio.
    • $yiq-text-darkkwaye $yiq-text-lightngokulandelelana zithiywe ngokutsha zibe $color-contrast-darkkunye $color-contrast-light.

  • Ukuqhawula umbuzo weMedia mixins parameters zitshintshile ngendlela enengqiqo.

    • media-breakpoint-down()isebenzisa i-breakpoint ngokwayo endaweni ye-breakpoint elandelayo (umzekelo, media-breakpoint-down(lg)endaweni media-breakpoint-down(md)yeetekeni zokujonga iizibuko ezincinci kuno- lg).
    • Ngokufanayo, eyesibini iparameter ikwanayo media-breakpoint-between()isebenzisa ibreakpoint ngokwayo endaweni yebreakpoint elandelayo (umzekelo, media-between(sm, lg)endaweni media-breakpoint-between(sm, md)yojongo lwezibuko phakathi smkunye lg).

  • Ukwaphula Izimbo zoshicilelo ezisusiweyo kunye $enable-print-stylesnokuguquguquka. Iiklasi zokubonisa ushicilelo zisakho. Bona #28339 .

  • Ukuqhekeka Kulahliwe color(), theme-color(), kunye gray()nemisebenzi exhasa iinguqu. Bona #29083 .

  • Ukuqhawulatheme-color-level() umsebenzi othiywe kwakhona color-level()kwaye ngoku wamkela nawuphi na umbala owufunayo endaweni $theme-coloryemibala kuphela. Bona #29083 Qaphela: color-level() kamva yaphoswa phakathi v5.0.0-alpha3.

  • Ukwaphula Iqanjwe ngokutsha $enable-prefers-reduced-motion-media-querykwaye $enable-pointer-cursor-for-buttonsukuya $enable-reduced-motionkunye $enable-button-pointersnobufutshane.

  • Ukuqhawula Kukhutshwe bg-gradient-variant()umxube. Sebenzisa .bg-gradientiklasi ukongeza i-gradient kwizinto endaweni .bg-gradient-*yeeklasi ezenziweyo.

  • Ukwaphulwa Kususwe imixube ebikade ihoxisiwe:

    • hover, hover-focus, plain-hover-focus, kwayehover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(iphinde yawisa udidi oluluncedo olunxulumeneyo, .text-hide)
    • visibility()
    • form-control-focus()

  • Ukwaphula scale-color()umsebenzi othiyweshift-color() ngokutsha ukunqanda ukungqubana nomsebenzi kaSass wokulinganisa umbala.

  • box-shadowimixube ngoku ivumela nullamaxabiso kwaye yehle nonekwiimpikiswano ezininzi. Bona #30394 .

  • Umxube border-radius()ngoku unexabiso elingagqibekanga.

Inkqubo yombala

  • Isixokelelwano sombala ebesisebenza color-level()saza $theme-color-intervalsasuswa sixhasa inkqubo entsha yombala. Yonke lighten()kunye darken()nemisebenzi kwi-codebase yethu ithathelwa indawo tint-color()kwaye shade-color(). Le misebenzi iya kuxuba umbala nokuba mhlophe okanye mnyama endaweni yokutshintsha ukukhanya kwayo ngexabiso elimiselweyo. I shift-color()-tint okanye i-shades umbala ngokuxhomekeke ekubeni ubunzima bayo beparameter bulungile okanye bungalunganga. Bona #30622 ngeenkcukacha ezithe vetshe.

  • Kongezwe imibala emitsha kunye nemibala yombala ngamnye, ukubonelela ngemibala esithoba eyahlukileyo kumbala wesiseko ngamnye, njengoguquko olutsha lweSass.

  • Uphuculo lomahluko wombala. Umlinganiselo wokuchasana kombala ogingqiweyo ukusuka ku-3:1 ukuya ku-4.5:1 kunye nemibala eblue, eluhlaza, ecyan, kunye nepinki ehlaziyiweyo ukuqinisekisa umahluko weWCAG 2.1 AA. Kwakhona utshintshe umbala wethu womahluko ukusuka $gray-900ku $black.

  • Ukuxhasa inkqubo yethu yemibala, songeze isiko tint-color()kunye shade-color()nemisebenzi emitsha ukuxuba imibala yethu ngokufanelekileyo.

Uhlaziyo lwegridi

  • Inqaku elitsha! Kongezwe indawo entsha xxlyokuqhawula 1400pxkunye nokunyuka. Akukho lutshintsho kuzo zonke ezinye iindawo zokuphumla.

  • Iigatha eziphuculweyo. Iigatha ngoku zisetiwe kwi-rems, kwaye zincinci kune-v4 ( 1.5rem, okanye malunga 24px, ezantsi ukusuka 30px). Oku kulungelelanisa iigutha zenkqubo yethu yegridi kunye nezixhobo zethu zokubeka izithuba.

    • Kongezwe udidi olutsha lwegutter ( .g-*, .gx-*, kunye .gy-*) ukulawula iigatha ezithe tye/ezithe nkqo, iigatha ezithe tyaba, kunye neegatha ezithe nkqo.
    • Ukwaphulwa.no-gutters kunikwe igama .g-0ngokutsha ukuze kutshatiswe nezinto eziluncedo kwi-gutter entsha.

  • Imihlathi ayisasetyenziswa position: relative, ngoko kungafuneka udibanise .position-relativekwezinye izinto ukubuyisela ukuziphatha.

  • Ukuqhawuka Ziye zayeka iiklasi ezininzi ebezihlala .order-*zingasetyenziswa. Ngoku sibonelela kuphela .order-1ngaphandle .order-5kwebhokisi.

  • Ukuqhawula Kulahliwe .mediaicandelo njengoko linokuphinda liphindwe ngokulula ngezinto eziluncedo. Jonga i-#28265 kunye nephepha lezinto eziguqukayo zomzekelo .

  • Ukwaphula bootstrap-grid.css ngoku kusebenza kuphela box-sizing: border-boxkwikholamu endaweni yokusetha kwakhona ubungakanani bebhokisi yehlabathi. Ngale ndlela, izitayile zethu zegridi zinokusetyenziswa kwiindawo ezininzi ngaphandle kokuphazamiseka.

  • $enable-grid-classesayisayi kuvala ukuveliswa kweeklasi zesikhongozeli kwakhona. Bona #29146.

  • Ihlaziywe i- make-colmixin ukuya kwimiqolo elinganayo ngaphandle kobukhulu obuxeliweyo.

Umxholo, Qalisa kwakhona, njl

  • I- RFS ngoku yenziwe ngokungagqibekanga. Izihloko ezisebenzisa i-font-size()mixin ziya kuzilungelelanisa ngokuzenzekelayo ukukalafont-sizekunye ne-viewport. Eli nqaku belikade likhetha ukungena nge-v4.

  • Ukwaphula Kuqwalaselwe umboniso wethu wokuchwetheza ukuze kuthathelwe indawo izinto $display-*eziguquguqukayo kunye $display-font-sizesnemephu ye-Sass. Kwakhona kususwe ii- $display-*-weightvariables zomntu omnye $display-font-weightkunye nohlengahlengiso font-sizes.

  • Kongezwe iisayizi ezimbini zezihloko ezintsha .display-*, .display-5kunye .display-6.

  • Unxulumano lukrwelelwa umgca ngaphantsi ngokungagqibekanga (hayi nje kwi hover), ngaphandle kokuba yinxalenye yamacandelo athile.

  • Ziyilwe ngokutsha iitafile ukuhlaziya izitayile zazo kunye nokuzakha kwakhona ngezinto eziguquguqukayo zeCSS zolawulo ngakumbi kwisitayile.

  • Ukwaphula iitafile ze- Nested akusazifuzi izitayile kwakhona.

  • Ukwaphulwa .thead-light kwaye .thead-darkzilahliwe ngokuthanda .table-*iiklasi ezahlukeneyo ezinokuthi zisetyenziswe kuzo zonke izinto zetafile ( thead, tbody, tfoot, tr, thkunye td).

  • Ukuqhawula Umxube table-row-variant()ubizwa ngokutsha table-variant()kwaye wamkela kuphela iiparamitha ezi-2: $color(igama lombala) kunye $value(ikhowudi yombala). Umbala womda kunye nemibala ye-accent ibalwa ngokuzenzekelayo ngokusekelwe kwi-table factor variables.

  • Ukwahlula iiguquguquko zeselfowuni ezikhuselweyo zibe -ykunye -x.

  • Ukuqhawuka.pre-scrollable . _ Bona #29135

  • Izixhobo zokwaphula .text-* azisongezi i-hover kunye neendawo zokugxila kumakhonkco kwakhona. .link-*iiklasi zabancedisi zingasetyenziswa endaweni yoko. Bona #29267

  • Ukuqhawuka.text-justify . _ Bona #29793

  • Cwangcisa ngokutsha okumiselweyo okuthe tye kunye padding-leftnezinto ukusuka kwibhrawuza ukuya kwi .<ul><ol>40px2rem

  • Yongeziweyo $enable-smooth-scroll, esebenza scroll-behavior: smoothkwihlabathi-ngaphandle kwabasebenzisi abacela ukuncitshiswa kwentshukumo ngombuzo prefers-reduced-motionwemidiya. Bona #31877

RTL

  • Umkhombandlela othe tyaba izinto eziguquguqukayo ezithile, izinto eziluncedo, kunye nemixube zonke ziye zanikwa elinye igama ukuze zisebenzise iipropati ezinengqiqo ezifana nezo zifumaneka kuyilo lwe-flexbox-umz, startkwaye endendaweni leftye right.

Iifom

  • Kongezwe iifomu ezintsha ezidadayo! Siwunyusile umzekelo weelebhile ezidadayo kumacandelo efom exhaswa ngokupheleleyo. Jonga iphepha elitsha leelebhile ezidadayo.

  • Ukwaphula i-Consolidated yemveli kunye nezinto zefom yesiko. Iibhokisi zokutshekisha, oonomathotholo, ukhetho, kunye namanye amagalelo aneeklasi zomthonyama kunye nezesiko kwi-v4 ziye zadityaniswa. Ngoku phantse zonke izinto zethu zefom zisisiqhelo ngokupheleleyo, uninzi ngaphandle kwesidingo seHTML yesiko.

    • .custom-checkngoku .form-check.
    • .custom-check.custom-switchngoku .form-check.form-switch.
    • .custom-selectngoku .form-select.
    • .custom-filekwaye .form-filezithathelwe indawo zizimbo zesiko ngaphezulu kwe .form-control.
    • .custom-rangengoku .form-range.
    • Iwisiwe yemveli .form-control-filekwaye .form-control-range.

  • Ukuqhekeka Kuwise .input-group-appendkwaye .input-group-prepend. Ngoku unokongeza amaqhosha kwaye .input-group-textnjengabantwana ngokuthe ngqo bamaqela egalelo.

  • Irediyasi yomda esele Ilahlekile kwiqela longeniso kunye nebug yengxelo yokuqinisekisa ekugqibeleni ilungisiwe ngokongeza .has-validationudidi olongezelelweyo kumaqela ongeniso ngokuqinisekisa.

  • Ukwaphula Iiklasi ezilahliweyo zoyilo lwenkqubo yethu yegridi. Sebenzisa igridi yethu kunye nezinto eziluncedo endaweni ye .form-group, .form-row, okanye .form-inline.

  • Iileyibhile zeFom zokuqhekeza ngoku zifuna .form-label.

  • .form-textUkwaphulwa akusaseti ,display kukuvumela ukuba wenze ngaphakathi okanye ubhloke umbhalo woncedo njengoko unqwenela ngokutshintsha into ye-HTML.

  • Ii icon zokuqinisekisa azisasetyenziswa kwi <select>s nge multiple.

  • Umthombo ohlengahlengisiweyo weefayile zeSass phantsi scss/forms/, kubandakanywa izimbo zeqela longeniso.

Amacandelo

  • Amaxabiso adityanisiweyo kwizilumkiso, i-breadcrumbs, amakhadi, okokwehla padding, amaqela oluhlu, iimodyuli, iipopovers, kunye neengcebiso zezixhobo ezisekelwe kuguquko lwethu $spacer. Bona #30564 .

IAccordion

Izilumkiso

  • Izivuseleli ngoku zinemizekelo ene-icon .

  • Susa izimbo zesiko kwi <hr>s kwisivuseleli ngasinye kuba sele zisebenzisa currentColor.

Iibheji

  • Ukwaphulwa Kulahliwe zonke .badge-*iiklasi zemibala kwizinto eziluncedo ezingasemva (umzekelo, sebenzisa .bg-primaryendaweni ye .badge-primary).

  • Ukuqhekeka Kulahliwe .badge-pill-sebenzisa into .rounded-pilleluncedo endaweni yoko.

  • Ukwaphulwa Kususwe ihover kunye nezimbo zokugxila <a>kunye <button>neempawu.

  • Ukunyuswa kwezikhuseli ezihlala zikhona kwiibheji ukusuka .25em/ .5emukuya .35em/ .65em.

  • Yenziwe lula inkangeleko engagqibekanga yesonka sesonka ngokususa padding, background-colorkunye border-radius.

  • Kongezwe ipropathi entsha yesiko le-CSS --bs-breadcrumb-dividerukwenza kube lula ngaphandle kokufuna ukuphinda kuqokelelwe iCSS.

Amaqhosha

  • Ukwaphula amaqhosha okuguqula , kunye neebhokisi zokukhangela okanye iirediyo, azisafuni iJavaScript kwaye inophawu olutsha . Asisafuni nto yokusonga, yongeza .btn-checkkwi <input>, kwaye uyibhanqe nazo naziphi na .btniiklasi ezikwi <label>. Bona #30650 . Amaxwebhu oku asukile kwiphepha lethu lamaQhosha ukuya kwicandelo elitsha leeFom.

  • Ukuqhekeka Kulahliwe .btn-blockkwizinto eziluncedo. Endaweni yokusebenzisa .btn-blockkwi- .btn, songela amaqhosha akho kunye .d-gridnesixhobo .gap-*sokuwabeka njengoko kufuneka. Tshintshela kwiiklasi eziphendulayo ukuze ukwazi ukulawula ngakumbi kuzo. Funda amaxwebhu ngemizekelo ethile.

  • Uhlaziyo lwethu button-variant()kunye button-outline-variant()nemixube ukuxhasa iiparamitha ezongezelelweyo.

  • Amaqhosha ahlaziyiweyo ukuqinisekisa ukwanda kokuchasana kwi-hover kunye neemeko ezisebenzayo.

  • Amaqhosha avaliweyo ngoku ane pointer-events: none;.

Ikhadi

  • Ukuqhekeka Kuwiswe .card-deckngokuthanda igridi yethu. Gquba amakhadi akho kwiiklasi zekholomu kwaye wongeze .row-cols-*isikhongozelo somzali ukuze uphinde wenze iidekhi zekhadi (kodwa ngolawulo olungakumbi malunga nokulungelelaniswa okuphendulayo).

  • Ukuqhawuka Kuwiswe .card-columnsngokuthanda iMasonry. Bona #28922 .

  • Ukuqhawuka Kutshintshwe iakhodiyoni .cardesekwe ngecandelo elitsha leAccordion .

  • Kongezwe ukwahluka okutsha .carousel-darkkumbhalo omnyama, ulawulo, kunye nezalathi (ezinkulu kwimvelaphi ekhanyayo).

  • Kutshintshwe ii-icon ze-chevron zolawulo lwe-carousel ngee-SVG ezintsha ezivela kwii- Icons zeBootstrap .

Vala iqhosha

  • Ukwaphulwa Kunikwe .closeelinye .btn-closeigama elingaphantsi kwegama eliqhelekileyo.

  • Vala amaqhosha ngoku sebenzisa background-image(i-SVG elungisiweyo) endaweni ye-a &times;kwi-HTML, ivumela ukwenziwa kube lula ngaphandle kwesidingo sokuchukumisa uphawu lwakho.

  • Kongezwe .btn-close-whiteuhlobo olutsha olusebenzisa filter: invert(1)ukwenza umahluko ophezulu wokugxotha ii-icon ngokuchasene nemvelaphi emnyama.

Ukuwa

  • Isusiwe i-ankile yokuskrola yee-accordions.

  • Kongezwe .dropdown-menu-darkuhlobo olutsha kunye noguquguquko oluhambelanayo lokwehliswa okumnyama okufunekayo.

  • Kongezwe utshintsho olutsha lwe $dropdown-padding-x.

  • Yenze mnyama isahluli sohlayo ukwenzela umahluko ophuculweyo.

  • Ukwaphula Yonke iminyhadala yokwehla ngoku iqaliswe kwiqhosha lokuguqula lokwehla kwaye emva koko iqatywe ukuya kwinto yomzali.

  • Iimenu ezilahliweyo ngoku zineseti yophawu data-bs-popper="static"xa indawo yokuhla imile kwaye data-bs-popper="none"xa ukwehla kukwi-navbar. Oku kongezwa yiJavaScript yethu kwaye isinceda ukuba sisebenzise izimbo zesiko ngaphandle kokuphazamisa indawo yePopper.

  • Ukwaphula iLahliwe ukhethoflip lweplagin eyehlayo ethanda uqwalaselo lwendalo lwePopper. Ngoku ungakhubaza indlela yokuziphatha ngokudlula uluhlu olungenanto lwenketho fallbackPlacementskwisilungisi se- flip .

  • Iimenu ezilahliweyo ngoku zinokucofa ngokhetho olutsha autoCloselokuphatha impatho yokuvala ngokuzenzekelayo . Ungasebenzisa olu khetho ukwamkela ukucofa ngaphakathi okanye ngaphandle kwemenu eyehlayo ukuyenza isebenze.

  • Iidropdowns ngoku zixhasa .dropdown-items esongelwe kwi- <li>s.

Jumbotron

Uluhlu lweqela

  • Kongezwe izinto ezintsha nulleziguquguqukayo ze font-size, font-weight, color, kunye :hover colorneklasi .nav-link.
  • Ukwaphula iiNavbar ngoku kufuna isikhongozeli ngaphakathi (ukwenza lula kakhulu iimfuno zesithuba kunye neCSS efunekayo).

I-offcanvas

Ukwenziwa kwePagination

  • Amakhonkco ePagination ngoku ayakwazi ukwenzeka margin-leftajikelezwe ngokuguquguqukayo kuzo zonke iikona xa zahluliwe enye kwenye.

  • Yongezwa transitions kumakhonkco epagination.

Iipopovers

  • .arrowUkwaphula kunikwe igama kwakhona kwitemplate.popover-arrow yethu yepopover engagqibekanga.

  • whiteListInketho ethiywe ngokutsha ku allowList.

Iispinners

  • Iispinner ngoku prefers-reduced-motion: reduceziwonga ngokucothisa oopopayi. Bona #31882 .

  • Ulungelelwaniso oluthe nkqo lwesipinari.

Iithowusti

  • Iithowusti ngoku zinokubekwa kwi- .toast-containera ngoncedo lokubeka izinto eziluncedo .

  • Kutshintshwe ubude bexesha le-toast elimiselweyo ukuya kwimizuzwana emi-5.

  • Isusiwe overflow: hiddenkwi toasts kwaye endaweni border-radiuss efanelekileyo kunye calc()nemisebenzi.

Iingcebiso

  • Ukwaphula.arrow kunikwe igama kwakhona .tooltip-arrowkwithempleyithi yethu yesixhobo esihlala sihleli.

  • Ukwaphula Ixabiso elimiselweyo leenguqu fallbackPlacementslitshintshelwe ['top', 'right', 'bottom', 'left']ekubekweni ngcono kwezinto zepopper.

  • UkwaphulawhiteList Ukhetho olunikwe ngokutsha ukuya allowList.

Izinto eziluncedo

  • Ukwaphula Kunikwe ngokutsha izinto ezininzi zokusebenzisa amagama eepropathi ezinengqiqo endaweni yamagama ezalathiso kunye nokongezwa kwenkxaso ye-RTL:

    • Ithiywe ngokutsha .left-*kwaye .right-*ukuya .start-*kunye .end-*.
    • Ithiywe ngokutsha .float-leftkwaye .float-rightukuya .float-startkunye .float-end.
    • Ithiywe ngokutsha .border-leftkwaye .border-rightukuya .border-startkunye .border-end.
    • Ithiywe ngokutsha .rounded-leftkwaye .rounded-rightukuya .rounded-startkunye .rounded-end.
    • Ithiywe ngokutsha .ml-*kwaye .mr-*ukuya .ms-*kunye .me-*.
    • Ithiywe ngokutsha .pl-*kwaye .pr-*ukuya .ps-*kunye .pe-*.
    • Ithiywe ngokutsha .text-leftkwaye .text-rightukuya .text-startkunye .text-end.

  • Ukwaphulwa kwemida echaseneyo ekhubazekileyo ngokungagqibekanga.

  • Yongezwe .bg-bodyudidi olutsha lokucwangcisa ngokukhawuleza <body>imvelaphi kwizinto ezongezelelweyo.

  • Kongezwe indawo entsha yezinto eziluncedo ze top, right, bottom, kunye left. Amaxabiso abandakanya 0, 50%, kunye 100%nepropati nganye.

  • Kongezwe izinto ezintsha .translate-middle-xkunye .translate-middle-ynezinto eziluncedo kwindawo ethe tyaba okanye ethe nkqo kumbindi ogqibeleleyo/ezizinzileyo izinto ezimiyo.

  • Kongezwe border-widthizixhobo ezitsha .

  • Ukuqhawula Kutshaywe igama .text-monospaceku .font-monospace.

  • Ukuqhawula Kususiwe .text-hidenjengoko kuyindlela yakudala yokufihla okubhaliweyo ekungafuneki kuphinde kusetyenziswe.

  • .fs-*Izinto eziluncedo ezongeziweyo font-size(ezine-RFS enikwe amandla). Ezi zisebenzisa isikali esifanayo njengezihloko ezingagqibekanga ze-HTML (1-6, enkulu ukuya kwencinci), kwaye inokuguqulwa ngemephu ye-Sass.

  • Ukwaphula ii-Renamed utility.font-weight-* njengobufutshane .fw-*kunye nokungaguquguquki.

  • Ukwaphula ii-Renamed utility.font-style-* njengobufutshane .fst-*kunye nokungaguquguquki.

  • Yongezwe .d-gridukubonisa izinto eziluncedo kunye nezinto ezintsha gap( .gap) zeCSS Igridi kunye noyilo lwebhokisi yeflex.

  • Ukuqhekeka Kususiwe .rounded-smkwaye rounded-lg, kwaye yazisa isikali esitsha seeklasi, .rounded-0ukuya .rounded-3. Bona #31687 .

  • Kongezwe line-heightizinto eziluncedo ezintsha: .lh-1, .lh-sm, .lh-basekunye .lh-lg. Bona apha .

  • Uhambise .d-noneusetyenziso kwiCSS yethu ukuyinika ubunzima obungaphezulu kwezinye izinto eziluncedo zokubonisa.

  • Wandisiwe .visually-hidden-focusableumncedi ukuba asebenze kwizikhongozeli, esebenzisa :focus-within.

Abancedi

  • Ukuqhawula abancedisi be-Responsive embed baye babizwa ngokuba ngabancedisi bomlinganiselo abanamagama amatsha eklasi kunye nokuziphatha okuphuculweyo, kunye ne-CSS eluncedo.

    • Iiklasi zithiywe ngokutsha ukuze zitshintshelwe bykumlinganiselo xwembonakalo. Ngokomzekelo, .ratio-16by9ngoku .ratio-16x9.
    • Silahle .embed-responsive-itemumkhethi weqela kunye neqela ukuze sikhethe .ratio > *umkhethi olula. Akukho klasi ifunekayo, kwaye umncedisi womlinganiselo ngoku usebenza nayo nayiphi na into ye-HTML.
    • Imephu ye- $embed-responsive-aspect-ratiosSass ithiywe ngokutsha $aspect-ratioskwaye amaxabiso ayo enziwe lula ukubandakanya igama leklasi kunye nepesenti njengesibini key: value.
    • Izinto eziguquguqukayo zeCSS ngoku zenziwe kwaye zibandakanyiwe kwixabiso ngalinye kwimephu ye-Sass. Lungisa --bs-aspect-ratiouguqulo kwi- .ratiouyila nawuphi na umlinganiselo wembonakalo yesiko .

  • Ukwaphula iiklasi “zokufunda isikrini” ngoku “zifihlwe ngokubonakalayo” iiklasi .

    • Itshintshe ifayile yeSass ukusuka scss/helpers/_screenreaders.scsskwiscss/helpers/_visually-hidden.scss
    • Ithiywe ngokutsha .sr-onlykwaye .sr-only-focusableukuya .visually-hiddenkunye.visually-hidden-focusable
    • Ithiywe ngokutsha sr-only()kunye sr-only-focusable()nemixube ukuya visually-hidden()kunye visually-hidden-focusable().

  • bootstrap-utilities.cssngoku baquka nabancedi bethu. Abancedi akusekho mfuneko yokuba bangeniswe kumazwe angaphandle kwizakhiwo zesiko.

JavaScript

  • Ilahliwe ukuxhomekeka kwejQuery kwaye iphinde ibhale iiplagi ukuba zibe kwiJavaScript eqhelekileyo.

  • Iimpawu zokwaphula iDatha yazo zonke iiplagi zeJavaScript ngoku zifakwe ngamagama ukunceda ukwahlula ukusebenza kweBootstrap kumaqela esithathu kunye nekhowudi yakho. Ngokomzekelo, sisebenzisa data-bs-toggleendaweni ye- data-toggle.

  • Zonke iiplagi ezifakiweyo ngoku zingamkela umkhethi weCSS njengengxoxo yokuqala. Ungadlula into yeDOM okanye nawuphi na umkhethi osebenzayo weCSS ukwenza umzekelo omtsha weplagi:

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

  • popperConfigingagqithiswa njengomsebenzi owamkela uqwalaselo olungagqibekanga lweBootstrap lwePopper njengempikiswano, ukuze ukwazi ukudibanisa olu qwalaselo olungagqibekanga kwindlela yakho. Isebenza kwiidropdowns, popovers, kunye netooltips.

  • Ixabiso elimiselweyo le- fallbackPlacementsitshintshelwe ['top', 'right', 'bottom', 'left']ekubekweni okungcono kwezinto zePopper. Isebenza kwiidropdowns, popovers, kunye netooltips.

  • Kususwe i-score kwiindlela ezizinzileyo zikawonke-wonke ezifana _getInstance()→ getInstance().