Tsibela kumxholo ophambili Tsiba uye kukhangelo lwamaxwebhu
Check
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

v5.2.0

Uyilo oluhlaziyiweyo

I-Bootstrap v5.2.0 ibonakalisa uhlaziyo loyilo oluchuliweyo kumacandelo ambalwa kunye neepropathi kuyo yonke iprojekthi, ngakumbi border-radiusngamaxabiso asulungekileyo kumaqhosha kunye nolawulo lwefom . Amaxwebhu ethu nawo ahlaziywe ngephepha lasekhaya elitsha, uyilo olulula lwamaxwebhu olungasawohlokiyo amacandelo ebar esecaleni, kunye nemizekelo ebalaseleyo yee- Icons zeBootstrap .

Iinguqu ezininzi zeCSS

Sihlaziye onke amacandelo ethu ukuze sisebenzise izinto eziguquguqukayo zeCSS. Ngelixa i-Sass isaxhasa yonke into, icandelo ngalinye liye lahlaziywa ukuze libandakanye iinguqu ze-CSS kwiiklasi zesiseko secandelo (umzekelo, .btn), ukuvumela ukulungelelanisa ixesha lokwenyani leBootstrap. Kukhupho olulandelayo, siya kuqhubeka nokwandisa ukusetyenziswa kwethu kwezinto eziguquguqukayo zeCSS kuyilo lwethu, iifom, abancedisi, kunye nezinto eziluncedo. Funda ngakumbi malunga noguqulo lweCSS kwicandelo ngalinye kumaphepha abo amaxwebhu.

Ukusetyenziswa kwethu okuguquguqukayo kweCSS kuya kuba kungaphelelanga kude kube yiBootstrap 6. Ngelixa singathanda ukuphumeza ezi zinto kwibhodi yonke, ziqhuba umngcipheko wokubangela utshintsho oluqhawukayo. Umzekelo, ukuseta $alert-border-width: var(--bs-border-width)kwikhowudi yethu yomthombo kwaphula i-Sass enokubakho kwikhowudi yakho ukuba ubusenza $alert-border-width * 2ngesizathu esithile.

Ngokunjalo, naphi na apho kunokwenzeka, siya kuqhubeka sityhalela phambili kwizinto eziguquguqukayo ze-CSS, kodwa nceda uqaphele ukuphunyezwa kwethu kunokuthintelwa kancinci kwi-v5.

Entsha_maps.scss

I-Bootstrap v5.2.0 yazisa ifayile yeSass entsha nge _maps.scss. Ikhupha iimephu ezininzi ze-Sass ukusuka _variables.scssukulungisa umba apho uhlaziyo kwimephu yoqobo lungazange lusetyenziswe kwiimephu zesibini ezandisayo. Umzekelo, uhlaziyo $theme-colorsaluzange lusetyenziswe kwezinye iimephu zomxholo ezixhomekeke $theme-colors, ukwaphula ukuhanjiswa komsebenzi okuphambili. Ngamafutshane, i-Sass inomda apho xa inguqu engagqibekanga okanye imephu isetyenzisiwe , ayinakuhlaziywa. Kukho ukusilela okufanayo kunye neenguqu zeCSS xa zisetyenziselwa ukuqamba ezinye iinguqu zeCSS.

Kungenxa yoko le nto uhlengahlengiso oluguquguqukayo kwi-Bootstrap kufuneka luze emva koko @import "functions", kodwa ngaphambili @import "variables"kunye nezinye izinto zethu zokungenisa elizweni. Okufanayo kuyasebenza kwiimephu zakwa-Sass- kufuneka ubhale ngaphezulu izinto ezingagqibekanga phambi kokuba zisetyenziswe. Ezi mephu zilandelayo zisiwe kwentsha _maps.scss:

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

Ulwakhiwo lwakho lwe-Bootstrap ye-CSS ngoku kufuneka lujonge into enje ngokungenisa iimephu ezahlukeneyo.

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

