Gara v5tti godaanuu

Jijjiiramoota faayilii madda Bootstrap, galmeewwanii fi qaamolee v4 irraa gara v5tti akka godaansitu si gargaaruuf hordofi fi gamaaggami.

Fuula kana irratti

v5.2.0 irratti

Dizaayinii haaromfame

Bootstrap v5.2.0 fooyya'iinsa dizaayinii xixiqqoo qaamolee fi qabeentota muraasaaf guutummaa pirojektii keessatti agarsiisa, keessattuu karaa border-radiusgatiiwwan fooyya'an qaree fi too'annoo unkaa irratti . Galmeen keenya akkasumas fuula jalqabaa haaraa, haala docs salphaa kan kana booda kutaalee barruu cinaa hin kuffisne, fi fakkeenyota beekamoo Bootstrap Icons tiin fooyya'eera .

Jijjiiramoota CSS dabalataa

Jijjiiramoota CSS fayyadamuuf qaamolee keenya hunda haaromsineerra. Sass ammallee waan hunda bu'uura yoo ta'u, tokkoon tokkoon qaama jijjiiramoota CSS gita bu'uuraa qaama irratti hammachuudhaaf fooyya'eera (fkn, .btn), dhuunfachiisa yeroo dhugaa caalaa Bootstrap hayyama. Gadhiifamoota itti aanan keessatti, itti fayyadama jijjiiramoota CSS keenya gara haalata, unkaalee, gargaartota, fi faayidaa keenyaatti babal'isuu itti fufna. Waa'ee jijjiiramoota CSS tokkoon tokkoo qaama keessatti fuula galmee isaanii irratti bal'inaan dubbisi.

Fayyadamni jijjiiramaa CSS keenyaa hanga Bootstrap 6tti hamma tokko guutuu hin ta'u.Kanneen guutummaatti hojiirra oolchuu kan jaallannu ta'us, isaanis jijjiirama cabsuu fiduuf balaa qabaatu. Fakkeenyaaf, $alert-border-width: var(--bs-border-width)koodii madda keenya keessatti saaguun koodii mataa kee keessatti Sass ta'uu danda'u cabsa yoo $alert-border-width * 2sababa tokkoon hojjechaa turte ta'e.

Akka kanaan, bakka danda'ametti, gara jijjiiramoota CSS dabalataatti dhiibuu itti fufna, garuu maaloo hubadhu hojiirra oolmaan keenya v5 keessatti xiqqoo daangeffamuu danda'a.

Haaraa`_maps.scss`

Bootstrap v5.2.0 faayilii Sass haaraa kan _maps.scss. _variables.scssDhimma fooyya'iinsi kaartaa jalqabaa kaartaa sadarkaa lammaffaa isaan dheeressan irratti hin hojjenne sirreessuuf kaartaa Sass hedduu irraa harkisa . Fakkeenyaaf, fooyya'iinsi gara $theme-colorskaartaa mata duree biroo kanneen irratti hirkatan irratti hojiirra hin oolle turan $theme-colors, adeemsa hojii dhuunfachiisaa furtuu cabsuu. Gabaabumatti, Sass daangaa qaba bakka jijjiiramaan durtii ykn kaartaan erga fayyadamee booda , haaromfamuu hin dandeenye. Jijjiiramoota CSS yeroo jijjiiramoota CSS biroo qindeessuuf fayyadaman hanqinni walfakkaataan jira.

Kanaafidha dhuunfachiisni jijjiiramaa Bootstrap keessatti booda dhufuu qabu @import "functions", garuu duraa @import "variables"fi tuullaa galtee keenyaa kan hafe. Kaartaa Sass irrattis kanumatu hojjeta-durtii osoo hin baratin irra darbuu qabda. Kaartoonni armaan gadii gara haaraatti ce'aniiru _maps.scss:

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

Ijaarsi Bootstrap CSS amala kee amma galtee kaartaa adda ta'een waan akkanaa fakkaachuu qaba.

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

Faayidaa haaraa

font-weightFaayidaawwan babal'ate .fw-semiboldqubee walakkaa jajjaboodhaaf hammachuudhaaf .
border-radiusFaayidaa bal'isee hammangaa haaraa lama hammachuudhaaf, .rounded-4fi .rounded-5, filannoowwan dabalataaf.

Jijjiirama dabalataa

