in English

Hijira zuwa v5

Bi da bitar canje-canje ga fayilolin tushen Bootstrap, takardu, da abubuwan haɗin gwiwa don taimaka muku ƙaura daga v4 zuwa v5.

A wannan shafi

v5.2.0

An sabunta ƙira

Bootstrap v5.2.0 yana fasalta sabuntawar ƙira da dabara don ɗimbin kayan gyara da kaddarorin a cikin aikin, musamman ta hanyar ingantaccen ƙima border-radiusakan maɓalli da sarrafa tsari . Har ila yau, an sabunta takaddun mu tare da sabon shafin gida, shimfidar takardu mafi sauƙi waɗanda ba su sake rushe sassan labarun gefe, da ƙarin fitattun misalan Bootstrap Icons .

Ƙarin masu canji na CSS

Mun sabunta duk abubuwan da muka gyara don amfani da masu canjin CSS. Duk da yake Sass har yanzu yana tallafawa komai, kowane bangare an sabunta shi don haɗa masu canjin CSS akan azuzuwan tushe (misali, .btn), yana ba da damar ƙarin gyare-gyaren Bootstrap na ainihin lokaci. A cikin fitowar ta gaba, za mu ci gaba da faɗaɗa amfani da masu canjin CSS zuwa cikin shimfidar wuri, fom, mataimaka, da abubuwan amfani. Kara karantawa game da masu canji na CSS a kowane bangare akan shafuffukan takardun su.

Amfanin mu na CSS masu canzawa ba zai ɗan cika ba har sai Bootstrap 6. Yayin da muke son aiwatar da waɗannan gabaɗaya a cikin hukumar, suna cikin haɗarin haifar da sauye-sauye. Misali, saitin $alert-border-width: var(--bs-border-width)a lambar tushen mu yana karya yuwuwar Sass a cikin lambar ku idan kuna yin $alert-border-width * 2wani dalili.

Don haka, duk inda zai yiwu, za mu ci gaba da turawa zuwa ƙarin masu canjin CSS, amma da fatan za a gane aiwatar da mu na iya ɗan iyakancewa a cikin v5.

Sabo`_maps.scss`

Bootstrap v5.2.0 ya gabatar da sabon fayil ɗin Sass tare da _maps.scss. Yana fitar da taswirorin Sass da yawa daga _variables.scssdon gyara matsala inda ba a yi amfani da sabuntawa zuwa taswira ta asali zuwa taswirorin sakandare waɗanda ke tsawaita su ba. Misali, $theme-colorsba a yin amfani da sabuntawa zuwa ga wasu taswirorin jigo waɗanda suka dogara da su $theme-colors, ƙetare maɓalli na gyare-gyaren ayyukan aiki. A takaice, Sass yana da iyaka inda da zarar an yi amfani da tsoho ko taswira , ba za a iya sabunta shi ba. Akwai irin wannan gazawar tare da masu canjin CSS lokacin da aka yi amfani da su don tsara wasu masu canjin CSS.

Wannan shine dalilin da ya sa canje-canje masu canzawa a cikin Bootstrap dole ne su zo bayan @import "functions", amma kafin @import "variables"da sauran tarin shigo da mu. Hakanan ya shafi taswirorin Sass-dole ne ku soke abubuwan da ba a so kafin a yi amfani da su. An matsar da taswirori masu zuwa zuwa sabon _maps.scss:

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

Gina Bootstrap CSS na al'ada ya kamata yanzu yayi kama da wannan tare da shigo da taswira daban.

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

Sabbin kayan aiki

Fadada font-weightabubuwan amfani don haɗawa .fw-semibolddon manyan haruffa masu ƙarfi.
Fadada border-radiuskayan aiki don haɗa sabbin masu girma dabam biyu, .rounded-4da .rounded-5, don ƙarin zaɓuɓɓuka.

Ƙarin canje-canje