Izinto ezintsha eziluncedo

Utshintsho olongezelelweyo

  • Yaziswa ngenketho entsha $enable-container-classes. — Ngoku xa ungena kwimifuniselo yoyilo lweGridi yeCSS, .container-*iiklasi zisaza kuqokelelwa, ngaphandle kokuba olu khetho lusetelwe ku false. Izikhongozeli nazo ngoku zigcina amaxabiso azo egutter.

  • Icandelo le-Offcanvas ngoku lineenguqu eziphendulayo . Iklasi yokuqala .offcanvasihlala ingatshintshi-ifihla umxholo kuzo zonke iindawo zokujonga. Ukwenza ukuba iphendule, tshintsha loo .offcanvasklasi kuyo nayiphi na .offcanvas-{sm|md|lg|xl|xxl}iklasi.

  • Izahluli zetafile ezishinyeneyo ngoku zikhethe ukungena. — Siwususile ongqindilili kwaye kunzima kakhulu ukuwubhala ngaphezulu umda phakathi kwamaqela etafile kwaye sawuhambisa kwiklasi yokhetho onokuthi uyifake, .table-group-divider. Jonga amaxwebhu etafile umzekelo.

  • I-Scrollspy ibhalwe ngokutsha ukusebenzisa i-API ye-Intersection Observer , nto leyo ethetha ukubaoffset, kunye nokunye. Jonga uphumezo lwakho lweScrollspy ukuba luchaneke ngakumbi kwaye lungaguquguquki kuphawu lwabo lwe-nav.

  • Iipopovers kunye netooltips ngoku zisebenzisa iCSS variables. Ezinye iinguqu zeCSS ziye zahlaziywa ukusuka koogxa babo beSass ukunciphisa inani leenguqu. Ngenxa yoko, izinto ezintathu eziguquguqukayo ziye zayekiswa kolu kukhutshwa: $popover-arrow-color, $popover-arrow-outer-color, kunye $tooltip-arrow-color.

  • Kongezwe .text-bg-{color}abancedisi abatsha. Endaweni yokuseta umntu .text-*kunye .bg-*nezinto eziluncedo, ngoku unokusebenzisa abancedisi.text-bg-* ukuseta background-colorngokuthelekisa umphambilicolor .

  • Kongezwe .form-check-reverseisilungisi ukuguqula ulandelelwano lweelebhile kunye neebhokisi zokukhangela ezihambelanayo/nonomathotholo.

  • Kongezwe inkxaso yeekholamu ezinemigca kwiitafile kusetyenziswa .table-striped-columnsiklasi entsha.

Uluhlu olupheleleyo lweenguqu, bona iprojekthi ye-v5.2.0 kwi-GitHub .

