U guuraya v5

v5.2.0

Naqshad dib loo cusbooneysiiyay

Bootstrap v5.2.0 waxa ku jira casriyaynta naqshadaynta daahsoon ee qaybo badan oo ka mid ah qaybaha iyo guryaha mashruuca oo dhan, gaar ahaan iyada oo loo marayo border-radiusqiyam la safeeyey oo ku yaal badhamada iyo qaabka kontaroolada . Dukumeentiyadayada sidoo kale waxaa lagu cusboonaysiiyay bog cusub, qaabaynta dukumeenti fudud oo aan hadda dumin qaybaha dhinaca dhinaceeda, iyo tusaalooyin caan ah oo Bootstrap ah .

doorsoomayaal CSS badan

Waxaan cusboonaysiinay dhammaan qaybahayada si aan u isticmaalno doorsoomayaasha CSS. Iyadoo Sass uu wali wax walba hoosta ka xariiqayo, qayb kasta waa la cusboonaysiiyay si loogu daro doorsoomayaasha CSS ee fasalada aasaasiga ah (tusaale, .btn), taasoo u oggolaanaysa in wax badan oo dhab ah lagu beddelo Bootstrap. Siideynta soo socota, waxaan sii wadi doonaa inaan ballaarino isticmaalkeena doorsoomayaasha CSS qaabeynta, foomamka, caawiyayaasha, iyo yutiilitiyada. Ka akhri wax badan oo ku saabsan doorsoomayaasha CSS ee qayb kasta boggooda dukumeentiyada.

Isticmaalka doorsoomayaasha CSS waxa uu ahaan doonaa mid aan dhamaystirnayn ilaa Bootstrap 6. In kasta oo aanu jeclaan lahayn in aanu si buuxda kuwan uga hirgelino guud ahaan guddiga, waxa ay halis ugu jiraan in ay keenaan isbedelo. Tusaale ahaan, dejinta $alert-border-width: var(--bs-border-width)koodhka ishayadu waxay jebisaa suurtagalnimada Sass ee koodkaaga haddii aad u samaynaysay $alert-border-width * 2sabab qaar ka mid ah.

Sidan oo kale, meel kasta oo suurtagal ah, waxaan sii wadi doonaa inaan u riixno doorsoomayaal CSS oo badan, laakiin fadlan ogow in hirgelinteena ay wax yar ku xaddidan tahay v5.

Cusub_maps.scss

Bootstrap v5.2.0 waxay soo bandhigtay fayl cusub oo Sass leh _maps.scss. Waxay ka saartaa khariidado badan oo Sass ah _variables.scsssi ay u xalliso arrin meesha cusboonaysiinta khariidadda asalka ah aan lagu dabaqin khariidado sare oo fidiyay. Tusaale ahaan, cusboonaysiinta $theme-colorslaguma dabaqin maabyada mawduucyada kale ee ku tiirsan $theme-colors, jebinta socodka shaqada ee habaynta muhiimka ah. Marka la soo koobo, Sass waxay leedahay xaddid halka mar haddii doorsoomiyaha caadiga ah ama khariidad la isticmaalo , aan la cusboonaysiin karin. Waxa jira nusqaan la mid ah doorsoomayaasha CSS marka loo isticmaalo in lagu sameeyo doorsoomayaasha CSS kale.

Tani waa sababta isbeddelada isbeddelka ah ee Bootstrap ay tahay inay yimaadaan ka dib @import "functions", laakiin ka hor @import "variables"iyo inta kale ee kaydkayaga soo dejinta. Isla sidaas oo kale ayaa khuseysa khariidadaha Sass - waa inaad ka gudubtaa khaladaadka ka hor inta aan la isticmaalin. Khariidadaha soo socda ayaa loo raray kan cusub _maps.scss:

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

CSS caadadii kuu dhisnayd waa inay u ekaataa wax sidan oo kale ah oo leh khariidado gooni ah oo la soo dejiyo.

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

Adeegyada cusub

• font-weightAdeegyada la balaariyay si loogu daro .fw-semiboldxarfaha semibold
• border-radiusAdeegyada la balaariyay si loogu daro laba cabbir oo cusub, .rounded-4iyo .rounded-5, doorashooyin badan.

Isbeddelo dheeri ah

• $enable-container-classesDoorasho cusub oo lasoo bandhigay . - Hadda markaad dooranayso qaabka tijaabada ah ee CSS Grid, .container-*xiisadaha wali waa la ururin doonaa, ilaa doorashadan loo dejiyay false. Konteenarada sidoo kale hadda waxay ilaalinayaan qiyamka mareenka.

• Qaybta Offcanvas hadda waxay leedahay kala duwanaansho jawaab celin ah . Fasalka asalka .offcanvasah wali waxba kama beddelin—waxa uu qariyaa dhammaan meelaha daawashada. Si aad uga dhigto mid jawaab celin leh, u beddel .offcanvasfasalkaas fasal kasta .offcanvas-{sm|md|lg|xl|xxl}.