Gabatar da sabon $enable-container-classeszaɓi. - Yanzu lokacin shiga cikin shimfidar Grid na gwaji na CSS, .container-*har yanzu za a haɗa azuzuwan, sai dai idan an saita wannan zaɓi zuwa false. Kwantena kuma yanzu suna kiyaye ƙimar gutter ɗin su.
Bangaren Offcanvas yanzu yana da bambance-bambancen amsawa . Asalin .offcanvasaji ya kasance baya canzawa - yana ɓoye abun ciki a duk wuraren kallo. Don mayar da martani, canza wannan .offcanvasajin zuwa kowane .offcanvas-{sm|md|lg|xl|xxl}aji.
Masu raba tebur masu kauri yanzu sun shiga. - Mun cire mafi kauri kuma mafi wahala don tsallake iyaka tsakanin rukunin tebur kuma mun matsar da shi zuwa aji na zaɓi wanda zaku iya nema, .table-group-divider. Dubi takaddun tebur don misali.
An sake rubuta Scrollspy don amfani da Intersection Observer API , wanda ke nufin ba kwa buƙatar dangi na dangi, ƙaddamaroffsetda saiti, da ƙari. Nemo aiwatar da Scrollspy ɗinku don zama daidai da daidaito a cikin nunin nav ɗin su.
Popovers da kayan aiki yanzu suna amfani da masu canji na CSS. Wasu masu canjin CSS an sabunta su daga takwarorinsu na Sass don rage yawan masu canji. Sakamakon haka, an soke masu canji guda uku a cikin wannan sakin: $popover-arrow-color, $popover-arrow-outer-color, da $tooltip-arrow-color.
An ƙara sabbin .text-bg-{color}mataimaka. Maimakon saita daidaikun mutane .text-*da .bg-*abubuwan amfani, yanzu zaku iya amfani da .text-bg-*mataimaka don saita background-colorgaba mai bambanta color.
Ƙara .form-check-reversegyare-gyare don jujjuya tsari na lakabi da akwatunan rajistan shiga/radiyo masu alaƙa.
Ƙara ginshiƙai masu tsiri suna goyan bayan tebur ta sabon .table-striped-columnsaji.

Don cikakken jerin canje-canje, duba aikin v5.2.0 akan GitHub .

v5.1.0

Ƙara goyan bayan gwaji don shimfidar Grid na CSS . - Wannan aiki ne na ci gaba, kuma har yanzu bai shirya don amfani da samarwa ba, amma kuna iya shiga sabon fasalin ta hanyar Sass. Don kunna shi, musaki tsoho grid, ta saiti $enable-grid-classes: falsekuma kunna Grid na CSS ta saitin $enable-cssgrid: true.
Sabunta navbars don tallafawa kashe canvas. - Ƙara masu zanen bango a cikin kowane mashaya navbar tare da .navbar-expand-*azuzuwan masu amsawa da wasu alamar tazara.
An ƙara sabon ɓangaren mai riƙe wuri . - Sabon fasalin mu, hanya don samar da tubalan wucin gadi a madadin ainihin abun ciki don taimakawa nuna cewa har yanzu wani abu yana lodawa a cikin rukunin yanar gizonku ko app.
Rushe plugin yanzu yana goyan bayan rushewar kwance . - Ƙara .collapse-horizontalzuwa .collapsega rushewar widthmaimakon height. Guji gyara mai lilo ta hanyar saita min-heightko height.
An ƙara sabon tari da mataimakan doka na tsaye. - Yi amfani da kaddarorin flexbox da sauri don ƙirƙirar shimfidu na al'ada da sauri tare da tari . Zaɓi daga likafai na kwance ( .hstack) da na tsaye ( .vstack) . Ƙara masu rarraba tsaye kama da <hr>abubuwa tare da sababbin .vrmataimaka .
An ƙara sabbin :rootmasu canjin CSS na duniya. - An ƙara sabbin masu canjin CSS da yawa zuwa :rootmatakin sarrafa <body>salo. Ƙarin suna cikin ayyukan, gami da ko'ina cikin abubuwan amfaninmu da abubuwan haɗin gwiwarmu, amma a yanzu karanta masu canjin CSS a cikin Sashen Gyara .
Ƙunƙarar launi da abubuwan amfani na bango don amfani da masu canji na CSS, kuma sun ƙara sabon saƙon rubutu da bayanan bayanan bayanan . - .text-* kuma .bg-*yanzu an gina kayan aiki tare da masu canji na CSS da rgba()ƙimar launi, yana ba ku damar keɓance kowane kayan aiki cikin sauƙi tare da sabbin abubuwan amfani.
An ƙara sabbin misalan snippet bisa tushen don nuna yadda ake keɓance kayan aikin mu. - Ja da shirye don amfani da abubuwan da aka keɓance da sauran ƙirar ƙira na gama gari tare da sabbin misalan Snippets ɗin mu . Ya haɗa da ƙafafu , zazzagewa , ƙungiyoyin jeri , da tsari .
An cire salon sanyawa da ba a yi amfani da su ba daga faɗuwa da kayan aiki kamar yadda Popper ke sarrafa waɗannan kawai. $tooltip-marginan yanke shi kuma an saita shi nulla cikin tsari.