$enable-container-classesFilannoo haaraa dhiyaate. — Amma yeroo gara qindaa'ina Yaalii CSS Grid filattu, .container-*gitaawwan ammallee ni qindaa'u, yoo filannoo kun gara false. Konteenaroonnis amma gatii gutter isaanii eegu.
Qaamni Offcanvas amma garaagarummaa deebii kennuu qaba . Gitni jalqabaa .offcanvasosoo hin jijjiiramne hafa-qabiyyee iddoowwan ilaalchaa hunda keessa dhoksa. Deebii akka kennu gochuuf, gita sana .offcanvasgara gita kamiyyuutti jijjiiri .offcanvas-{sm|md|lg|xl|xxl}.
Qoodtoonni minjaala furdaa ta'an amma opt-in ta'aniiru. — Daangaa gareewwan gabatee gidduu jiru furdaa fi irra darbuuf rakkisaa ta'e haqnee gara gita filannoo hojiirra oolchuu dandeessutti sochoofneerra, .table-group-divider. Fakkeenyaaf galmeewwan gabatee ilaali.
Scrollspy API Taajjabduu Walqaxxaamuraa fayyadamuuf irra deebi'amee barreeffameeraoffset , kana jechuun kana booda marfata warraa fira, qindeessaadeprecates, fi kkf si hin barbaachisu jechuudhaHojiirra oolmaa Scrollspy kee calaqqisiisuu nav isaanii keessatti caalaatti sirrii fi walsimaa ta'uuf barbaadi.
Popovers fi tooltipps amma jijjiiramoota CSS fayyadamu. Jijjiiramoonni CSS tokko tokko lakkoofsa jijjiiramootaa hir'isuuf gita isaanii Sass irraa fooyya'aniiru. Kanarraa kan ka'e, jijjiiramoonni sadii gadhiifama kana keessatti hojiirra oolaniiru: $popover-arrow-color, $popover-arrow-outer-color, fi $tooltip-arrow-color.
.text-bg-{color}Gargaartoota haaraa itti dabalame . .text-*Dhuunfaa fi .bg-*faayidaa saaguu mannaa , amma .text-bg-*gargaartota fayyadamuun a background-colorwith contrasting foreground saaguu dandeessa color.
.form-check-reverseTartiiba asxaalee fi sanduuqawwan filannoo/raadiyoo walqabatan garagalchuuf fooyyessaa dabalame .
Tarjaawwan sarara qaban deeggarsa gabateewwanii karaa .table-striped-columnsgita haaraa dabalame .

Tarree jijjiiramootaa guutuuf, pirojektii v5.2.0 GitHub irratti ilaali .

v5.1.0 irratti

Deeggarsa yaalii haalata CSS Grid tiif dabalame . — Kun hojii adeemsifamaa jiruudha, fi ammallee itti fayyadama oomishaaf qophii miti, garuu karaa Sass gara amala haaraa filachuu dandeessa. Isa dandeessisuuf, tarjaa durtii hanqisi, saaguudhaan $enable-grid-classes: falsefi saaguudhaan tarjaa CSS dandeessisi $enable-cssgrid: true.
Navbars haaromfame offcanvas deeggaruuf. — Navbar kamiyyuu keessatti baafatiiwwan kanfaasiin ala jiran.navbar-expand-* gita deebii kennanii fi mallattoo kanfaasiin ala tokko tokko waliin dabali.
Qaama iddooqa haaraa dabalame . — Qaama keenya isa haaraa, karaa qabiyyee dhugaa bakka bu’ee yeroodhaaf uggura kennuudhaan wanti tokko ammallee marsariitii ykn appii keessan keessatti fe’amaa akka jiru agarsiisuuf gargaaru.
Ijaarsiin kuffisuu amma kufaatii qajeelaa deeggara . — Bakka . .collapse-horizontal_ .collapse_ width_ a ykn heightsaaguun irra deebiin dibu browser irraa fagaadhu .min-heightheight
Gargaartoota tuullaa fi seera dhaabbataa haaraa dabalame. — Saffisaan amaloota flexbox hedduu hojii irra oolchuudhaan saffisaan qindaa'inoota amala tuullaawwan waliin uumuuf . Tuullaa qajeelaa ( .hstack) fi dhaabbataa ( ) keessaa fili. Gargaartoota haaraa waliin qooddattoota dhaabbataa elementoota wajjin .vstackwalfakkaatu dabali .<hr>.vr
:rootJijjiiramoota CSS addunyaa haaraa dabalame . — Jijjiiramoota CSS haaraa hedduu :rootsadarkaa <body>akkaataa to'achuuf dabale. Dabalataan hojiiwwan keessa jiru, faayidaa fi qaamolee keenya hunda dabalatee, garuu ammaaf jijjiiramoota CSS kutaa Dhuunfachiisi keessatti dubbisi .
Jijjiiramoota CSS fayyadamuuf faayidaa halluu fi duubbee sirreeffame, fi faayidaa barruu haaraa ifa hin taanee fi duubbee ifa ta'uu dabale . — .text-* fi .bg-*faayidaan amma jijjiiramoota CSS fi rgba()gatiiwwan halluu wajjin ijaaramaniiru, kunis faayilii kamiyyuu salphaatti faayidaalee opacity haaraa wajjin akka dhuunfattu si dandeessisa.
Akkaataa qaamolee keenya itti dhuunfachiifnu agarsiisuuf fakkeenyota ciccitaa haaraa irratti hundaa'an dabalame. — Fakkeenyota keenya haaraa Snippets waliin qaamolee dhuunfaa fi shaakala dizaayinii waliigalaa biroo fayyadamuuf qophaa'aa harkisi . Jalqaba , tarreewwan , gareewwan tarree , fi moodaalota of keessatti qabata .
Akkaataawwan ejjennoo hin fayyadamne popovers fi tooltips irraa haqee sababiin isaas kunniin Popper qofaan waan qabamaniif. $tooltip-margindeprecated ta’ee nulladeemsa keessa akka ta’etti kaa’ameera.