• Qaybiyayaal miis oo dhumuc weyn ayaa hadda doortay. - Waxaan ka saarnay dhumuc weyn oo aad u adag in laga gudbo xadka u dhexeeya kooxaha miiska waxaana u rarnay fasal ikhtiyaari ah oo aad codsan karto, .table-group-divider. Tusaale ahaan warqadaha miiska u eeg.

• Scrollspy dib ayaa loo qoray si loo isticmaalo Isgooyska Observer API , taas oo macnaheedu yahay uma baahnid xidhidh waalid qaraabo ah, deprecatesoffsetconfig, iyo in ka badan. U fiirso hirgelinta Scrollspy kaaga inay noqdaan kuwo sax ah oo joogto ah muujintooda nav.

• Popovers iyo aaladaha hadda isticmaala doorsoomayaasha CSS. Doorsoomayaasha CSS qaarkood ayaa laga cusboonaysiiyay dhiggooda Sass si loo dhimo tirada doorsoomayaasha. Natiijadu waxay tahay, saddex doorsoome ayaa meesha ka saaray sii deyntan: $popover-arrow-color, $popover-arrow-outer-color, iyo $tooltip-arrow-color.

• Lagu daray .text-bg-{color}caawiyeyaal cusub. Halkii aad dejin lahayd shakhsi ahaan .text-*iyo .bg-*adeegyada, waxaad hadda isticmaali kartaa .text-bg-*caawiyayaasha si aad u dejiso background-colorhorudhac is barbar socda color.

• Wax ka beddelka lagu daray .form-check-reversesi loo rogo nidaamka sumadaha iyo sanduuqyada hubinta/ raadiyeyaasha la xidhiidha.

• Tiirar xariif ah oo lagu daray waxay taageerayaan miisaska iyada oo loo marayo .table-striped-columnsfasalka cusub.

Si aad u hesho liis dhamaystiran oo isbedel ah, eeg mashruuca v5.2.0 ee GitHub .

v5.1.0

• Taageero tijaabo ah oo lagu daray qaabka CSS Grid . - Tani waa shaqo socota, oo aan weli diyaar u ahayn isticmaalka wax soo saarka, laakiin waxaad dooran kartaa habka cusub ee Sass. Si aad awood ugu yeelato, dami shabagga caadiga ah, adoo dejinaya $enable-grid-classes: falseoo awood u siinaya CSS Grid adoo dejinaya $enable-cssgrid: true.

• Navbars la cusboonaysiiyay si loo taageero offcanvas. - Ku dar khaanadaha offcanvas ee navbar kasta oo leh .navbar-expand-*fasalada jawaab celinta iyo qaar ka mid ah calaamadaynta offcanvas.

• Waxaa lagu daray meel cusub - Qaybtayada cusub, hab lagu bixiyo baloogyo ku meel gaar ah beddelka macluumaadka dhabta ah si loo muujiyo in shay weli ku soo shubanayo goobtaada ama abkaaga.

• Burburinta plugin hadda waxay taageertaa burburka toosan . - Ku darso .collapse-horizontalinaad .collapseburburto widthhalkii aad ka ahaan lahayd height. Ka fogow dib u rinjiyeynta browserka adiga oo dejinaya min-heightama height.

• Waxaa lagu daray gacan-yarayaal cusub oo xirmo iyo toosan. - Si dhakhso leh u codso hanti badan oo flexbox ah si aad si dhakhso leh u abuurto jaangooyooyin gaar ah oo leh xirmo . Ka dooro xirmooyinka .hstacktoosan ( ) iyo toosan ( .vstack) Ku dar qaybo toosan oo la mid <hr>ah canaasiirta caawiyayaasha cusub.vr .

• Lagu daray doorsoomayaal caalami ah oo :rootCSS ah. - Waxaa lagu daray dhowr doorsoomayaal CSS oo cusub :rootheerka lagu xakameynayo <body>qaababka. Wax badan ayaa ku jira shaqada, oo ay ku jiraan dhammaan adeegyadayada iyo qaybahayada, laakiin hadda akhri doorsoomayaasha CSS ee qaybta Customize .

• Midabka dib loo habeeyay iyo utility-ga asalka si loo isticmaalo doorsoomayaasha CSS, oo lagu daray hufnaanta qoraalka cusub iyo yutiilitida muraayadda asalka ah . - .text-* iyo .bg-*yutiilitooyinka hadda waxaa lagu dhisay doorsoomayaasha CSS iyo rgba()qiyamka midabka, taas oo kuu oggolaanaysa inaad si fudud ugu habayso utility kasta oo leh yutiilitooyin cusub

• Waxaa lagu daray tusaalooyin jajab cusub oo ku salaysan si loo muujiyo sida loo habeeyo qaybahayaga. - U soo jiid diyaar si aad u isticmaasho qaybaha la habeeyey iyo qaababka kale ee naqshadaynta ee tusaalayaashayada cusub ee Snippets . Waxaa ku jira cag- gooyeyaal , hoos u dhac , liiska kooxaha , iyo moodooyinka .

• Hababka meelaynta aan la isticmaalin ee laga saaray popovers iyo qalabyada sida kuwan waxaa maamula oo keliya Popper. $tooltip-marginwaa la dhimay oo la dejiyay nullhawsha.