Kuna son ƙarin bayani? Karanta gidan yanar gizon v5.1.0.

Sannu! Canje-canje ga babban sakin mu na farko na Bootstrap 5, v5.0.0, an rubuta su a ƙasa. Ba sa nuna ƙarin canje-canjen da aka nuna a sama.

Dogara

An sauke jQuery.
An haɓaka daga Popper v1.x zuwa Popper v2.x.
Maye gurbin Libsass tare da Dart Sass kamar yadda mai tara Sass ɗin mu da aka ba Libsas ya ƙare.
Yi ƙaura daga Jekyll zuwa Hugo don gina takaddun mu

Tallafin mai lilo

An sauke Internet Explorer 10 da 11
An sauke Microsoft Edge <16 (Legacy Edge)
An sauke Firefox <60
Safari da aka sauke <12
An sauke iOS Safari <12
An sauke Chrome <60

Canje-canjen takardu

Sake tsara shafin gida, shimfidar takardu, da ƙafa.
An ƙara sabon jagorar Parcel .
An ƙara sabon sashe keɓancewa , maye gurbin v4's Theming page , tare da sabbin bayanai akan Sass, zaɓin daidaitawa na duniya, tsarin launi, masu canjin CSS, da ƙari.
Sake tsara duk takardun tsari zuwa sabon sashe na Forms , raba abubuwan cikin abubuwan da aka fi mayar da hankali.
Hakazalika, an sabunta sashin Layout , don fitar da abun cikin grid a sarari.
Sake suna "Navs" shafin bangaren zuwa "Navs & Tabs".
Sake sunan shafin "Checks" zuwa "Checks & Rediyo".
Sake tsara navbar kuma ya ƙara sabon subnav don sauƙaƙa kewaya rukunin yanar gizon mu da nau'ikan takardu.
Ƙara sabon gajeriyar hanyar madannai don filin bincike: Ctrl + /.

Sass

Mun kawar da tsohowar taswirar Sass don sauƙaƙa cire ƙimar ƙima. Ka tuna cewa yanzu dole ne ka ayyana duk dabi'u a cikin taswirar Sass kamar $theme-colors. Duba yadda ake mu'amala da taswirorin Sass .
KaryewaAyyukan da aka sake suna color-yiq()da masu alaƙa da su color-contrast()kamar yadda baya da alaƙa da sararin launi na YIQ. Duba #30168.
- $yiq-contrasted-thresholdan sake masa suna zuwa $min-contrast-ratio.
- $yiq-text-darkkuma $yiq-text-lightan sake masa suna zuwa $color-contrast-darkda $color-contrast-light.
KaryewaMembobin tambayar mediya mixins sun canza don mafi ma'ana.
- media-breakpoint-down()yana amfani da wurin karyewa kanta a maimakon wurin hutu na gaba (misali, media-breakpoint-down(lg)maimakon media-breakpoint-down(md)maƙasudin kallon ƙasa da lg).
- Hakazalika, ma'auni na biyu a ciki media-breakpoint-between()shima yana amfani da madaidaicin wurin da kansa maimakon wuri na gaba (misali, media-between(sm, lg)maimakon media-breakpoint-between(sm, md)maƙasudin ra'ayi tsakanin smda lg).
KaryewaSalon bugu da aka cire da $enable-print-stylesmasu canji. Har yanzu azuzuwan nuni suna nan a kusa. Duba #28339 .
KaryewaSauke color(), theme-color(), da gray()ayyuka don goyon bayan masu canji. Duba #29083 .
KaryewaAyyukan da aka sake suna theme-color-level()zuwa color-level()kuma yanzu yana karɓar kowane launi da kuke so maimakon kawai $theme-colorlaunuka. Duba #29083 A kula: color-level() daga baya aka shiga v5.0.0-alpha3.
KaryewaSake suna $enable-prefers-reduced-motion-media-querykuma $enable-pointer-cursor-for-buttonszuwa $enable-reduced-motionkuma $enable-button-pointersdon taƙaitawa.
KaryewaAn cire abin haɗin bg-gradient-variant(). Yi amfani da .bg-gradientajin don ƙara gradients zuwa abubuwa maimakon .bg-gradient-*azuzuwan da aka ƙirƙira.
Karyewa Abubuwan da aka cire a baya waɗanda aka soke:
- hover, hover-focus, plain-hover-focus, kumahover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(kuma ya watsar da aji mai alaƙa, .text-hide)
- visibility()
- form-control-focus()
KaryewaSake suna scale-color()don shift-color()gujewa karo tare da aikin sikelin launi na Sass.
box-shadowmixins yanzu suna ba da damar ƙima nullda faɗuwa nonedaga mahawara da yawa. Duba #30394 .
Mixin border-radius()yanzu yana da ƙimar tsoho.