Odeeffannoo dabalataa barbaadduu? Barreeffama biloogii v5.1.0 dubbisaa.

Heey achitti! Jijjiiramni Bootstrap 5 keenya isa guddaa jalqabaa gadhiifame, v5.0.0, akka armaan gadiitti galmaa'eera. Jijjiirama dabalataa armaan olitti agarsiifame hin calaqqisan.

Hirkatummaa

jQuery gadi dhiise.
Popper v1.x irraa gara Popper v2.x tti ol guddate.
Libsass Dart Sass tiin bakka buuse akka qindeessaa Sass keenyaa Libsass kennameef hojiirra oole.
Dokumantarii keenya ijaaruuf Jekyll irraa gara Hugotti godaane

Deeggarsa biraawzari

Internet Explorer 10 fi 11 gadi dhiise
Microsoft Edge < 16 (Legacy Edge) kan gadi bu'e .
Firefox < 60 gadi dhiise
Safarii gadi bu'e < 12
Safari iOS < 12 gadi bu'e
Chrome < 60 gadi bu'e

Jijjiirama galmee

Fuula jalqabaa, haalata docs, fi jalaqaba irra deebi'amee hojjetame.
Qajeelfama Parcel haaraa dabalame .
Kutaa Dhuunfachiisi haaraa dabale , fuula Mata duree v4 bakka bu'e , ibsa haaraa Sass irratti, filannoowwan qindeessaa addunyaa, iskiimota halluu, jijjiiramoota CSS, fi kkf.
Galmee unkaa hunda gara kutaa Unkaalee haaraatti irra deebi'ee qindeesse , qabiyyee gara fuula caalaatti xiyyeeffannoo qabanitti addaan baase.
Haaluma walfakkaatuun, kutaa Haalata haaromse , qabiyyee tarjaa caalaatti ifatti foon gochuuf.
Fuula qaama “Navs” gara “Navs & Tabs”tti jijjiire.
Fuula “Checks” jedhu gara “Checks & radios”tti jijjiire.
Navbar irra deebi'ee dizaayinii godhee subnav haaraa dabalee marsariitiiwwan keenyaa fi gosoota docs keenya salphaatti akka naanna'an gochuuf.
Dirree barbaachaaf karaa gabaabaa gabatee furtuu haaraa dabalame: Ctrl + /.

Sass jedhama

Gatii barbaachisoo ta'an salphaatti haquuf walitti makamuu kaartaa Sass durtii ditched gooneerra. Yaada keessa galchi amma gatiiwwan hunda kaartaa Sass keessatti akka $theme-colors. Akkaataa kaartaa Sass itti qabdu ilaalaa .
Cabsuucolor-yiq()Faankishinii fi jijjiiramoota walqabatan color-contrast()akka kana booda iddoo halluu YIQ waliin wal hin qabannetti maqaa jijjiire . #30168 ilaali.
- $yiq-contrasted-thresholdmaqaan isaa gara $min-contrast-ratio.
- $yiq-text-darkfi $yiq-text-lightakkaataa wal duraa duubaan gara $color-contrast-darkfi $color-contrast-light.
CabsuuParameetaroota mixins gaaffii miidiyaa mala loojikii caalaa jijjiiramaniiru.
- media-breakpoint-down()bakka cabbii itti aanu osoo hin taane qabxii ciccituu ofii isaa fayyadama (fkn, media-breakpoint-down(lg)bakka media-breakpoint-down(md)targets viewports xiqqaa caalaa lg).
- Haaluma walfakkaatuun, paarameetirri lammaffaan in media-breakpoint-between()akkasumas bakka cabbii itti aanu bakka cabbii mataa isaa fayyadama (fkn, media-between(sm, lg)bakka media-breakpoint-between(sm, md)targets viewports gidduutti smfi lg).
CabsuuAkkaataa maxxansaa fi $enable-print-stylesjijjiiramaa haqameera. Kutaawwan agarsiisa maxxansaa ammallee naannoo jiru. #28339 ilaali .
Cabsuucolor(), theme-color(), fi faankishiniiwwan gray()jijjiiramoota fayyadu gadi dhiise. #29083 ilaali .
Cabsuutheme-color-level()Faankishiniin maqaa jijjiirame gara fi color-level()amma halluuwwan qofa osoo hin taane halluu barbaadde kamiyyuu fudhata $theme-color. #29083 ilaali Of eeggadhu: color-level() boodarra gadi bu'e v5.0.0-alpha3.
CabsuuMaqaa jijjiirraa $enable-prefers-reduced-motion-media-queryfi $enable-pointer-cursor-for-buttonsgara $enable-reduced-motionfi $enable-button-pointersgabaabsuuf.
CabsuuMiksiin sana bg-gradient-variant()buqqise. .bg-gradientGitaawwan uumaman osoo hin taane qaamolee irratti garaagarummaa dabaluudhaaf gita fayyadami .bg-gradient-*.
Cabsuu Miksiinota duraan hin fayyadamne haqaman:
- hover, hover-focus, plain-hover-focus, fihover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(akkasumas gita faayidaa walqabatee jiru gadi dhiise, .text-hide)
- visibility()
- form-control-focus()
Cabsuuscale-color()Faankishinii garatti maqaa jijjiirame faankishinii shift-color()iskeelii halluu Sass mataa isaa waliin walitti bu'iinsa akka hin qabneef.
box-shadowmixins amma nullgatiiwwan hayyamuu fi nonemurfiiwwan hedduu irraa gadi bu'uu. #30394 ilaali .
Miksiin border-radius()amma gatii durtii qaba.