Macluumaad dheeri ah ma rabtaa? Akhri qoraalka v5.1.0.

Ku-tiirsanaanta

• tuuray jQuery
• Laga cusboonaysiiyay Popper v1.x ilaa Popper v2.x.
• Libsass lagu beddelay Dart Sass sidii isku-dubaridiyahayaga Sass ee la siiyay Libsas waa la joojiyay.
• Waxaan uga soo haajiray Jekyll una guuray Hugo si loo dhiso dukumentiyadayada

Taageerada browserka

• Internet Explorer 10 iyo 11 ayaa la tuuray
• La tuuray Microsoft Edge <16 (Legacy Edge)
• Firefox waa la tuuray <60
• Safari la tuuray <12
• IOS Safari oo la tuuray <12
• Chrome la tuuray <60

Dukumentiyada ayaa isbedela

• Dib loo habeeyay bogga hoyga, qaabaynta dokumentiyada, iyo cagaha.
• Lagu daray hagaha baakadka cusub
• Lagu daray qayb cusub oo habayn , oo lagu bedelayo v4's Theming page , oo leh faahfaahin cusub oo ku saabsan Sass, doorashooyinka qaabaynta caalamiga ah, nidaamyada midabka, doorsoomayaasha CSS, iyo in ka badan.
• Dib u habaynta dhammaan dukumeentiyada foomamka qayb cusub oo foomamka , iyada oo u kala saaraysa waxa ku jira bogag aad diirada u saaran.
• Sidoo kale, la cusboonaysiiyay qaybta Layout , si aad u caddayso waxa ku jira.
• Waxaa loo beddelay "Navs" bogga qaybta "Navs & Tabs".
• Bogga "Checks" waxaa loo beddelay "Checks & radios".
• Dib u habayn ku samaysay navbar-ka oo ku daray subnav cusub si ay u fududaato in aad agagaarto boggayaga iyo noocyada dokumentiyada.
• Waxaa lagu daray jid gaaban kiiboodhka goobta raadinta Ctrl + /:.

Sass

• Waxaan ka saarnay khariidaddii Sass ee isku-darka ahayd si ay u sahlanaato in meesha laga saaro qiyamka dheeraadka ah. Maskaxda ku hay inaad hadda qeexdo dhammaan qiyamka ku jira khariidadaha Sass sida $theme-colors. Eeg sida loola macaamilo khariidadaha Sass .

• JebintaShaqada dib loo magacaabay color-yiq()iyo doorsoomayaasha la xidhiidha color-contrast()maadaama aanay hadda xidhiidh la lahayn booska midabka YIQ. Fiiri #30168.

  • $yiq-contrasted-thresholdwaxaa loo bedelay $min-contrast-ratio.
  • $yiq-text-darkwaxaana $yiq-text-lightloo kala beddelay magacyo $color-contrast-darkiyo $color-contrast-light.

• JebintaSu'aalaha warbaahinta isku-darka cabbirada waxay u beddeleen hab macquul ah.

  • media-breakpoint-down()waxay isticmaashaa barta jabinta lafteeda halkii aad ka isticmaali lahayd barta jabinta soo socota (tusaale, media-breakpoint-down(lg)halkii media-breakpoint-down(md)bartilmaameedyada la beegsan lahaa ee ka yar lg).
  • Sidoo kale, halbeegga labaad ee ku jira media-breakpoint-between()wuxuu kaloo isticmaalaa barta jabinta lafteeda halkii uu ka isticmaali lahaa barta soo socota (tusaale, media-between(sm, lg)halkii la media-breakpoint-between(sm, md)beegsan lahaa meelaha u dhexeeya smiyo lg).

• JebintaHababka daabacaadda ee meesha laga saaray iyo $enable-print-stylesdoorsoomayaasha. Fasalada bandhigga daabacaadda ayaa wali ku dhow. Fiiri #28339 .

• JebintaLa tuuray color(), theme-color(), oo gray()u shaqeeya doorsoomayaal. Fiiri #29083 .

• JebintaShaqada dib theme-color-level()loo magacaabay color-level()oo hadda aqbashay midab kasta oo aad rabto halkii aad ka heli lahayd $theme-colormidabyo kaliya. Fiiri #29083 Ka fiirso: color-level() ayaa markii dambe lagu tuuray v5.0.0-alpha3.

• JebintaLa magacaabay $enable-prefers-reduced-motion-media-queryoo $enable-pointer-cursor-for-buttonsloo bixiyay $enable-reduced-motioniyo $enable-button-pointerssi kooban.

• JebintaMeesha laga saaray bg-gradient-variant()isku darka Isticmaal .bg-gradientfasalka si aad ugu darto gradients walxaha halkii aad ka heli lahayd .bg-gradient-*fasallada la soo saaray.

• Jebinta Waxa meesha laga saaray isku-dhafka hore ee laga saaray:

  • hover, iyo hover-focus_plain-hover-focushover-focus-active
  • float()
  • form-control-mixin()
  • nav-divider()
  • retina-img()
  • text-hide()(sidoo kale waa la tuuray fasalka utility ee la xidhiidha, .text-hide)
  • visibility()
  • form-control-focus()