Tsarin launi

Tsarin launi wanda yayi aiki tare color-level()kuma $theme-color-intervalan cire shi don goyon bayan sabon tsarin launi. Duk lighten()da darken()ayyuka a cikin codebase an maye gurbinsu tint-color()da shade-color(). Wadannan ayyuka za su haɗu da launi tare da ko dai fari ko baki maimakon canza haskensa ta ƙayyadadden adadin. So ko dai shift-color()tint ko inuwa launi dangane da ko ma'aunin nauyin sa yana da kyau ko mara kyau. Duba #30622 don ƙarin bayani.
Ƙara sabon tints da inuwa don kowane launi, yana ba da launuka daban-daban guda tara don kowane launi na tushe, azaman sabbin masu canji na Sass.
Ingantattun bambancin launi. Matsakaicin bambancin launi da aka samu daga 3:1 zuwa 4.5:1 da sabunta shuɗi, kore, cyan, da launuka masu ruwan hoda don tabbatar da bambancin WCAG 2.1 AA. Hakanan ya canza launin bambancin launin mu daga $gray-900zuwa $black.
Don tallafawa tsarin launi na mu, mun ƙara sabbin al'ada tint-color()da shade-color()ayyuka don haɗa launukanmu yadda ya kamata.

Sabuntawar Grid

Sabuwar wurin karyewa! An ƙara sabon wurin xxlwarwarewa don 1400pxda sama. Babu canje-canje ga duk sauran wuraren karyawa.
Ingantattun gutters. Yanzu an saita magudanar ruwa a cikin rems, kuma sun fi kunkuntar v4 ( 1.5rem, ko kusan 24px, ƙasa daga 30px). Wannan yana daidaita magudanar ruwa na tsarin grid ɗinmu tare da abubuwan amfaninmu na tazara.
- An ƙara sabon ajin gutter ( .g-*, .gx-*, da .gy-*) don sarrafa magudanar ruwa a kwance/tsaye, magudanar ruwa, da magudanan ruwa na tsaye.
- KaryewaAn sake suna .no-guttersdon .g-0dacewa da sabbin kayan aikin gutter.
ginshiƙai ba su ƙara yin position: relativeamfani da su ba, don haka ƙila ka ƙara .position-relativezuwa wasu abubuwa don maido da wannan ɗabi'ar.
KaryewaAn .order-*sauke darussa da yawa waɗanda galibi ba a yi amfani da su ba. Yanzu muna samar .order-1da kawai .order-5daga cikin akwatin.
KaryewaAn jefar da .mediabangaren saboda ana iya kwafi shi cikin sauƙi tare da kayan aiki. Dubi #28265 da shafi mai sassauƙa don misali .
Karyewa bootstrap-grid.cssyanzu kawai ya shafi box-sizing: border-boxshafi maimakon sake saita girman akwatin duniya. Ta wannan hanyar, ana iya amfani da salon grid ɗin mu a ƙarin wurare ba tare da tsangwama ba.
$enable-grid-classesba ya ƙara kashe ƙarni na azuzuwan kwantena. Duba #29146.
An sabunta make-colmahaɗin zuwa tsoho zuwa daidaitattun ginshiƙai ba tare da ƙayyadadden girman ba.

Abun ciki, Sake yi, da sauransu

