Tsibela kumxholo ophambili Tsiba uye 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 .

  • UkuqhawulaUmsebenzi othiywe ngokutsha color-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.

  • UkuqhawulaI-Media query mixins parameters itshintshile 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).

  • UkuqhawulaIzimbo zokuprinta ezisusiweyo kunye $enable-print-stylesnokwahluka. Iiklasi zokubonisa ushicilelo zisakho. Bona #28339 .

  • UkuqhawulaIlahliwe 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.

  • UkuqhawulaIthiywe ngokutsha $enable-prefers-reduced-motion-media-querykunye $enable-pointer-cursor-for-buttonsnokuya $enable-reduced-motionkunye $enable-button-pointersnobufutshane.

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

  • Ukuqhawula Ikhutshiwe imixube ebikade iyekiwe:

    • 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()

  • Ukuqhawulascale-color()Umsebenzi othiywe shift-color()ngokutsha ukunqanda ukungqubana nomsebenzi we-Sass 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.
    • UkuqhawulaInikwe elinye igama .no-guttersukuze .g-0itshatise izinto ezintsha zokugalela amanzi.

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

  • UkuqhawulaIiklasi ezininzi .order-*ziye zayeka ukusetyenziswa rhoqo. Ngoku sibonelela kuphela .order-1ngaphandle .order-5kwebhokisi.

  • UkuqhawulaIlahliwe .mediaicandelo njengoko inokuphinda iphindwe ngokulula ngezinto eziluncedo. Jonga i-#28265 kunye nephepha lezinto eziguqukayo zomzekelo .

  • Ukuqhawula bootstrap-grid.cssngoku isebenza kuphela box-sizing: border-boxkumqolo 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.

  • UkuqhawulaUhlengahlengiso lwethu lokuchwetheza lokuchwetheza ukuze endaweni yenguqu zethu $display-*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.

  • UkuqhawulaIitheyibhile ezibekwe kwindlwane aziphindi zifumane izimbo.

  • Ukuqhawula .thead-lightkwaye .thead-darkziwisiwe kukhetho .table-*olwahlukileyo lweeklasi ezinokuthi zisetyenziswe kuzo zonke iziqalelo zetafile ( thead, tbody, tfoot, tr, thkunye td).

  • UkuqhawulaUmxube table-row-variant()uqanjwe 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.

  • UkuqhawulaIphumile .pre-scrollableiklasi. Bona #29135

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

  • UkuqhawulaIphumile .text-justifyiklasi. Bona #29793

  • Ukuqhawula <hr>izinto ezisetyenziswayo ngoku heightendaweni borderyokuxhasa ngcono sizeuphawu. Oku kukwavumela ukusetyenziswa kwezinto eziluncedo zokudibanisa ukwenza izahluli ezityebileyo (umz., <hr class="py-1">).

  • 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.

  • Ukuqhawula Izinto ezidityanisiweyo zemveli kunye nefom yesiqhelo. 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.

  • UkuqhawulaYehla .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.

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

  • UkuqhawulaIilebhile zefom ngoku zifuna .form-label.

  • Ukuqhawula .form-textakusaseti display, ikuvumela ukuba wenze ngaphakathi okanye uvimbele okubhaliweyo koncedo njengoko unqwenela ngokutshintsha into yeHTML.

  • 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

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

  • UkuqhawulaIlahliwe .badge-pill-sebenzisa into .rounded-pilleluncedo endaweni yoko.

  • UkuqhawulaIsusiwe ihover kunye nezimbo zokugxila <a>kunye <button>nezinto.

  • 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

  • Ukuqhawula Amaqhosha okuguqula , kunye neebhokisi zokukhangela okanye iirediyo, azisafuni JavaScript kwaye unophawu 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.

  • Ukuqhawula Ilahliwe .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

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

  • UkuqhawulaYehla .card-columnsngokuthanda iMasonry. Bona #28922 .

  • UkuqhawulaKutshintshwe iaccordion .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

  • UkuqhawulaIthiywe ngokutsha .closeukuya kwigama .btn-closeelincinci elenziwe lafana.

  • 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.

  • UkuqhawulaYonke iminyhadala yokwehla ngoku ishukunyiswa kwiqhosha lokuguqula elilahlayo 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.

  • UkuqhawulaIlahliwe flipukhetho lweplagin eyehlayo ithanda 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.
  • UkuqhawulaIiNavbar ngoku zifuna 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

  • UkuqhawulaIqanjwe .arrowngokutsha .popover-arrowkwitemplate 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

  • UkuqhawulaInikwe igama elitsha .arrowkwithempleyithi .tooltip-arrowyethu yesixhobo esingagqibekanga.

  • UkuqhawulaIxabiso elimiselweyo le- fallbackPlacementsitshintshelwe ['top', 'right', 'bottom', 'left']ekubekweni ngcono kwezinto ze-popper.

  • UkuqhawulawhiteListInketho ethiywe ngokutsha ku allowList.

Izinto eziluncedo

  • UkuqhawulaIthiywe ngokutsha izinto ezininzi ukuze kusetyenziswe amagama epropathi ebhadlileyo 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.

  • UkuqhawulaIkhubaziwe imida echaseneyo 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 .

  • UkuqhawulaInikwe igama ngokutsha .text-monospaceibe .font-monospace.

  • UkuqhawulaIsusiwe .text-hidenjengoko iyindlela yakudala yokufihla okubhaliweyo okungamelanga 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.

  • UkuqhawulaIinkonzo ezithiywe .font-weight-*ngokutsha njengobufutshane .fw-*kunye nokungaguquguquki.

  • UkuqhawulaIinkonzo ezithiywe .font-style-*ngokutsha njengobufutshane .fst-*kunye nokungaguquguquki.

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

  • UkuqhawulaIsusiwe .rounded-smkunye 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-embed abaphendulayo 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 .

  • Ukuqhawula Iiklasi “zokufunda isikrini” ngoku “zifihliwe 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.

  • UkuqhawulaIimpawu zedatha yazo zonke iiplagi zeJavaScript ngoku zinezithuba zamagama ukunceda ukwahlula ukusebenza kweBootstrap kwiqela lesithathu 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().