• JebintaShaqada dib loo magacaabay scale-color()si shift-color()looga fogaado isku dhaca shaqada Sass ee midabaynta u gaarka ah.

• box-shadowmixins hadda oggolaadaan nullqiyamka iyo hoos noneka doodo badan. Fiiri #30394 .

• Isku- border-radius()dhafka hadda wuxuu leeyahay qiime aan caadi ahayn.

Nidaamka midabka

• Nidaamka midabka kaas oo la shaqeeyay color-level()lagana $theme-color-intervalsaaray habka midabka cusub. Dhammaan lighten()iyo darken()hawlaha ku jira codebase-kayaga waxa lagu beddelaa tint-color()iyo shade-color(). Hawlahani waxay isku dari doonaan midabka mid cad ama madow halkii ay ka beddeli lahaayeen iftiinkeeda qadar go'an. Midabku shift-color()wuu madoobayn doonaa ama hadhayaa iyadoo ku xidhan haddii cabbirka miisaankiisu yahay mid togan ama mid taban. Faahfaahin dheeraad ah ka eeg #30622 .

• Midab kasta oo midab kasta lagu daray midabyo cusub, oo siinaya sagaal midab oo kala duwan midab kasta oo salka ah, sida doorsoomayaasha Sass cusub.

• Kala duwanaanshaha midabka oo la hagaajiyay. Saamiga isbarbardhigga midabka jabay laga bilaabo 3:1 ilaa 4.5:1 iyo midab buluug, cagaar, cyan, iyo casaan la cusboonaysiiyay si loo hubiyo isbarbardhigga WCAG 2.1 AA. Sidoo kale midabkeena isbarbardhiga u $gray-900beddeley $black.

• Si aan u taageerno nidaamka midabkeena, waxaan ku soo kordhinay caado tint-color()iyo shade-color()hawlo cusub si aan midabkeena ugu qasno.

Cusboonaysiinta Grid

• Barxad cusub! Waxaa lagu daray meel cusub oo kor xxlu 1400pxkac ah. Wax is beddel ah ma jiraan dhammaan meelaha kale ee jabinta.

• Biyo-mareennada la hagaajiyay. Gutters hadda waxa lagu dejiyay rems, oo way ka cidhiidhsan yihiin v4 ( 1.5rem, ama ku saabsan 24px, hoos 30px). Tani waxay la jaanqaadaysaa majaraha hab-maamuuska ee nidaamkayaga iyo adeegyadayada kala dheeraynta.

  • Lagu darey dabaq cusub ( .g-*, .gx-*, iyo .gy-*) si loo xakameeyo maroojisyada jiifka/tooska ah, maroojisyada toosan, iyo majaraha toosan.
  • JebintaWaxaa loo beddelay .no-gutterssi .g-0ay ugu habboonaato yutiilitida jeexjeexyada cusub.

• Tiirarka hadda ma position: relativedalban, marka waxaa laga yaabaa inaad ku darto .position-relativeqaar ka mid ah walxaha si aad u soo celiso dhaqankaas.

• JebintaHoos u dhigay dhawr .order-*fasal oo inta badan aan la isticmaalin. Hadda waxaan bixinaa oo kaliya .order-1meel .order-5ka baxsan sanduuqa.

• JebintaLa tuuray .mediaqaybta maadaama si fudud loogu soo celin karo yutiilitida. Fiiri #28265 tusaale ahaan bogga adeegyada flex .

• Jebinta bootstrap-grid.csshadda kaliya waxay quseysaa box-sizing: border-boxtiirka halkii aad dib u dejin lahayd cabbirka sanduuqa caalamiga ah. Sidan, qaababka xajinta waxaa loo isticmaali karaa meelo badan iyada oo aan la faragelin.

• $enable-grid-classesmar dambe ma curyaamiso jiilka fasalada weelka. Fiiri #29146.

• Waxaa loo cusboonaysiiyay make-colisku darka oo u dhigma tiirar siman oo aan lahayn cabbir cayiman.

Mawduuca, Dib-u-bilow, iwm

• RFS hadda waa la furay. Ciwaanka isticmaalayafont-size()dhafka ayaa si toos ah ula qabsan doonafont-sizecabbirkooda iyadoo la eegayo muuqaalka. Sifadan waxa hore loogu gatay v4.

• JebintaWaxaan dib u habeyn ku sameynay qoraalkayaga soo bandhigida si aan ugu bedelno $display-*doorsoomayaashayada iyo $display-font-sizeskhariidadda Sass. Sidoo kale meesha laga saaray $display-*-weightdoorsoomayaasha gaarka ah ee hal $display-font-weightiyo habayn font-sizes.

• Waxaa lagu daray laba .display-*cabbir cinwaan oo cusub, .display-5iyo .display-6.

• Xiriirinta waxaa hoosta laga xarriiqay si toos ah (ma ahan oo keliya dul heehaab), ilaa ay ka mid yihiin qaybo gaar ah mooyaane.