RFS yanzu an kunna ta tsohuwa. Kanun labarai da ke amfani dafont-size()mahaɗin za su daidaita su ta atomatikfont-sizezuwa sikelin su tare da wurin kallo. An riga an shigar da wannan fasalin tare da v4.
KaryewaAn sabunta rubutun mu don maye gurbin $display-*masu canjin mu da $display-font-sizestaswirar Sass. Hakanan an cire masu $display-*-weightcanji guda ɗaya don s guda ɗaya $display-font-weightda daidaitacce font-size.
An ƙara sabbin .display-*masu girma dabam biyu, .display-5da .display-6.
Ana yin layi ta hanyar haɗin kai ta tsohuwa (ba kawai a kan motsi ba), sai dai idan sun kasance ɓangare na takamaiman abubuwan da aka gyara.
Sake tsara teburi don sabunta salon su da sake gina su tare da masu canjin CSS don ƙarin iko akan salo.
KaryewaTebura masu gida ba su gaji salo kuma.
Karyewa .thead-lightkuma .thead-darkan jefar da su ga .table-*bambance-bambancen azuzuwan waɗanda za a iya amfani da su don duk abubuwan tebur ( thead, tbody, tfoot, tr, thda td).
KaryewaAn table-row-variant()sake sanya wa mixin suna table-variant()kuma yana karɓar sigogi 2 kawai: $color(sunan launi) da $value(lambar launi). Ana ƙididdige launi na kan iyaka da launukan lafazi ta atomatik bisa ma'auni na tebur.
Rarraba masu canjin tantanin halitta na tebur zuwa -yda -x.
KaryewaAn sauke darasi .pre-scrollable. Duba #29135
Karyewa .text-*abubuwan amfani ba sa ƙara jujjuyawa da jahohin mayar da hankali ga hanyoyin haɗin gwiwa kuma. .link-*Za a iya amfani da azuzuwan taimako maimakon. Duba #29267
KaryewaAn sauke darasi .text-justify. Duba #29793
Karyewa <hr>abubuwa yanzu suna amfani da su heightmaimakon borderdon inganta sizesifa. Wannan kuma yana ba da damar yin amfani da kayan aikin padding don ƙirƙirar masu rarraba masu kauri (misali, <hr class="py-1">).
Sake saita tsoho a kwance padding-lefta kunne <ul>da <ol>abubuwa daga tsohowar burauza 40pxzuwa 2rem.
Ƙara $enable-smooth-scroll, wanda ya shafi scroll-behavior: smoothduniya-sai dai masu amfani da ke neman rage motsi ta hanyar prefers-reduced-motiontambayar kafofin watsa labaru. Duba #31877

RTL

Takaitaccen madaidaicin jagorar madaidaiciya, kayan aiki, da mixins duk an sake canza suna don amfani da kaddarorin ma'ana kamar waɗanda aka samo a cikin shimfidar flexbox-misali, startkuma enda madadin leftda right.

Siffofin

An ƙara sabbin siffofin iyo! Mun inganta misalin alamun tambarin ruwa zuwa cikakken goyan bayan nau'ikan tsari. Duba sabon shafin lakabin iyo.
Karyewa Haɓaka abubuwan asali na asali da na al'ada. Akwatunan bincike, rediyo, zaɓaɓɓu, da sauran abubuwan shigar da ke da azuzuwan asali da na al'ada a cikin v4 an haɗa su. Yanzu kusan dukkanin nau'ikan nau'ikan mu gabaɗayan al'ada ne, galibi ba tare da buƙatar HTML na al'ada ba.
- .custom-control.custom-checkboxyana yanzu .form-check.
- .custom-control.custom-custom-radioyana yanzu .form-check.
- .custom-control.custom-switchyana yanzu .form-check.form-switch.
- .custom-selectyana yanzu .form-select.
- .custom-filekuma .form-filean maye gurbinsu da salon al'ada a saman .form-control.
- .custom-rangeyana yanzu .form-range.
- An sauke ɗan ƙasa .form-control-filekuma .form-control-range.
KaryewaAn sauke .input-group-appendkuma .input-group-prepend. Yanzu zaku iya ƙara maɓalli kawai kuma .input-group-textazaman yaran ƙungiyoyin shigarwa kai tsaye.
Tsawon radiyon kan iyaka da aka rasa akan rukunin shigarwa tare da bugu mai inganci an daidaita shi a ƙarshe ta ƙara ƙarin .has-validationaji zuwa ƙungiyoyin shigarwa tare da inganci.
Karyewa An sauke takamaiman azuzuwan shimfidar wuri don tsarin grid ɗin mu. Yi amfani da grid da abubuwan amfani maimakon .form-group, .form-row, ko .form-inline.
KaryewaAlamun sigar yanzu suna buƙatar .form-label.
Karyewa .form-textno longer sets display, yana ba ku damar ƙirƙirar layi ko toshe rubutun taimako kamar yadda kuke so kawai ta canza abubuwan HTML.
Ba a daina amfani da sarrafa fom gyarawa heightlokacin da zai yiwu, maimakon jinkirtawa min-heightdon haɓaka keɓancewa da dacewa tare da sauran abubuwan haɗin gwiwa.
Ba a ƙara amfani da gumakan tabbatarwa zuwa <select>s tare da multiple.
Fayilolin Sass da aka sake tsarawa a ƙarƙashin scss/forms/, gami da salon shigar ƙungiyar.