Sirna halluu

Sirna halluu kan sirna halluu haaraa fayyadu waliin hojjetee color-level()fi $theme-color-intervalbuqqa'e. Hundi lighten()fi darken()faankishiniiwwan koodii keenya keessa jiran tint-color()fi tiin bakka bu'u shade-color(). Faankishiniiwwan kun salphaa ta'uu isaa hamma murtaa'een jijjiiruu mannaa halluu adii yookiin gurraacha waliin ni makamu. Paarameetariin shift-color()ulfaatina isaa pozaatiivii yookiin negaatiivii ta'uu isaa irratti hundaa'uun halluu tokko ni halluu yookiin golgaa ni taasisa. Bal'ina isaaf #30622 ilaali .
Halluu hundaaf halluu fi golgaa haaraa dabale, tokkoon tokkoo halluu bu'uuraatiif halluu adda addaa sagal kenne, akka jijjiiramoota Sass haaraatti.
Faallaa halluu fooyya'e. Reeshiyoo walfaallaa halluu 3:1 irraa gara 4.5:1tti bumped fi halluuwwan halluu diimaa, magariisa, saayinii, fi roobaa haaromfamee WCAG 2.1 AA walfaallaa mirkaneessuu. Akkasumas halluu walfaallaa halluu keenyaa irraa $gray-900gara jijjiire $black.
Sirna halluu keenya deeggaruuf, halluuwwan keenya sirnaan walitti makuuf amalaafi dalagaalee tint-color()haaraa daballeerra .shade-color()

Fooyya'iinsa giiridii

Qabxii cabsuu haaraa! Breakpoint haaraa xxlfor 1400pxfi ol dabalame. Qabxiilee cabsuu biroo hunda irratti jijjiiramni hin jiru.
Gutters fooyya'an. Gutters amma rems keessatti saagamaniiru, fi v4 ( 1.5rem, ykn waa'ee 24px, irraa gadi 30px) caalaa dhiphoo dha. Kunis gutters sirna giiridii keenyaa fi faayidaa addaan fageenyaa keenyaa wajjin walsimsiisa.
- Gutters horizontal/vertical, gutters horizontal, fi gutters dhaabbataa to'achuuf gita gutter haaraa ( .g-*, .gx-*, fi ) dabale..gy-*
- CabsuuFaayidaa gutter haaraa wajjin akka walsimuuf .no-guttersmaqaa jijjiirame ..g-0
Tarjaawwan kana booda hojiirra hin oolan, kanaaf amala sana deebisuuf elementoota tokko tokko irratti position: relativedabaluu qabda ta'a ..position-relative
Cabsuu.order-*Kutaalee yeroo baayyee osoo hin fayyadamiin hafan hedduu gadi dhiise. Amma .order-1to .order-5out of the box qofa dhiyeessina.
CabsuuFaayidaa wajjin salphaatti fakkaafamuu .mediawaan danda'uuf qaama gadi dhiise. Fakkeenyaaf #28265 fi fuula flex utilities ilaali .
Cabsuu bootstrap-grid.cssamma box-sizing: border-boxsafara saanduqa waliigalaa irra deebi'uu mannaa tarjaa qofa irratti hojjeta. Haala kanaan, akkaataan giiridii keenyaa bakka baay'eetti osoo gidduu hin seenin fayyadamuun ni danda'ama.
$enable-grid-classeskana booda dhaloota gita qabduu kana booda hin hanqisu. #29146 ilaali.
Miksiin make-colgara durtii gara tarjaa walqixaatti hammangaa ifteessame malee fooyyesse.

Qabiyyee, Reboot fi kkf