• Miisaska dib loo habeeyay si loo cusboonaysiiyo qaabkooda oo dib loogu dhiso doorsoomayaal CSS si loo xakameeyo habaynta.

• JebintaMiisaska buulka leh ma dhaxli karaan qaabab dambe.

• Jebinta .thead-lightwaxaana .thead-darklagu tuuray door ah .table-*fasalada kala duwan ee loo isticmaali karo dhammaan walxaha miiska ( thead, tbody, tfoot, triyo th) td.

• JebintaIsku- table-row-variant()darka waxa loo beddelay table-variant()oo aqbala 2 cabbir oo keliya: $color(magaca midabka) iyo $value(code code). Midabka xuduudka iyo midabada lahjadda si toos ah ayaa loo xisaabiyaa iyadoo lagu salaynayo doorsoomayaasha qodobka miiska.

• U kala qaybso doorsoomayaasha suufka unugga miiska -yiyo -x.

• Jebinta.pre-scrollableFasalka la tuuray . Fiiri #29135

• Jebinta .text-*Utility-yada kuma darin dullimaad iyo gobollo diiradda saaraya xiriirinta mar dambe. .link-*Taa beddelkeeda fasallo caawiye ayaa la isticmaali karaa. Fiiri #29267

• Jebinta.text-justifyFasalka la tuuray . Eeg #29793

• Jebinta <hr>Cunsuriyada hadda waxay isticmaalaan heighthalkii borderay si wanaagsan u taageeri lahaayeen sizesifada. Tani waxay sidoo kale awood u siineysaa isticmaalka qalabka suufka si ay u abuurto kala qaybiyayaal dhumuc weyn leh (tusaale, <hr class="py-1">).

• Dib u habeyn toos ah padding-leftiyo <ul>curiyeyaasha <ol>browser-ka default 40pxuna 2rem.

• Lagu daray $enable-smooth-scroll, kaas oo khuseeya scroll-behavior: smoothcaalami ahaan - marka laga reebo isticmaalayaasha waydiinaya dhaqdhaqaaqa la dhimay iyada oo loo marayo prefers-reduced-motionweydiinta warbaahinta. Fiiri #31877

RTL

• Jihada toosan doorsoomayaal gaar ah, yutiilitida, iyo isku darka dhamaantood waa la bedelay si loo isticmaalo sifooyin macquul ah sida kuwa laga helay qaab-dhismeedka flexbox- tusaale, startiyo endbeddelka leftiyo right.

Foomamka

• Lagu daray foomam sabaynaya oo cusub! Waxaan u dallacnay tusaalaha summadaha Sabaynta si aan u helno qaybo qaabaysan oo si buuxda loo taageeray. Eeg bogga cusub ee sumadaha Sabaynta

• Jebinta Qaabka qaabaysan ee wadaniga ah iyo kuwa gaarka ah. Sanduuqyada hubinta, raadiyaha, xulashada, iyo agabyada kale ee lahaa fasalada hooyo iyo kuwa caadiga ah ee v4 waa la xoojiyay. Hadda ku dhawaad ​​dhammaan walxaha qaabkeenu waa kuwo caado u ah, intooda badan iyada oo aan loo baahnayn HTML caadada ah.

  • .custom-control.custom-checkboxwaa hadda .form-check.
  • .custom-control.custom-custom-radiowaa hadda .form-check.
  • .custom-control.custom-switchwaa hadda .form-check.form-switch.
  • .custom-selectwaa hadda .form-select.
  • .custom-filewaxaana .form-filelagu bedelay qaabab caadadii dusha sare .form-control.
  • .custom-rangewaa hadda .form-range.
  • Dalkii la tuuray .form-control-fileiyo .form-control-range.

• JebintaSoo dhacay .input-group-appendiyo .input-group-prepend. Waxaad hadda ku dari kartaa badhamada iyo .input-group-textsida carruurta tooska ah ee kooxaha wax gelinta.

• Xaduuda soohdinta ee mudada dheer maqan ee kooxda galinta leh ee leh cillad jawaab celinta ansaxinta ayaa ugu dambeyntii la hagaajiyay iyadoo lagu darayo .has-validationfasal dheeri ah kooxaha wax gelinta leh ansaxinta.

• Jebinta Dhigay fasalo qaabayn gaar ah oo loogu talagalay nidaamkayaga qulqulka. Isticmaal shabaqyadayada iyo adeegyadayada halkii aad ka isticmaali lahayd .form-group, .form-row, ama .form-inline.

• JebintaCalaamadaha foomka hadda waxay u baahan yihiin .form-label.

• Jebinta .form-textno more sets display, taasoo kuu ogolaanaysa inaad abuurto inline ama xannibi qoraalka caawinta sida aad rabto oo kaliya adiga oo bedelaya curiyaha HTML.

• Koontaroolada foomka looma isticmaalo go'an heightmarkii ay suurtagal tahay, taa beddelkeeda dib loo dhigo si min-heightloo horumariyo habaynta iyo la jaanqaadka qaybaha kale.

• Astaamaha xaqiijinta hadda laguma dabaqo <select>s leh multiple.