Abubuwan da aka gyara

Haɗin paddingƙima don faɗakarwa, gurasar burodi, katunan, zazzagewa, ƙungiyoyin jeri, modals, popovers, da tukwici na kayan aiki don dogara da $spacercanjin mu. Duba #30564 .

Accordion

An ƙara sabon bangaren accordion .

Fadakarwa

Faɗakarwa yanzu suna da misalai tare da gumaka .
An cire salo na al'ada don <hr>s a cikin kowane faɗakarwa tunda sun riga sun yi amfani da currentColor.

Baji

KaryewaAn watsar da duk .badge-*nau'ikan launi don abubuwan amfani na baya (misali, amfani .bg-primarymaimakon .badge-primary).
KaryewaAn .badge-pillsauke - yi amfani da .rounded-pillmai amfani maimakon.
KaryewaCire shawagi da salon mayar da hankali ga abubuwa <a>da <button>abubuwa.
Ƙara tsoho madaidaicin don baji daga .25em/ .5emzuwa .35em/ .65em.

Gurasa gurasa

Sauƙaƙe tsohowar bayyanar crumbs ta hanyar cire padding, background-color, da border-radius.
Ƙara sabon kadarorin CSS na al'ada --bs-breadcrumb-dividerdon sauƙaƙe keɓancewa ba tare da buƙatar sake tattara CSS ba.

Buttons

Karyewa Maɓallin maɓalli , tare da akwatuna ko radiyo, baya buƙatar JavaScript kuma suna da sabon alama. Ba mu ƙara buƙatar abin rufewa, ƙara.btn-checkzuwa<input>, da kuma haɗa shi da kowane.btnnau'i akan<label>. Duba #30650 . Takaddun bayanai na wannan sun ƙaura daga shafin Buttons zuwa sabon sashin Forms.
Karyewa An sauke .btn-blockdon kayan aiki. Maimakon amfani .btn-blockda kan .btn, kunsa maɓallan ku .d-gridda abin .gap-*amfani don yin sarari su yadda ake buƙata. Canja zuwa azuzuwan masu amsawa don ƙarin iko akan su. Karanta takardun don wasu misalai.
An sabunta mu button-variant()da button-outline-variant()mixins don tallafawa ƙarin sigogi.
Maɓallai da aka sabunta don tabbatar da ƙarin bambanci akan jujjuyawa da jihohi masu aiki.
Maɓallan da aka kashe yanzu suna da pointer-events: none;.

Katin

KaryewaSauke .card-decka cikin ni'imar mu grid. Kunna katunan ku a cikin azuzuwan ginshiƙi kuma ƙara .row-cols-*akwati na iyaye don sake ƙirƙirar benen katin (amma tare da ƙarin iko akan daidaitawa).
KaryewaAn jefar .card-columnsda Masonry. Duba #28922 .
KaryewaMaye gurbin .cardtushen accordion tare da sabon bangaren Accordion .

Carousel

An ƙara sabon .carousel-darkbambance-bambancen don rubutu mai duhu, sarrafawa, da masu nuni (mai girma don bangon haske).
Gumakan chevron da aka sauya don sarrafa carousel tare da sabbin SVGs daga gumakan Bootstrap .

Maɓallin rufewa

KaryewaAn sake masa suna .closedon .btn-closeƙaramin suna.
Maɓallin rufewa yanzu suna amfani da background-image(wanda aka saka SVG) maimakon ×a cikin HTML, yana ba da damar sauƙaƙe keɓancewa ba tare da buƙatar taɓa alamarku ba.
Ƙara sabon .btn-close-whitebambance-bambancen da ke amfani filter: invert(1)da shi don ba da damar korar gumaka masu girma a kan tushen duhu.

Rushewa

An cire gungurawa don accordions.

Zazzagewa