RFS amma durtiidhan dandeessifameera. Mata dureewwan mixin fayyadamanfont-size()ofumaan isaaniifont-sizegara iskeelii agarsiisaa wajjin sirreessa. Amalli kun kanaan dura v4 waliin opt-in ture.
Cabsuu$display-*Jijjiiramoota keenya bakka buusuuf fi $display-font-sizeskaartaa Sass tiin maxxansaa agarsiisaa keenya sirreesse. Akkasumas $display-*-weightjijjiiramoota dhuunfaa tokkoof haqee s $display-font-weightsirreeffame .font-size
.display-*Hanga mata duree haaraa lama dabale , .display-5fi .display-6.
Hidhamtoonni durtiidhaan jala sararamu (hover qofa irratti miti), yoo qaama qaamolee murtaa'oo ta'an malee.
Gabateewwan akkaataa isaanii haaromsuu fi jijjiiramoota CSS waliin irra deebi'anii ijaaruuf to'annoo dabalataa akkaataa irratti irra deebi'amee hojjetame.
CabsuuGabateewwan man'ee kana booda akkaataa hin dhaalan.
Cabsuu .thead-lightfi gita garaagarummaa kanneen elementoota gabatee hundaaf fayyadamuu danda'an .thead-darkfayyadu ( , , , , fi )..table-*theadtbodytfoottrthtd
CabsuuMiksiin table-row-variant()gara maqaa jijjiiramee table-variant()fi qajoojiiwwan 2 qofa fudhata: $color(maqaa halluu) fi $value(koodii halluu). Halluu daangaa fi halluuwwan aksentaa jijjiiramoota factor gabatee irratti hundaa'uun ofumaan shallagamu.
Jijjiiramoota paadiingii man'ee gabatee gara -yfi -x.
CabsuuKutaa gadi dhiise .pre-scrollable. #29135 ilaali
Cabsuu .text-*fayyadamtoonni kana booda haalawwan hover fi xiyyeeffannoo walitti hidhamiinsa irratti hin dabalan. .link-*bakka isaa gita gargaaraa fayyadamuun ni danda’ama. #29267 ilaali
CabsuuKutaa gadi dhiise .text-justify. #29793 ilaali
Cabsuu ~~<hr>elementoonni amma heightbakka amallicha borderhaala gaariin deeggaruuf fayyadamu size. Kunis fayyadama faayidaa paadiingii qoqqoodduu furdaa uumuuf dandeessisa (fkn, <hr class="py-1">).~~
Durtii qajeelaa padding-leftirratti <ul>fi <ol>elementoota durtii biraawzari irraa 40pxgara 2rem.
Added $enable-smooth-scroll, kan scroll-behavior: smoothakka addunyaatti hojiirra oolu-fayyadamtoota sochii hir'ifame karaa prefers-reduced-motiongaaffii miidiyaa gaafatan malee. #31877 ilaali

RTL jedhamuun beekama

Jijjiiramoonni addaa kallattii qajeelaa, faayilii, fi makaawwan hundinuu amaloota loojikii akka kanneen qindaa'inoota flexbox keessatti argaman fayyadamuuf maqaa jijjiiramaniiru-fkn, startfi endbakka leftfi right.

Unkaalee

Unkaalee haaraa lola'an dabalameera! Fakkeenya asxaalee lola'oo gara qaamolee unkaa guutummaatti deeggaramaniitti guddifneerra. Fuula asxaalee lola'aa haaraa ilaali.
Cabsuu Qaamolee unkaa dhalootaa fi amala walitti makaman. Sanduuqawwan filannoo, raadiyoowwan, filannoowwan, fi galteewwan biroo kanneen v4 keessatti gita dhalootaa fi amala qaban walitti makamaniiru. Amma elementoonni unkaa keenya hundi jechuun ni danda'ama guutummaatti amala, irra caalaan isaanii HTML amala osoo hin barbaachisin.
- .custom-control.custom-checkboxamma .form-check.
- .custom-control.custom-custom-radioamma .form-check.
- .custom-control.custom-switchamma .form-check.form-switch.
- .custom-selectamma .form-select.
- .custom-fileakkasumas .form-fileakkaataa aadaatiin gubbaatti bakka bu'aniiru .form-control.
- .custom-rangeamma .form-range.
- Dhalataa .form-control-filefi .form-control-range.
CabsuuKufee .input-group-appendfi .input-group-prepend. Amma qaree fi .input-group-textakka ijoollee kallattii gareewwan galtee qofa dabaluu dandeessa.
Raadiyaasiin daangaa yeroo dheeraa garee galtee irratti dogongora yaada mirkaneessuu waliin dhabame dhuma irratti .has-validationgareewwan galtee mirkaneessuu qabanitti gita dabalataa dabaluudhaan sirreeffama .
Cabsuu Sirna giiridii keenyaaf gitoota qindaa'ina unkaa addaa gadi dhiise. .form-groupBakka , .form-row, ykn giiridii fi faayidaa keenya fayyadami .form-inline.
CabsuuAsxaaleen unkaa amma barbaadu .form-label.
Cabsuu .form-textkana booda hin saagi display, barruu gargaarsaa sarara keessaa ykn ugguruu akka barbaaddetti qaama HTML jijjiiruu qofaan akka uumtu si dandeessisa.
To'annoon unkaa kana booda heightyeroo danda'ametti dhaabbataa hin fayyadamne, kanaa mannaa min-heightdhuunfachiisaa fi walsimsiisaa qaamolee biroo wajjin fooyyessuuf yeroo biraatti dabarsuu.
Mallattoolee mirkaneessuu kana booda <select>s with multiple.
Faayilota Sass madda irra deebi'amee qindaa'e jalatti scss/forms/, akkaataa garee galtee dabalatee.