• Isha dib loo habeeyay ee faylasha Sass ee hoos yimaada scss/forms/, oo ay ku jiraan qaababka kooxda wax gelinta.

Qaybaha

• Qiimaha midaysan paddingee digniinaha, rootida, kaadhadhka, hoos u dhaca, kooxaha liiska, moodooyinka, popovers, iyo aaladaha lagu saleeyo $spacerdoorsoomayaashayada. Fiiri #30564 .

Accordion

• Waxaa lagu daray qayb cusub oo accordion ah .

Digniin

• Ogeysiisyadu hadda waxay leeyihiin tusaalayaal leh astaamo .

• Hababka gaarka ah ee <hr>s ee laga saaray digniin kasta tan iyo markii ay hore u isticmaaleen currentColor.

Calaamadaha

• JebintaLa tuuray dhammaan .badge-*fasallada midabka ee agabka asalka ah (tusaale, isticmaal .bg-primaryhalkii laga isticmaali lahaa .badge-primary).

• JebintaLa tuuray .badge-pill- beddelka .rounded-pillutility isticmaal.

• JebintaHababka foojignaanta ee laga saaray <a>iyo <button>walxaha

• Kordhinta suufka caadiga ah ee calaamadaha laga bilaabo .25em/ .5emilaa .35em/ .65em.

Burburka rootiga

• La fududeeyay muuqaalka caadiga ah ee rootiga isagoo meesha ka saaray padding, background-color, iyo border-radius.

• Waxaa lagu soo daray hanti cusub oo CSS gaar ah --bs-breadcrumb-dividersi fudud loogu habeyn karo iyada oo aan loo baahnayn in dib loo soo uruuriyo CSS.

Badhamada

• Jebinta Beddel badhamada , sanduuqyada hubinta ama raadiyaha, uma baahna JavaScript oo waxay leeyihiin calaamado cusub. Uma baahnno curiye duuban,.btn-checkku<input>, oo ku lamaan.btnfasal kasta oo ku yaal<label>. Fiiri #30650 . Dukumiintiyada tan waxay ka guureen boggayaga Buttons waxayna u guureen qaybta foomamka cusub.

• Jebinta Looga soo degay .btn-blockadeegyada Halkii aad ka isticmaali .btn-blocklahayd .btn, ku duub badhamadaada .d-gridiyo .gap-*utility si aad u banayso marka loo baahdo. U beddelo fasallada jawaab-celinta si aad xitaa u maamusho iyaga. U akhri dukumeentiyada tusaale ahaan.

• La cusboonaysiiyay annaga button-variant()iyo button-outline-variant()isku darka si ay u taageeraan cabbirro dheeraad ah.

• Badhamada la cusboonaysiiyay si loo hubiyo kala duwanaanshiyaha korodhay ee duleelka iyo gobolada firfircoon.

• Badhamada naafada hadda waxay leeyihiin pointer-events: none;.

Kaadhka

• JebintaHoos .card-decku dhac ku yimid shabkadayada. Ku duub kaararkaaga fasallada tiirarka oo ku dar .row-cols-*weel waalid si aad u abuurto sagxadaha kaadhka (laakin iyada oo la xakameynayo toosinta jawaabta).

• JebintaHoos .card-columnsu dhac ku yimid dhanka Masonry. Fiiri #28922 .

• JebintaWaxay ku bedeshay .cardaccordion ku salaysan qayb cusub oo Accordion ah .

Carousel

• .carousel-darkKala duwanaansho cusub oo lagu daray qoraalka mugdiga ah, kontaroolada, iyo tilmaamayaasha (ku fiican asalka fudud).

• Astaamaha chevron ee lagu beddelay kontaroolada carousel oo leh SVG-yo cusub oo ka yimid Astaamaha Bootstrap .

Xir badhanka

• JebintaWaxaa .closeloogu .btn-closemagac daray magac yar.

• Xiritaanka badhamada hadda waxay isticmaalaan background-image(SVG-ku-xidhan) halkii ay ka ahaan ×lahaayeen HTML-ka, taasoo u oggolaanaysa in si fudud loo habeeyo iyada oo aan loo baahnayn in la taabto calaamadayntaada.

• Lagu daray .btn-close-whitekala duwanaansho cusub oo adeegsata filter: invert(1)si ay u suurtageliso isbarbardhigga sare ee ka saarista calaamadaha ka soo horjeeda asalka madow.

Burbur

• Duub-duubka oo la saaray oo loogu talagalay accordions.

Hoos u dhac

• Waxaa lagu daray doorsoomayaal cusub .dropdown-menu-darkiyo doorsoomayaal laxidhiidha hoos udhaca mugdiga ah ee la rabo.

• Doorsoome cusub oo lagu daray $dropdown-padding-x.

• Madoobeeyay qaybiyaha hoos u dhaca si uu isbarbardhiga u fiicnaado.

• JebintaDhammaan dhacdooyinka hoos-u-dhigga hadda waxay ku kiciyaan badhanka hoos u-dejinta ka dibna la xumbo ilaa qaybta waalidka.