An ƙara sabon .dropdown-menu-darkbambance-bambancen da alaƙa masu alaƙa don buƙatu masu duhu masu duhu.
An ƙara sabon canji don $dropdown-padding-x.
Ya duhuntar da mai raba zazzage don ingantacciyar bambanci.
KaryewaDuk abubuwan da suka faru na zazzagewar yanzu an kunna su akan maɓallin jujjuyawar zazzage sannan a bubbled har zuwa kashi na iyaye.
Menu na saukarwa yanzu suna da data-bs-popper="static"sifa da aka saita lokacin da sanya jerin zaɓuka ya tsaya tsayin daka, ko zazzagewa yana cikin mashigin navbar. Wannan yana ƙara ta JavaScript ɗin mu kuma yana taimaka mana amfani da salon matsayi na al'ada ba tare da tsoma baki tare da sanya Popper ba.
KaryewaZaɓin da aka flipsauke don plugin ɗin zaɓuka don goyon bayan daidaitawar Popper na asali. Yanzu zaku iya musaki dabi'ar jujjuyawa ta hanyar wuce tsararrun fanko don fallbackPlacementszaɓi a cikin jujjuyawa .
Menu na saukarwa yanzu ana iya dannawa tare da sabon autoClosezaɓi don sarrafa halayen kusa da auto . Kuna iya amfani da wannan zaɓin don karɓar danna ciki ko wajen menu na zazzagewa don sanya shi mu'amala.
Dropdowns yanzu yana tallafawa .dropdown-items nannade cikin <li>s.

Jumbotron

KaryewaAn jefar da ɓangaren jumbotron kamar yadda za'a iya kwafi shi da kayan aiki. Duba sabon misalin Jumbotron na mu don demo.

Jerin rukuni

An ƙara sabon mai .list-group-numberedgyara zuwa lissafin ƙungiyoyi.

Navs da shafuka

Ƙara sababbin nullmasu canji don font-size, font-weight, color, da :hover colorzuwa .nav-linkaji.

Navbars

KaryewaNavbars yanzu suna buƙatar akwati a ciki (don sauƙaƙe buƙatun tazara da buƙatar CSS).
KaryewaBa .activeza a iya ƙara ajin zuwa .nav-items ba, dole ne a yi amfani da shi kai tsaye akan .nav-links.

Offcanvas

An ƙara sabon bangaren offcanvas .

Pagination

Hanyoyin haɗin yanar gizo a yanzu suna da abubuwan da za a iya daidaita margin-leftsu waɗanda aka zagaya da su a duk sasanninta idan aka rabu da juna.
Ƙara transitions zuwa hanyoyin haɗin yanar gizo.

Popovers

KaryewaSake suna .arrowzuwa .popover-arrowa cikin tsoho samfurin popover.
whiteListZaɓin sake suna zuwa allowList.

Masu juyawa

Masu jujjuyawar yanzu suna daraja prefers-reduced-motion: reduceta hanyar rage raye-raye. Duba #31882 .
Ingantattun jeri a tsaye na spinner.

Gishiri

Toasts yanzu za a iya sanya su a cikin wani .toast-containertare da taimakon saka kayan aiki .
Canza tsoho lokacin toast zuwa 5 seconds.
Cire overflow: hiddendaga toasts kuma an maye gurbinsu da daidaitattun border-radiuss tare da calc()ayyuka.

Nasihun kayan aiki

KaryewaSake suna .arrowzuwa .tooltip-arrowa cikin tsoho samfurin kayan aiki.
KaryewaTsohuwar ƙimar don fallbackPlacementsan canza zuwa ['top', 'right', 'bottom', 'left']don mafi kyawun wuri na abubuwan popper.
KaryewawhiteListZaɓin sake suna zuwa allowList.

Abubuwan amfani

KaryewaSake suna masu amfani da yawa don amfani da sunayen kadarorin ma'ana maimakon sunayen jagora tare da ƙarin tallafin RTL:
- Sake suna .left-*kuma .right-*zuwa .start-*kuma .end-*.
- Sake suna .float-leftkuma .float-rightzuwa .float-startkuma .float-end.
- Sake suna .border-leftkuma .border-rightzuwa .border-startkuma .border-end.
- Sake suna .rounded-leftkuma .rounded-rightzuwa .rounded-startkuma .rounded-end.
- Sake suna .ml-*kuma .mr-*zuwa .ms-*kuma .me-*.
- Sake suna .pl-*kuma .pr-*zuwa .ps-*kuma .pe-*.
- Sake suna .text-leftkuma .text-rightzuwa .text-startkuma .text-end.
KaryewaAn kashe raƙuman mara kyau ta tsohuwa.
An ƙara sabon .bg-bodyaji don saurin saita <body>bayanan zuwa ƙarin abubuwa.
An ƙara sabbin abubuwan amfani na matsayi don top, right, bottom, da left. Ƙimar sun haɗa da 0, 50%, da 100%ga kowace dukiya.
Ƙara sababbi .translate-middle-x& .translate-middle-ykayan aiki zuwa a kwance ko a tsaye tsakiyar cikakkar abubuwa/kafaffen matsayi.
An ƙara sabbin border-widthkayan aiki .
KaryewaAn canza suna .text-monospacezuwa .font-monospace.
KaryewaAn cire .text-hideshi azaman tsohuwar hanya don ɓoye rubutu wanda bai kamata a yi amfani da shi ba.
Abubuwan da aka ƙara .fs-*don font-sizeabubuwan amfani (tare da kunna RFS). Waɗannan suna amfani da ma'auni ɗaya da tsoffin rubutun HTML (1-6, babba zuwa ƙarami), kuma ana iya canzawa ta taswirar Sass.
Karyewa.font-weight-*Abubuwan amfani da aka sake suna .fw-*don gajarta da daidaito.
Karyewa.font-style-*Abubuwan amfani da aka sake suna .fst-*don gajarta da daidaito.
An ƙara .d-griddon nuna kayan aiki da sabbin gapkayan aiki ( .gap) don CSS Grid da shimfidar akwatin flexbox.
KaryewaAn cire .rounded-smkuma rounded-lg, kuma an gabatar da sabon sikelin azuzuwan, .rounded-0zuwa .rounded-3. Duba #31687 .
Ƙara sabbin line-heightkayan aiki: .lh-1, .lh-sm, .lh-baseda .lh-lg. Duba nan .
An matsar da .d-nonemai amfani a cikin CSS ɗinmu don ba shi ƙarin nauyi akan sauran kayan aikin nuni.
Ƙarfafa .visually-hidden-focusablemataimaki don yin aiki a kan kwantena, ta amfani da :focus-within.