Qaamolee

Gatii tokkoome paddingakeekkachiisa, daabboo, kaardii, gadi bu'aa, gareewwan tarree, moodaalota, popovers, fi gorsa meeshaalee $spacerjijjiiramaa keenya irratti hundaa'uuf. #30564 ilaali .

Akkoordiyoonii

Qaama akkoordiyoon haaraa dabalame .

Akeekkachiisa

Akeekkachiisni amma fakkeenyota mallattoolee qaban qabu .
Akkaataawwan amala <hr>s tokkoon tokkoo akeekkachiisa keessatti erga isaan duraan fayyadamaniif haqameera currentColor.

Baajiiwwan

Cabsuu.badge-*Faayidaa duubbeedhaaf gita halluu hunda gadi dhiise (fkn, .bg-primarybakka fayyadami .badge-primary).
CabsuuGadi .badge-pillbu'e —bakka isaa .rounded-pillfaayilii fayyadami.
CabsuuAkkaataawwan hover fi xiyyeeffannoo <a>fi <button>elementootaaf haqameera.
Padding durtii baajiiwwan / irraa .25emgara / .5emtti .35emdabale .65em.

Daabboo

Mul'ata durtii daabboo padding, background-color, fi balleessuun salphise border-radius.
--bs-breadcrumb-dividerCSS irra deebi'anii qindeessuu osoo hin barbaachisin dhuunfachiisuuf qabeentaa amala CSS haaraa dabale .

Qabduulee

Cabsuu Qabduu jijjiiri , sanduuqa filannoo ykn raadiyoo waliin, kana booda JaavaScript hin barbaadanii fi mallattoo haaraa qabu. Kana booda elementii marfama hin barbaannu, ,.btn-checkirrattigita<input>kamiyyuu. #30650 ilaali . Kanaaf docs fuula Buttons keenya irraa gara kutaa Unka haaraatti ce'eera..btn<label>
Cabsuu Faayidaadhaaf .btn-blockgadi bu'e. .btn-block, irratti fayyadamuu mannaa .btn, qaree kee akka barbaachisummaa isaatti addaan baasuuf .d-gridfi .gap-*faayidaa waliin marsi. To'annoo daran isaan irratti argachuuf gara daree deebii kennuutti jijjiiri. Fakkeenya tokko tokkoof docs dubbisi.
Parameetaroota dabalataa deeggaruuf keenya button-variant()fi mixins haaromse.button-outline-variant()
Qabduu fooyya'e kan walfaallaa dabaluu hover fi haalata socho'aa irratti mirkaneessuuf.
Qabduulee hanqifaman amma pointer-events: none;.

Kaardii

Cabsuu.card-deckGiriidii keenya fayyadu kufe . Kaardii kee gita tarjaa keessatti marsi fi qabduu warraa dabali .row-cols-*deekii kaardii irra deebi'ii uumuuf (garuu to'annoo dabalataa qindaa'ina deebii irratti).
CabsuuMasonry .card-columnsdeggeruuf kufe. #28922 ilaali .
Cabsuu.cardAccordion bu'uura godhate qaama Accordion haaraatiin bakka buuse .

Kaarooseelii