• Liiska hoos-u-dhaca hadda waxay leeyihiin data-bs-popper="static"sifo go'an marka meelaynta hoos u dhigistu ay tahay mid taagan, ama hoos u dhigiddu ay ku taal navbar. Tan waxaa ku daray JavaScript-kayaga oo waxay naga caawisaa adeegsiga qaababka booska caadiga ah annaga oo aan faragelin ku samaynayn meelaynta Popper.

• JebintaXulashada la tuuray flipee plugin hoos u dhigista iyada oo door bideysa qaabeynta Popper-ka. Hadda waxaad joojin kartaa hab-dhaqanka rogrogmada adiga oo ka gudbaya array madhan oo ah fallbackPlacementsikhtiyaarka beddelka beddelka.

• Menus-hoosaadka hadda waa la gujin karaa iyada oo leh autoCloseikhtiyaar cusub si loo maareeyo dabeecadda isu -dhowrka . Waxaad isticmaali kartaa ikhtiyaarkan si aad u aqbasho gujinta gudaha ama dibadda liiska hoos u dhaca si aad uga dhigto mid is dhexgal ah.

• Hoos-u-dhacyada hadda waxay taageeraan .dropdown-items ku duudduubay <li>s.

Jumbotron

• JebintaHoos u dhigay qaybta jumbotron maadaama lagu koobi karo adeegyada. Fiiri tusaalaheena cusub ee Jumbotron ee muujinta.

Liiska kooxda

• .list-group-numberedLagu daray wax ka beddelka cusub liiska kooxaha

Navs iyo tabs

• Lagu daray nulldoorsoomayaal cusub font-size, font-weight, color, iyo :hover colorfasalka .nav-link.

Navbars

• JebintaNavbars hadda waxay u baahan yihiin weel gudaha ah (si aad loo fududeeyo shuruudaha kala dheereynta iyo CSS loo baahan yahay).
• JebintaFasalka .activemar dambe laguma dabaqi karo .nav-items, waa in si toos ah loogu dabaqaa .nav-links.

Offcanvas

• Lagu daray qaybta cusub ee canvas offcanvas .

Pagination

• Xidhiidhiyayaasha pagination hadda waxay leeyihiin wax la beddeli karo margin-leftkuwaas oo si firfircoon ugu wareegsan dhammaan geesaha marka midba midka kale ka sooco.

• Lagu daray transitions xiriirinta boggaga

Popovers

• JebintaDib .arrowloogu magacaabay .popover-arrowqaab-dhismeedkayaga popover ee caadiga ah.

• Ikhtiyaarka whiteListloo allowListmagacaabay

Spinners

• Spinners hadda waxay sharfaan prefers-reduced-motion: reduceiyagoo hoos u dhigaya animations. Fiiri #31882 .

• Laysinka toosan ee lafdhabarta oo la hagaajiyay.

Roodhiyo

• Toasts hadda waxa la meel dhigi karaa a .toast-containeriyada oo la kaashanayo meelaynta yutiilitida .

• Waxa loo beddelay 5 ilbidhiqsi.

• Laga overflow: hiddensoo saaray rootiga rootiga oo lagu beddelay border-radiuss habboon oo leh calc()hawlo.

Tilmaamaha Qalabka

• JebintaWaxaa .arrowloogu magac daray .tooltip-arrowqaabka caadiga ah ee qalabkayaga.

• JebintaQiimaha caadiga ah ee loogu talagalay fallbackPlacementswaxaa loo beddelaa ['top', 'right', 'bottom', 'left']meeleyn ka sii wanaagsan ee walxaha popper.

• JebintaIkhtiyaarka whiteListloo allowListmagacaabay

Utility

• JebintaWaxaa loo magacaabay adeegyo dhowr ah si ay u isticmaalaan magacyada hantida macquulka ah halkii ay ka isticmaali lahaayeen magacyada jihaynta iyadoo lagu daray taageerada RTL:

  • La magacaabay .left-*iyo .right-*ku .start-*iyo iyo .end-*.
  • La magacaabay .float-leftiyo .float-rightku .float-startiyo iyo .float-end.
  • La magacaabay .border-leftiyo .border-rightku .border-startiyo iyo .border-end.
  • La magacaabay .rounded-leftiyo .rounded-rightku .rounded-startiyo iyo .rounded-end.
  • La magacaabay .ml-*iyo .mr-*ku .ms-*iyo iyo .me-*.
  • La magacaabay .pl-*iyo .pr-*ku .ps-*iyo iyo .pe-*.
  • La magacaabay .text-leftiyo .text-rightku .text-startiyo iyo .text-end.

• JebintaNaafada xad-dhaafka ah sida caadiga ah.

• Lagu soo daray .bg-bodyfasal cusub si dhakhso ah loogu dejiyo <body>asalka walxaha dheeraadka ah.

• Waxaa lagu daray boos cusub oo loogu talagalay top, right, bottom, iyo left. Qiimaha waxaa ku jira 0, 50%, iyo 100%hanti kasta.

• Lagu daray cusub .translate-middle-x& .translate-middle-yyutiilitooyin si toosan ama toosan udub dhexaadka u ah curiyayaasha meelaysan

• Lagu daray border-widthyutiilitida cusub