Mataimaka

Karyewa An sake canza mataimakan da aka saka masu amsa suna zuwa ga mataimakan rabo tare da sabbin sunaye na aji da ingantattun ɗabi'u, da kuma madaidaicin CSS mai taimako.
- An canza suna azuzuwan don canzawa byzuwa xyanayin yanayin. Misali, .ratio-16by9yanzu .ratio-16x9.
- Mun jefar .embed-responsive-itemda mai zaɓe na rukuni don neman mai zaɓe mafi sauƙi .ratio > *. Ba a buƙatar ƙarin aji, kuma mai taimakawa rabo yanzu yana aiki tare da kowane nau'in HTML.
- An $embed-responsive-aspect-ratiossake yiwa taswirar Sass suna $aspect-ratioskuma an sauƙaƙa ƙimarta don haɗa sunan ajin da kashi a matsayin key: valuebiyu.
- An ƙirƙira masu canjin CSS kuma an haɗa su don kowace ƙima a taswirar Sass. Gyara --bs-aspect-ratiom akan madaidaicin .ratiodon ƙirƙirar kowane juzu'i na al'ada .
Karyewa Azuzuwan “Mai karanta allo” yanzu azuzuwan “boye ne na gani” .
- Canza fayil ɗin Sass daga scss/helpers/_screenreaders.scsszuwascss/helpers/_visually-hidden.scss
- Sake suna .sr-onlykuma .sr-only-focusablezuwa .visually-hiddenkuma.visually-hidden-focusable
- Sake suna sr-only()kuma sr-only-focusable()ya haɗa zuwa visually-hidden()da visually-hidden-focusable().
bootstrap-utilities.cssyanzu kuma ya hada da mataimakan mu. Ba sa buƙatar shigo da mataimaka a cikin gine-gine na al'ada kuma.

JavaScript

An sauke jQuery dogara da sake rubuta plugins don kasancewa cikin JavaScript na yau da kullun.
KaryewaHalayen bayanai na duk plugins na JavaScript yanzu an raba sunaye don taimakawa bambance ayyukan Bootstrap daga ɓangare na uku da lambar ku. Misali, muna amfani da data-bs-togglemaimakon data-toggle.
Duk plugins yanzu suna iya karɓar mai zaɓin CSS azaman hujja ta farko. Kuna iya ko dai wuce wani ɓangaren DOM ko kowane mai zaɓin CSS mai aiki don ƙirƙirar sabon misalin plugin ɗin:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigza a iya wuce shi azaman aikin da ke karɓar saitunan Popper tsoho na Bootstrap a matsayin hujja, ta yadda za ku iya haɗa wannan tsohuwar saitin ta hanyar ku. Ya shafi zaɓuka, popovers, da tukwici na kayan aiki.
Tsohuwar ƙimar don fallbackPlacementsan canza zuwa ['top', 'right', 'bottom', 'left']don mafi kyawun wuri na abubuwan Popper. Ya shafi zaɓuka, popovers, da tukwici na kayan aiki.
Cire ma'auni daga hanyoyin jama'a a tsaye kamar _getInstance()→ getInstance().