Barruu dukkanaa'aa, too'annoo, fi agarsiistotaaf .carousel-darkgaraagarummaa haaraa dabalame (duubbee ifa ta'eef guddaadha).
Mallattoolee chevron too'annoo kaarooseeliidhaaf SVG haaraa Mallattoolee Bootstrap irraa bakka bu'e .

Qabduu cufi

CabsuuMaqaa waliigalaa xiqqaa ta'eef .closegara maqaa jijjiirame..btn-close
Qabduulee cufi amma HTML keessatti background-imagebakka a (SVG ukkaamfame) fayyadamu ×, mallattoo kee tuquu osoo hin barbaachisin dhuunfachiisuun salphaa ta'e hayyama.
.btn-close-whiteGaraagarummaa haaraa kan filter: invert(1)mallattoolee kuffisuu walfaallaa ol'aanaa duubbee dukkanaa'aa irratti dandeessisuuf fayyadamu dabalame.

Ijaarsi kufuu

Accordions'f scroll anchoring haqameera.

Dropdowns kan jedhu

Jijjiiramoota haaraa .dropdown-menu-darkfi jijjiiramoota walqabatan tarreewwan dukkanaa gaaffii irratti dabalame.
Jijjiiramaa haaraa dhaaf dabalame $dropdown-padding-x.
Faallaa fooyya'aa ta'eef qoqqoodduu gadi bu'aa dukkanesse.
CabsuuTaateewwan hunduu tarreef amma qaree jijjiirraa tarree irratti kakaafamu sana booda gara qaama warraatti bubbee.
Sajoo kamshaa amma data-bs-popper="static"saagama amaloota yeroo iddoon gadi bu'aa hin jijjiiramne, ykn tarree navbar keessa jiru saaga. Kunis JaavaScript keenyaan kan dabalame yoo ta'u, akkaataa Popper's positioning osoo hin gufachiisiin akkaataa ejjennoo amala fayyadamuuf nu gargaara.
CabsuuFilannoon gadi bu'aa plugin flipqindeessaa dhalootaa Popper fayyadu gadi bu'e. Amma amala garagalchuu fallbackPlacementsfilannoodhaaf tarree duwwaa fooyyessaa garagalchuu keessatti dabarsuudhaan hanqisuu dandeessa.
Menuuwwan gadi bu'aa amma amala ofumaan cufuuautoClose qabachuuf filannoo haaraa wajjin cuqaasuu danda'u . Filannoo kana fayyadamuun cuqaasuu sajoo tarree keessaa ykn alaa fudhachuun akka wal-qunnamsiisu gochuu dandeessa.
Dropdowns amma s s .dropdown-itemkeessatti marfame deeggaru <li>.

Jumbotroon jedhamuun beekama

CabsuuQaama jumbotron akka faayidaa waliin fakkaafamuu danda'utti gadi dhiise. Demoodhaaf fakkeenya keenya haaraa Jumbotron ilaalaa.

Garee tarreessi

Gareewwan tarreessuuf .list-group-numberedfooyyessaa haaraa dabalame .

Navs fi tabs

nullJijjiiramoota haaraa font-size, font-weight, , colorfi gitaatti dabale.:hover color.nav-link

Navbars jedhaman

CabsuuNavbars amma qabduu keessaa barbaadu (barbaachisummaa addaan fageenyaa fi CSS barbaachisu haalaan salphisuuf).
CabsuuKutaan .activekana booda s irratti hojiirra ooluu hin danda'u .nav-item, kallattiin .nav-links irratti hojiirra ooluu qaba.

Kanfaasiin ala

Qaama offcanvas haaraa dabalame .

Fuulaa (Pagination) jedhu

Hidhamtoonni fuula amma kan dhuunfamuu margin-leftdanda'an kan yeroo walirraa adda baafaman golee hunda irratti daayinamiikiin geengoo ta'an qabu.
transitionHidhamtoota fuulaatti s dabalame .

Popovers jedhaman

CabsuuUnka popover durtii keenya keessatti .arrowgara maqaa jijjiirame ..popover-arrow
Filannoo whiteListgara allowList.

Spinners jedhaman

Spinners amma prefers-reduced-motion: reduceanimations saffisiisuun kabaju. #31882 ilaali .
Hiriirsa dhaabbataa ispiinaraa fooyya'e.

Toostii

Toasts amma gargaarsa positioning utilities tiin a keessatti dhaabuun ni danda'ama ..toast-container
Yeroo toostii durtii gara sekondii 5tti jijjiire.
Toostii overflow: hiddenirraa baafamee border-radiuss sirrii ta'een bakka bu'e calc()dalagaalee wajjin.

Gorsa Meeshaalee

CabsuuUnkaa gorsa meeshaa durtii keenya keessatti .arrowgara maqaa jijjiirame ..tooltip-arrow
CabsuuGatiin durtii kan gara iddoo fooyya'aa elementoota popperiif fallbackPlacementsjijjiirama .['top', 'right', 'bottom', 'left']
CabsuuFilannoo whiteListgara allowList.

Faayidaa (Utilities) jedhaman

CabsuuDeeggarsa RTL dabaluudhaan maqaa kallattii osoo hin taane maqaa qabeentaa loojikii fayyadamuuf faayilii hedduu maqaa jijjiire:
- Maqaa jijjiirraa .left-*fi .right-*gara .start-*fi .end-*.
- Maqaa jijjiirraa .float-leftfi .float-rightgara .float-startfi .float-end.
- Maqaa jijjiirraa .border-leftfi .border-rightgara .border-startfi .border-end.
- Maqaa jijjiirraa .rounded-leftfi .rounded-rightgara .rounded-startfi .rounded-end.
- Maqaa jijjiirraa .ml-*fi .mr-*gara .ms-*fi .me-*.
- Maqaa jijjiirraa .pl-*fi .pr-*gara .ps-*fi .pe-*.
- Maqaa jijjiirraa .text-leftfi .text-rightgara .text-startfi .text-end.
CabsuuMarginoota negaatiivii durtiidhaan hanqifame.
Duubbee 's gara elementoota dabalataatti .bg-bodysaffisaan saaguuf gita haaraa dabalame .<body>
Faayidaa ejjennoo haaraa , top, right, bottomfi left. Gatiin tokkoon tokkoo qabeentaatiif 0, 50%, fi of keessatti qabata.100%
Haaraa .translate-middle-x& .translate-middle-yfaayilii gara qajeelaa ykn dhaabbataa giddugaleessa elementoota absoluutii/dhaabbataa ejjennoo qabanitti dabalame.
border-widthFaayidaa haaraa dabalame .
CabsuuMoggaafame .text-monospacegara .font-monospace.
Cabsuu.text-hideBarreeffama kana booda itti fayyadamuu hin qabne dhoksuuf mala dulloome waan ta'eef haqameera .
.fs-*Faayidaawwan faayiliidhaaf dabalaman font-size(RFS dandeessifame waliin). Isaan kun iskeelii walfakkaataa mata dureewwan durtii HTML fayyadamu (1-6, guddaa hanga xiqqaa), fi karaa kaartaa Sass fooyya'uu danda'u.
Cabsuu.font-weight-*Faayidaa akka .fw-*gabaabsuu fi walsimannaatti maqaa jijjiirame .
Cabsuu.font-style-*Faayidaa akka .fst-*gabaabsuu fi walsimannaatti maqaa jijjiirame .
.d-gridFaayidaa fi faayidaa haaraa agarsiisuuf dabalame gap( .gap) qindaa'inoota CSS Grid fi flexbox.
CabsuuBuqqisee .rounded-smfi rounded-lg, fi iskeelii haaraa daree, .rounded-0gara .rounded-3. #31687 ilaali .
line-heightFaayidaa haaraa dabalame : .lh-1, .lh-sm, .lh-basefi .lh-lg. As ilaalaa .
.d-noneFaayidaa agarsiisaa biroo irratti ulfaatina dabalataa akka kennuuf CSS keenya keessatti faayilii sochoose .
Gargaaraa .visually-hidden-focusableakkasumas qabduu irratti hojjechuuf dheeresse, fayyadamuun :focus-within.

Gargaartoota

Cabsuu Gargaartoonni embed deebii kennan gara gargaartota reeshiyoo maqaa gita haaraa fi amala fooyya'aa qaban, akkasumas jijjiiramaa CSS gargaaraa ta'etti maqaa jijjiiramaniiru.
- Kutaawwan gara reeshiyoo aspeektii keessatti byakka jijjiiramaniif maqaan isaanii jijjiiramaniiru . xFakkeenyaaf, .ratio-16by9amma .ratio-16x9.
- .embed-responsive-itemFilataa garee elementii fi filannoo salphaa ta'e fayyadu gadi dhiifneerra .ratio > *. Gitni dabalataa hin barbaachisu, fi gargaaraan reeshiyoo amma elementii HTML kamiyyuu wajjin hojjeta.
- Kaartaan $embed-responsive-aspect-ratiosSass gara maqaa jijjiiramee $aspect-ratiosgatiiwwan isaas maqaa gitaa fi dhibbeentaa akka lamaanitti hammachuudhaaf key: valuesalphataniiru.
- Jijjiiramoonni CSS amma uumamanii tokkoon tokkoo gatii kaartaa Sass keessatti hammatamaniiru. --bs-aspect-ratioJijjiiramaa irratti fooyyessii reeshiyoo aspeektii amala.ratio kamiyyuu uumuuf .
Cabsuu Kutaawwan “dubbisaa iskiriinii” amma dareewwan “mul’ataan dhokatan” ta’aniiru .
- Faayilii Sass irraa scss/helpers/_screenreaders.scssgara jijjiirescss/helpers/_visually-hidden.scss
- Maqaa jijjiirraa .sr-onlyfi .sr-only-focusablegara .visually-hiddenfi.visually-hidden-focusable
- Maqaa jijjiirraa sr-only()fi sr-only-focusable()mixins gara visually-hidden()fi visually-hidden-focusable().
bootstrap-utilities.cssamma gargaartota keenyas ni dabalata. Gargaartoonni kana booda ijaarsa amala keessatti galchuu hin barbaachisan.

JaavaScript

Hirkatummaa jQuery gadi dhiisee fi JavaScript idilee keessa akka ta'aniif ifteessitoota irra deebi'ee barreesse.
CabsuuAmaloonni deetaa ifteessitoota JaavaScript hundaaf amma maqaa addaan baafamanii hojii Bootstrap qaama sadaffaa fi koodii mataa keetii irraa adda baasuuf gargaara. Fakkeenyaaf, data-bs-togglebakka data-toggle.
Amma pilaaginoonni hundi akka murfii jalqabaatti filannoo CSS fudhachuu danda'u. Fakkeenya haaraa ifteessaa uumuuf qaama DOM ykn filannoo CSS sirrii kamiyyuu dabarsuu dandeessa:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigakka faankishinii qindeessaa Popper durtii Bootstrap akka falmii fudhatutti darbuu danda'a, akka ati qindeessaa durtii kana karaa keetiin walitti makuu dandeessuuf. Gadi bu'oota, popovers, fi tooltips irratti hojjata.
Gatiin durtii kan gara iddoo fooyya'aa elementoota Popperiif fallbackPlacementsjijjiirama . Gadi bu'oota, popovers, fi tooltips irratti hojjata.['top', 'right', 'bottom', 'left']
Malawwan istaatiksii uummataa kan akka _getInstance()→ irraa jala sarara haqameera getInstance().