• JebintaLoo .text-monospacemagacaabay .font-monospace.

• JebintaWaxaa meesha laga saaray .text-hidemaadaama ay tahay hab qadiimi ah oo lagu qariyo qoraalka oo ay tahay inaan mar dambe la isticmaalin.

• .fs-*Utility- yada lagu daray font-size(oo leh RFS) Kuwani waxay isticmaalaan miisaan la mid ah sida cinwaannada caadiga ah ee HTML (1-6, weyn ilaa yar), waxaana lagu beddeli karaa khariidadda Sass.

• JebintaUtilities dib loo magacaabay .font-weight-*sida .fw-*soo koobida iyo joogteynta

• JebintaUtilities dib loo magacaabay .font-style-*sida .fst-*soo koobida iyo joogteynta

• Lagu darey .d-gridsi ay u soo bandhigaan utility iyo gapyutiilitooyinka cusub ( .gap) ee CSS Grid iyo qaabeynta sanduuqyada flexbox.

• JebintaLaga saaray .rounded-smiyo rounded-lg, oo soo bandhigay miisaan cusub oo fasallo ah, .rounded-0si .rounded-3. Fiiri #31687 .

• Lagu daray line-heightyutiilitida cusub: .lh-1, .lh-sm, .lh-baseiyo .lh-lg. Halkan ka daawo .

• U dhaqaajiyay .d-noneutility-ga CSS-kayaga si aanu uga siino miisaan ka badan agabka kale ee bandhigga.

• Kordhinta .visually-hidden-focusablecaawiyaha si uu sidoo kale uga shaqeeyo weelasha, isagoo isticmaalaya :focus-within.

Caawiyeyaal

• Jebinta Caawiyeyaasha isku duuban ee wax ka qabata ayaa lagu bedelay magaca caawiyayaasha saamiga ee leh magacyo cusub iyo dabeecado horumarsan, iyo sidoo kale doorsoome CSS ah oo waxtar leh.

  • Fasallada waxaa loo beddelay si loogu beddelo bysaamiga xdhinaca. Tusaale ahaan, .ratio-16by9hadda waa .ratio-16x9.
  • Waxaan hoos u dhignay xuliyihii kooxda .embed-responsive-itemiyo curiye si aan u door bidno mid fudud oo .ratio > *doorta. Fasal dheeraad ah looma baahna, caawiyaha saamiga hadda wuxuu la shaqeeyaa shay kasta oo HTML ah.
  • Khariidadda $embed-responsive-aspect-ratiosSass waa loo beddelay $aspect-ratiosoo qiyamkeeda waa la fududeeyay si loogu daro magaca fasalka iyo boqolkiiba sida key: valuelammaanaha.
  • Doorsoomayaasha CSS hadda waa la soo saaray oo lagu daray qiime kasta oo ku jira khariidadda Sass. Wax ka --bs-aspect-ratiobeddel doorsoomaha dusha .ratiosi aad u abuurto saami kasta oo caado ah .

• Jebinta Fasalada "Reader Screen" hadda waa fasalo "muuqaal qarsoon" .

  • scss/helpers/_screenreaders.scssWaxa uu ka beddelay faylka Sassscss/helpers/_visually-hidden.scss
  • La magacaabay .sr-onlyiyo .sr-only-focusablein loo .visually-hiddenmagacaabay.visually-hidden-focusable
  • La magacaabay sr-only()oo sr-only-focusable()isku daraya visually-hidden()iyo visually-hidden-focusable().

• bootstrap-utilities.cssHadda waxa kale oo ku jira caawiyayaashayada. Caawiyeyaashu uma baahna in lagu soo dejiyo dhismayaal khaas ah.

JavaScript

• Ku-tiirsanaanta jQuery waa la tuuray oo dib-u-qoray plugins si ay ugu jiraan JavaScript-ka caadiga ah.

• JebintaSifooyinka xogta ee dhammaan plugins-yada JavaScript hadda waa la magacaabay si ay u caawiyaan kala soocidda shaqeynta Bootstrap ee dhinacyada saddexaad iyo koodkaaga. Tusaale ahaan, waxaan isticmaalnaa data-bs-togglehalkii data-toggle.

• Dhammaan plugins hadda waxay aqbali karaan xulashada CSS inay tahay doodda koowaad. Waxaad ka gudbi kartaa walxaha DOM ama doore kasta oo CSS ah oo sax ah si aad u abuurto tusaale cusub oo plugin ah:

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

• popperConfigwaxaa loo gudbin karaa shaqo ahaan aqbala Bootstrap's default Popper config ahaan dood ahaan, si aad ugu milmaan habkan caadiga ah ee habkaaga. Waxay qusaysaa hoos-u-dhacyada, popovers, iyo qalabyada.

• Qiimaha caadiga ah ee loogu talagalay fallbackPlacementswaxaa loo beddelaa ['top', 'right', 'bottom', 'left']meeleyn ka fiican ee walxaha Popper. Waxay qusaysaa hoos-u-dhacyada, popovers, iyo qalabyada.

• Hoosta laga saaray hababka mad-madowga leh sida _getInstance()→ getInstance().