v5.1.0

  • Inkxaso yovavanyo eyongeziweyo yoyilo lwegridi yeCSS . - Lo ngumsebenzi oqhubekayo, kwaye awukakulungeli ukusetyenziswa kwemveliso, kodwa ungangena kwinqaku elitsha nge-Sass. Ukuyenza isebenze, khubaza igridi engagqibekanga, ngokucwangcisa $enable-grid-classes: falsekwaye uvule iCSS Grid ngokucwangcisa $enable-cssgrid: true.

  • Iinavbar ezihlaziyiweyo ukuxhasa i-offcanvas. -Yongeza iidrowa ze-offcanvas kuyo nayiphi na i- .navbar-expand-*navbar eneeklasi eziphendulayo kunye ne-offcanvas markup.

  • Kongezwe into entsha yesibambi- ndawo . - Icandelo lethu elitsha, indlela yokubonelela ngeebhloko zexeshana endaweni yomxholo wokwenyani ukunceda ukubonisa ukuba kukho into esalayisha kwindawo yakho okanye kwi-app.

  • Iplagi yokugoqa ngoku ixhasa ukudilika okuthe tye . - Yongeza .collapse-horizontalkweyakho .collapseukudilika widthendaweni ye height. Kuphephe ukupeyinta kwakhona isikhangeli ngokuseta min-heightokanye height.

  • Kongezwe istaki esitsha kunye nabancedisi bomthetho othe nkqo. -Faka ngokukhawuleza iipropathi ezininzi ze-flexbox ukwenza ngokukhawuleza uyilo lwesiko kunye nezitaki . Khetha ukusuka kokuthe tye ( .hstack) kunye nokuthe nkqo ( .vstack) izitaki. Yongeza izahluli ezithe nkqo ezifanayo nezinto <hr>ezinabancedi abatsha .vr.

  • Kongezwe iinguqu ezintsha :rootzeCSS zehlabathi. -Yongeza iinguqu ezininzi ezintsha zeCSS :rootkwinqanaba lokulawula <body>izimbo. Okuninzi kusemisebenzini, kubandakanywa kuzo zonke izinto esizisebenzisayo kunye namacandelo, kodwa okwangoku funda iinguqu ze-CSS kwicandelo le-Lungisa .

  • Umbala ogqityiweyo kunye nezinto eziluncedo ezingasemva ukuze kusetyenziswe izinto eziguquguqukayo zeCSS, kwaye kongeze ukukhanya okutsha kokubhaliweyo kunye nezixhobo zokungafihli okungasemva. - .text-* kunye .bg-*nezinto eziluncedo ngoku zakhiwe ngezinto eziguquguqukayo zeCSS kunye rgba()namaxabiso ombala, ekuvumela ukuba wenze ngokwezifiso naziphi na izinto eziluncedo ngezinto ezintsha zokungafihli.

  • Kongezwe imizekelo emitsha yesnippet esekwe ekuboniseni indlela yokwenza izinto zethu ngokwezifiso. - Tsala ulungele ukusebenzisa amacandelo alungiselelweyo kunye nezinye iipateni zoyilo eziqhelekileyo ngemizekelo yethu emitsha yeeSnippets . Iquka okubhalwe phantsi , okwehlayo , amaqela oluhlu , kunye neendlela .

  • Izitayile zokumisa ezisusiweyo ezingasetyenziswanga kwiipopovers kunye netooltips njengoko ezi ziphathwa kuphela nguPopper. $tooltip-marginiyekisiwe kwaye imiselwe nullkwinkqubo.

Ngaba ufuna ulwazi oluninzi? Funda iposi yebhlog ye-v5.1.0.

Molo apho! Utshintsho kukhululo lwethu lokuqala lweBootstrap 5, v5.0.0, lubhalwe ngezantsi. Azibonisi utshintsho olongezelelweyo oluboniswe ngasentla.

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 we-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 nohlaziyo lwemibala eluhlaza okwesibhakabhaka, eluhlaza, ecyan, kunye nepinki 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-control.custom-checkboxngoku .form-check.
    • .custom-control.custom-custom-radiongoku .form-check.
    • .custom-control.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.

  • Ulawulo heightlwefomu alusasetyenziswa lulungisiwe xa kunokwenzeka, endaweni yoko luhlehlisa min-heightekuphuculeni ukwenziwa nokuhambelana namanye amacandelo.

  • 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 eziwisa phantsi ngoku zineseti yophawu data-bs-popper="static"xa indawo yokuhla imile, okanye eyehlayo ikwinavbar. 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).
  • UkuqhawulaIklasi .activeayinakuphinda isetyenziswe kwi- .nav-items, kufuneka isetyenziswe ngokuthe ngqo kwi- .nav-links.

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-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-embed abaphendulayo baye babizwa ngokuba ngabancedisi bomlinganiselo abanamagama amatsha eklasi kunye nokuziphatha okuphuculweyo, kunye ne-CSS eluncedo.

    • Iiklasi zithiywe ngokutsha ukuze zitshintshele bykwi x-aspect ratio. 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 wesiko lombono .

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

    const modal = new bootstrap.Modal('#myModal')
const 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().