Kutamira kune v5

Tevera uye ongorora shanduko kuBootstrap sosi mafaera, zvinyorwa, uye zvikamu zvekukubatsira kutama kubva kuv4 kuenda kuv5.

Pa peji ino

v5.2.0

Yakazorodzwa dhizaini

Bootstrap v5.2.0 inoratidzira yakavanzika dhizaini yekuvandudza kwezvishoma zvezvikamu uye zvivakwa mukati meprojekiti, zvakanyanya kuburikidza nekunatswa kwakanatswa border-radiuspamabhatani uye fomu zvidzoreso . Zvinyorwa zvedu zvakare zvakagadziridzwa nepeji nyowani yekumba, yakapfava magwaro marongero ayo asingachaputsi zvikamu zveparutivi, uye nemimwe mienzaniso yakatanhamara yeBootstrap Icons .

Mamwe maCSS akasiyana

Isu takagadziridza ese mazvikamu zvedu kuti tishandise CSS zvinosiyana. Nepo Sass ichiri kutsigira zvese, chikamu chega chega chakagadziridzwa kuti chisanganise CSS zvinosiyana pachikamu chechikamu makirasi (eg, .btn), zvichibvumira imwe chaiyo-nguva kugadzirisa yeBootstrap. Mukuburitswa kunotevera, isu ticharamba tichiwedzera mashandisiro edu eCSS akasiyana muchimiro chedu, mafomu, vabatsiri, uye zvekushandisa. Verenga zvakawanda nezve CSS zvinosiyana muchikamu chimwe nechimwe pamapeji avo ezvinyorwa.

Kushandiswa kwedu kweCSS kunenge kusina kukwana kusvika Bootstrap 6. Kunyange tichida kushandisa zvizere izvi kumativi ose, zvinotungamirira njodzi yekukonzera kuchinja. Semuyenzaniso, kuseta $alert-border-width: var(--bs-border-width)mune yedu sosi kodhi inopwanya ingangoita Sass mune yako kodhi kana wanga uchiita $alert-border-width * 2nekuda kwechimwe chikonzero.

Saka nekudaro, pese pazvinogoneka, ticharamba tichisundidzira kune mamwe maCSS akasiyana, asi ndapota ziva kuti kuita kwedu kunogona kuve kushoma muv5.

New`_maps.scss`

Bootstrap v5.2.0 yakaunza faira idzva reSass rine _maps.scss. Inoburitsa mamepu akati wandei eSass kubva _variables.scsskugadzirisa nyaya uko zvigadziriso kumepu yepakutanga hazvina kuiswa kune yechipiri mepu dzinodziwedzera. Semuenzaniso, zvigadziriso $theme-colorszvanga zvisiri kushandiswa kune mamwe mamepu emusoro aivimba nawo $theme-colors, kutyora kiyi yekugadzirisa mafambiro. Muchidimbu, Sass ine muganho apo kana mepu yakamboshandiswa kana mepu , haigone kuvandudzwa. Pane kuperevedza kwakafanana neCSS zvinosiyana kana zvichishandiswa kugadzira mamwe maCSS akasiyana.

Ichi ndicho chikonzero magadzirirwo akasiyana muBootstrap anofanirwa kuuya mushure @import "functions", asi zvisati zvaitika @import "variables"uye zvimwe zvese zvekutumira. Zvimwe chetezvo zvinoshanda kumamepu eSass-iwe unofanirwa kudarika izvo zvisiri izvo zvisati zvashandiswa. Mamepu anotevera akaendeswa kune itsva _maps.scss:

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

Yako tsika yeBootstrap CSS inovaka inofanira ikozvino kutaridzika seizvi ine yakaparadzana mepu kupinza.

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

Zvishandiso zvitsva

font-weightZvishandiso zvakawedzerwa zvinosanganisira semibold .fw-semiboldmafonti.
Zvishandiso border-radiuszvakawedzerwa zvinosanganisira maviri matsva saizi, .rounded-4uye .rounded-5, kune dzimwe sarudzo.

Dzimwe shanduko

Yakasuma $enable-container-classessarudzo itsva. - Zvino paunopinda muyedzo yeCSS Grid dhizaini, .container-*makirasi acharamba achiunganidzwa, kunze kwekunge iyi sarudzo yaiswa false. Makoniti zvakare zvino anochengeta hunhu hwawo hwegutter.
Offcanvas chikamu ikozvino chine mhinduro dzakasiyana . Kirasi yekutanga .offcanvasinoramba isina kuchinjika-inovanza zvemukati pane ese maratidziro. Kuita kuti ipindure, shandura iyo .offcanvaskirasi kune chero .offcanvas-{sm|md|lg|xl|xxl}kirasi.
Zvikamu zvakakora zvetafura zvino vasarudza kupinda. — Tabvisa iyo yakakora uye yakanyanya kuoma kudarika muganhu pakati pemapoka ematafura uye takaiendesa kune imwe kirasi yaungasarudza iwe yaunogona kunyorera, .table-group-divider. Ona tafura docs semuenzaniso.
Scrollspy yakanyorwazve kuti ishandise Intersection Observer API , zvinoreva kuti hauchada hama dzevabereki wrappers, deprecatesoffsetconfig, nezvimwe. Tarisa mashandisirwo ako eScrollspy kuti ave akanyanya uye anoenderana mukusimbisa kwavo nav.
Popovers uye tooltips ikozvino shandisa CSS zvinosiyana. Zvimwe zvakasiyana-siyana zveCSS zvakagadziridzwa kubva kune avo veSass kuti vaderedze huwandu hwemhando. Nekuda kweizvozvo, matatu akasiyana akaregwa mukuburitswa uku: $popover-arrow-color, $popover-arrow-outer-color, uye $tooltip-arrow-color.
Akawedzera .text-bg-{color}vabatsiri vatsva. Panzvimbo yekuseta munhu .text-*uye .bg-*zvekushandisa, iwe zvino unogona kushandisa vabatsiri .text-bg-*kuseta ine background-colorinosiyanisa kumberi color.
Yakawedzera .form-check-reversegadziriso kuti ishandure kurongeka kwemavara uye anosanganisirwa mabhokisi ekutarisa/redhiyo.
Yakawedzera mitsetse makoramu rutsigiro kumatafura kuburikidza .table-striped-columnsnekirasi itsva.

Kuti uwane runyoro rwakakwana rwekuchinja, ona v5.2.0 chirongwa paGitHub .

v5.1.0

Yakawedzera tsigiro yekuedza yeCSS Grid marongero . - Iri ibasa ririkuenderera mberi, uye harisati ragadzirira kushandiswa kwekugadzira, asi unogona kupinda muchinhu chitsva kuburikidza neSass. Kuti uigonese, dzima iyo yakasarudzika grid, nekuisa $enable-grid-classes: falseuye kugonesa iyo CSS Grid nekuisa $enable-cssgrid: true.
Yakagadziridzwa ma navbar kuti itsigire offcanvas. - Wedzera offcanvas madhirowa mune chero navbar nemakirasi anoteerera .navbar-expand-*uye mamwe offcanvas markup.
Yakawedzera chikamu chitsva chechibatiso . -Chidimbu chedu chitsva, nzira yekupa zvidhinha zvenguva pfupi pachinzvimbo chezvinyorwa chaizvo kubatsira kuratidza kuti chimwe chinhu chichiri kurodha musaiti yako kana app.
Collapse plugin ikozvino inotsigira yakachinjika kudonha . - Wedzera .collapse-horizontalkune yako .collapsekudonha iyo widthpachinzvimbo cheiyo height. Dzivisa kupendazve bhurawuza nekuisa min-heightkana height.
Yakawedzera stack itsva uye vertical rule vabatsiri. -Kurumidza shandisa akawanda flexbox zvivakwa kuti akurumidze kugadzira zvimiro zvetsika nemastacks . Sarudza kubva kune yakachinjika ( .hstack) uye yakatwasuka ( .vstack) stacks. Wedzera vertical dividers yakafanana <hr>nezvinhu zvine vabatsiri vatsva.vr .
Yakawedzera mitsva yepasi rose :rootyeCSS. - Yakawedzera akati wandei matsva eCSS akasiyana :rootpadanho rekudzora <body>masitaera. Zvakawanda zviri mumabasa, kusanganisira pazvishandiso zvedu zvese uye zvikamu, asi parizvino verenga zvinosiyana zveCSS muchikamu cheGadzirisa .
Yakakwenenzverwa ruvara uye kumashure zvinoshandiswa kushandisa CSS zvinosiyana, uye yakawedzera zvinyorwa zvitsva opacity uye kumashure opacity utilities. - .text-* uye .bg-*zvishandiso zvave kuvakwa neCSS zvinosiyana uye rgba()mavara emhando, zvichikutendera iwe kuti ugadzirise zviri nyore chero zvishandiso nezvitsva zve opacity utilities.
Yakawedzera snippet mienzaniso mitsva yakavakirwa kuratidza maitiro ekugadziridza zvikamu zvedu. - Dhonza wakagadzirira kushandisa zvakagadziridzwa zvikamu uye mamwe akajairwa dhizaini mapatani nemienzaniso yedu mitsva yeSnippets . Inosanganisira ma footer , dropdowns , list groups , uye modal .
Yakabviswa masitaera asina kushandiswa kubva kumapopovers uye matipi ezvishandiso sezvo aya achibatwa chete naPopper. $tooltip-marginyakadzimwa uye yakaiswa nullmukuita.

Unoda rumwe ruzivo here? Verenga iyo v5.1.0 blog post.

Hei ikoko! Shanduko kune yedu yekutanga kuburitswa kukuru kweBootstrap 5, v5.0.0, yakanyorwa pazasi. Havaratidzi dzimwe shanduko dzaratidzwa pamusoro.

Dependencies

Yakadonha jQuery.
Yakakwidziridzwa kubva kuPopper v1.x kuenda kuPopper v2.x.
Yakatsiviwa Libsass neDart Sass seyedu Sass compiler yakapihwa Libsass yakabviswa.
Takatama kubva kuJekyll kuenda kuHugo kuti tivake zvinyorwa zvedu

Browser rutsigiro

Yakadonhedza Internet Explorer 10 uye 11
Yakadonhedza Microsoft Edge <16 (Legacy Edge)
Yakadonha Firefox <60
Yakadonhedza Safari <12
Yakadonhedza iOS Safari <12
Yakadonhedza Chrome <60

Zvinyorwa zvinoshanduka

Yakagadziridzwa patsva peji remba, docs marongero, uye tsoka.
Yakawedzera Parcel gwara idzva .
Yakawedzera chikamu chitsva cheGadzirisa , ichitsiva v4's Theming peji , neruzivo rutsva paSass, sarudzo dzepasirese dzekugadzirisa, zvirongwa zvemavara, CSS zvinosiyana, nezvimwe.
Akarongazve zvinyorwa zvese zvemafomu kuita chikamu chitsva cheMafomu , achipatsanura zvirimo kuita mapeji akanyanya kutariswa.
Saizvozvo, yakagadziridza iyo Layout chikamu , kuti ibudise grid zvirimo zvakajeka.
Yakatumidzwazve "Navs" chikamu peji ku "Navs & Tabs".
Yakapihwa zita rekuti "Cheki" peji kuti "Macheki & maredhiyo".
Yakagadziridzazve bhara uye nekuwedzera subnav itsva kuti zvive nyore kutenderera nesaiti yedu uye zvinyorwa zvinyorwa.
Yakawedzera nzira yekudimbudzira yekhibhodi yenzvimbo yekutsvaga: Ctrl + /.

Sass

Takasiya mepu yeSass yakabatana kuti zvive nyore kubvisa hunhu husina basa. Ramba uchifunga iwe zvino unofanirwa kutsanangura kukosha kwese mumamepu eSass senge $theme-colors. Tarisa uone maitiro ekuita neSass mepu .
KupwanyaYakatumidzwa zita color-yiq()uye zvine hukama zvinosiyana color-contrast()sezvo zvisisane hukama neYIQ nzvimbo yemavara. Ona #30168.
- $yiq-contrasted-thresholdinotumidzwa zita rokuti $min-contrast-ratio.
- $yiq-text-darkuye $yiq-text-lightvanopihwa zita rekuti $color-contrast-darkuye $color-contrast-light.
KupwanyaMedia query mixins parameters zvachinja kune imwe nzira inonzwisisika.
- media-breakpoint-down()inoshandisa iyo breakpoint pachayo pachinzvimbo cheinotevera breakpoint (semuenzaniso, media-breakpoint-down(lg)pachinzvimbo media-breakpoint-down(md)chetariro yekuona madiki pane lg).
- Saizvozvo, yechipiri paramende mukati media-breakpoint-between()inoshandisawo breakpoint pachayo pachinzvimbo cheinotevera breakpoint (semuenzaniso, media-between(sm, lg)pachinzvimbo media-breakpoint-between(sm, md)chezvinangwa zvekutarisa pakati smne lg).
KupwanyaYakabviswa zvitaera zvekudhinda uye $enable-print-styleszvakasiyana. Dhinda makirasi ekuratidzira achiripo. Ona #28339 .
KupwanyaYakadonhedzwa color(), theme-color(), uye gray()inoshanda mukufarira zvinosiyana. Ona #29083 .
KupwanyaRenamed theme-color-level()basa kune color-level()uye ikozvino rinogamuchira chero ruvara rwaunoda pachinzvimbo $theme-colorchemavara chete. Ona #29083 Chenjerera: color-level() yakazodonhedzwa gare gare v5.0.0-alpha3.
KupwanyaYakapihwa zita $enable-prefers-reduced-motion-media-queryuye $enable-pointer-cursor-for-buttonsku $enable-reduced-motionuye $enable-button-pointersnekupfupika.
KupwanyaYakabviswa bg-gradient-variant()mixin. Shandisa .bg-gradientkirasi kuwedzera gradients kune zvinhu panzvimbo .bg-gradient-*yemakirasi akagadzirwa.
Kupwanya Yakabviswa yakasanganiswa yakamborambwa:
- hover,,, uye hover-focus_plain-hover-focushover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(yakadonhedzawo kirasi yakabatana yekushandisa, .text-hide)
- visibility()
- form-control-focus()
KupwanyaYakatumidzwa zita rekuti scale-color()kudzivirira shift-color()kudhumhana neSass's own color scaling function.
box-shadowmixins ikozvino inobvumira nullkukosha uye kudonha nonekubva kune dzakawanda nharo. Ona #30394 .
Iyo border-radius()mixin ikozvino ine default kukosha.

Rudzi system

Iyo color system iyo yakashanda nayo color-level()uye $theme-color-intervalyakabviswa ichifarira imwe color system. Zvese lighten()uye darken()mabasa mucodebase yedu anotsiviwa tint-color()ne shade-color(). Aya mabasa achasanganisa ruvara nechero chena kana dema pane kushandura kureruka kwaro nehuwandu hwakatarwa. Iyo shift-color()inopenya kana mumvuri weruvara zvichienderana nekuti huremu hwayo paramende yakanaka here kana yakaipa. Ona #30622 kuti uwane rumwe ruzivo.
Yakawedzera matinji matsva uye mimvuri yeruvara rwese, ichipa mapfumbamwe akaparadzana mavara ega ega ega color, seatsva Sass akasiyana.
Kuvandudzwa kwemavara akasiyana. Bumped color difference ratio kubva pa3:1 kusvika 4.5:1 uye yakagadziridzwa bhuruu, girinhi, cyan, uye pink mavara kuona WCAG 2.1 AA musiyano. Yakashandurawo ruvara rweruvara rwedu kubva $gray-900ku $black.
Kuti titsigire hurongwa hweruvara rwedu, tawedzera tsika itsva tint-color()uye shade-color()mabasa kusanganisa mavara edu nenzira kwayo.

Grid updates

New breakpoint! Yakawedzera xxlbreakpoint nyowani 1400pxyekukwira nekukwira. Hapana shanduko kune mamwe mabreakpoints ese.
Gutters dzakavandudzwa. Gutters ikozvino yakaiswa murems, uye idiki pane v4 ( 1.5rem, kana nezve 24px, pasi kubva 30px). Izvi zvinowiriranisa magita edu egridi system nemaitiro edu ekuisa nzvimbo.
- Yakawedzera kirasi itsva yeguta ( .g-*, .gx-*, uye .gy-*) kudzora magita akachinjika/akatwasuka, magita akachinjika, uye magita akatwasuka.
- KupwanyaYakapihwa zita .no-gutterskuti .g-0ienderane nezvitsva zvegutter.
Makolamu haachashandisi position: relative, saka unogona kuwedzera .position-relativekune zvimwe zvinhu kudzoreredza maitiro iwayo.
KupwanyaAkasiya makirasi akati wandei .order-*aiwanzoenda asina kushandiswa. Isu zvino tinongopa .order-1kunze .order-5kwebhokisi.
KupwanyaYakadonhedza .mediachikamu nekuti chinogona kudzokororwa zviri nyore nezvishandiso. Ona #28265 uye peji rezvishandiso semuenzaniso .
Kupwanya bootstrap-grid.cssikozvino inongoshanda box-sizing: border-boxkune iyo column pachinzvimbo chekugadzirisa bhokisi-saizi yepasi rose. Nenzira iyi, yedu grid masitaera anogona kushandiswa munzvimbo dzakawanda pasina kukanganisa.
$enable-grid-classeshaichadzimi kugadzirwa kwemakirasi emidziyo zvakare. Ona #29146.
Yakagadziridza mixin make-colkuti ive yakasarudzika kusvika kumakoramu akaenzana pasina saizi yakatarwa.

Zvemukati, Reboot, nezvimwe

RFS ikozvino inogoneswa nekusarudzika. Misoro inoshandisafont-size()mixin inongogadzirisa yavofont-sizekuti iwedzere nekutarisa. Iyi ficha yaimbopinda nev4.
KupwanyaYakagadziridza typography yedu yekuratidzira kuti itsive $display-*madhiri uye $display-font-sizesnemepu yeSass. Akabvisawo zvimiro zvega zvega zvega $display-*-weightuye $display-font-weightzvakagadziriswa font-sizes.
Yakawedzera saizi mbiri nyowani .display-*dzemusoro, .display-5uye .display-6.
Manongedzo anotsikirirwa nekusarudzika (kwete chete pane hover), kunze kwekunge ari chikamu chezvakananga zvikamu.
Akagadziridzwazve matafura kuti avandudze masitayera avo uye nekuvavaka patsva neCSS mavhezheni kuti awedzere kutonga pamusoro pemaitiro.
KupwanyaNested tables haachagari nhaka yezvitaera zvakare.
Kupwanya .thead-lightuye .thead-darkanodonhedzwa achifarira .table-*makirasi akasiyana anogona kushandiswa kune ese matafura zvinhu ( ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, thead) tbody) ) ) _tfoottrthtd
KupwanyaIyo table-row-variant()mixin inotumidzwa zita table-variant()uye inogamuchira chete 2 paramita: $color(zita reruvara) uye $value(ruvara kodhi). Rudzi rwemuganhu uye accent mavara anoverengerwa otomatiki zvichienderana netafura factor variables.
Split table cell padding variables kupinda -yuye -x.
Kupwanya.pre-scrollableKirasi yakadonha . Ona #29135
Kupwanya .text-*zvishandiso hazviwedzere hover uye inotarisisa nyika kune zvinongedzo zvakare. .link-*makirasi emubatsiri anogona kushandiswa panzvimbo. Ona #29267
Kupwanya.text-justifyKirasi yakadonha . Ona #29793
Kupwanya <hr>zvinhu zvino shandisa heightpachinzvimbo borderchekutsigira zvirinani sizehunhu. Izvi zvakare zvinogonesa kushandiswa kwezvishandiso zvepadhi kuti zvigadzire zvakakora zvigovani (semuenzaniso, <hr class="py-1">).
Reset default horizontal padding-lefton <ul>uye <ol>zvinhu kubva kubrowser default 40pxkusvika 2rem.
Yakawedzerwa $enable-smooth-scroll, iyo inoshanda scroll-behavior: smoothpasi rose-kunze kwevashandisi vanokumbira kuderedzwa kufamba kuburikidza prefers-reduced-motionnemubvunzo wenhau. Ona #31877

RTL

Horizontal direction chakanangana nekusiyana, zvishandiso, uye musanganiswa zvese zvakapihwa zita kuti zvishandise zvine musoro zvivakwa sezvinowanikwa muflexbox marongero-semuenzaniso, startuye endpachinzvimbo che leftuye right.

Mafomu

Akawedzera mafomu matsva anoyangarara! Isu takasimudzira iwo Floating labels muenzaniso kune anonyatso tsigira fomu zvikamu. Wona peji remavara anoyangarara.
Kupwanya Consolidated native uye tsika chimiro zvinhu. Mabhokisi ekutarisa, maredhiyo, anosarudza, uye mamwe mapindiro anga aine makirasi echinyakare uye etsika muv4 akabatanidzwa. Iye zvino zvinenge zvese zvemafomu edu zvakazara tsika, mazhinji pasina kudiwa kwetsika HTML.
- .custom-control.custom-checkboxikozvino .form-check.
- .custom-control.custom-custom-radioikozvino .form-check.
- .custom-control.custom-switchikozvino .form-check.form-switch.
- .custom-selectikozvino .form-select.
- .custom-fileuye .form-fileakatsiviwa nemaitiro echivanhu pamusoro pe .form-control.
- .custom-rangeikozvino .form-range.
- Akadonhedza chizvarwa .form-control-fileuye .form-control-range.
KupwanyaYakadonha .input-group-appenduye .input-group-prepend. Iwe zvino unogona kungowedzera mabhatani uye .input-group-textsevana vakananga vemapoka ekuisa.
Iyo yakareba Yakashaikwa yemubhodha radius paboka rekuisa nerutsigiro rwemhinduro tsikidzi inozogadziriswa nekuwedzera imwe .has-validationkirasi kumapoka ekuisa ane vimbiso.
Kupwanya Yakadonhedza fomu-chaiyo dhizaini makirasi kune yedu grid system. Shandisa grid uye zvishandiso pane .form-group, .form-row, kana .form-inline.
KupwanyaMazita efomu zvino anoda .form-label.
Kupwanya .form-textno longer sets display, zvichikubvumidza kuti ugadzire inline kana kuvharira mameseji ekubatsira sezvaunoda nekungochinja chinhu cheHTML.
Mafomu ekudzora haachashandiswi akagadziriswa heightpazvinogoneka, pachinzvimbo chekuverengera min-heightkuvandudza kugadzirisa uye kuenderana nezvimwe zvikamu.
Validation icons haichashandiswi kune <select>s ine multiple.
Rearranged source Sass mafaera ari pasi pe scss/forms/, kusanganisira zvitaera zveboka rekupinda.

Zvikamu

Hunhu hwakabatana hwekuzivisa, zvimedu zvechingwa, makadhi, kudonhedza, rondedzero mapoka, modals, popovers padding, uye matipi ezvishandiso zvinoenderana $spacernekusiyana kwedu. Ona #30564 .

Accordion

Yakawedzera chikamu chitsva cheaccordion .

Alerts

Yambiro ikozvino ine mienzaniso ine zvidhori .
Yakabviswa masitaira echivanhu e <hr>s mune yambiro yega yega sezvo vachitoshandisa currentColor.

Mabheji

KupwanyaYakadonhedza ese .badge-*makirasi emavara ezvishandiso zvemashure (semuenzaniso, shandisa .bg-primarypachinzvimbo che .badge-primary).
KupwanyaYakadonhedzwa .badge-pill- shandisa .rounded-pillzvinoshandiswa panzvimbo.
KupwanyaYakabviswa hover uye yekutarisa masitaera <a>uye <button>zvinhu.
Yakawedzera default padding yemabheji kubva .25em/ .5emkuenda .35em/ .65em.

Zvimedu zvechingwa

Yakarerutsa kutaridzika kwechingwa chechingwa nekubvisa padding, background-color, uye border-radius.
Yakawedzera itsva CSS tsika chivakwa --bs-breadcrumb-dividerkuti zvive nyore kugadzirisa pasina kuda kudzoreredza CSS.

Mabhatani

Kupwanya Shandura mabhatani , ane mabhokisi ekutarisa kana maredhiyo, haachadi JavaScript uye ave nemarkup itsva. Isu hatichada chekuputira chinhu, wedzera.btn-checkkune iyo<input>, uye batanidza nechero.btnmakirasi pa<label>. Ona #30650 . Zvinyorwa zveizvi zvatama kubva peji redu reMabhatani kuenda kuchikamu chitsva cheMafomu.
Kupwanya Yakadonhedzwa .btn-blockkuitira zvishandiso. Panzvimbo pekushandisa .btn-blockpane iyo .btn, peta mabhatani ako .d-gridnekushandisa .gap-*kuaisa panzvimbo sezvinodiwa. Chinja kumakirasi anopindura kuti uwedzere kutonga pamusoro pawo. Verenga zvinyorwa zvemimwe mienzaniso.
Yakagadziridzwa yedu button-variant()uye button-outline-variant()musanganiswa kutsigira mamwe ma paramita.
Akagadziridzwa mabhatani kuti ave nechokwadi chekuwedzera kusiyanisa pane hover uye inoshanda nyika.
Mabhatani akaremara ava ne pointer-events: none;.

Card

KupwanyaYakadonha .card-deckmukufarira grid yedu. Putira makadhi ako mumakirasi ekoramu uye wedzera mudziyo wemubereki .row-cols-*kuti udzore makadhi emakadhi (asi nekutonga kwakawanda pamusoro pekuenderana kunoteerera).
KupwanyaAkadonha .card-columnsachifarira Masonry. Ona #28922 .
KupwanyaYakatsiva iyo .cardyakavakirwa accordion nechinhu chitsva cheAccordion .

Carousel

Yakawedzera .carousel-darkmusiyano mutsva wemavara akasviba, zvinodzora, uye zviratidzi (yakanaka kune yakareruka kumashure).
Yakatsiviwa chevron icons ye carousel control ine maSVG matsva kubva kuBootstrap Icons .

Vhara bhatani

KupwanyaYakapihwa .closezita .btn-closerezita risingaite.
Vhara mabhatani ikozvino shandisa background-image(yakamisikidzwa SVG) pachinzvimbo ×cheiyo muHTML, ichibvumira kuti zvive nyore kugadzirisa pasina chikonzero chekubata markup yako.
Yakawedzera .btn-close-whitemutsauko mutsva unoshandisa filter: invert(1)kugonesa misiyano yepamusoro yekudzinga ma icons kubva kune yakasviba kumashure.

Collapse

Yakabviswa scroll anchoring yema accordions.

Dropdowns

Yakawedzera .dropdown-menu-darkmutsauko mutsva uye anosanganisirwa akasiyana epa-inoda rima kudonhedza.
Yakawedzerwa shanduko itsva ye $dropdown-padding-x.
Yakasvibira chinodonhedza chinodonhedza kuitira kusiyana kwakavandudzwa.
KupwanyaZvese zviitiko zvekudonhedza zvave kukonzereswa pane yekudonhedza toggle bhatani uyezve bhatani kumusoro kune chinhu chemubereki.
Mamenu ekudonhedza zvino ane data-bs-popper="static"hunhu hwakaiswa kana nzvimbo yekudonha yakamira, kana kudonha kuri mubhara. Izvi zvinowedzerwa neJavaScript yedu uye zvinotibatsira kushandisa masitaera echinyakare tisingakanganise nzvimbo yaPopper.
KupwanyaYakadonhedza flipsarudzo yekudonhedza plugin mukufarira yemuno Popper kumisikidzwa. Iwe zvino unogona kudzima maitiro ekubhururuka nekupfuura isina chinhu array yesarudzo muflip fallbackPlacements modifier .
Mamenu ekudonhedza zvino anogona kubatika autoClosenesarudzo nyowani yekubata maitiro ekuvhara otomatiki . Unogona kushandisa iyi sarudzo kugamuchira kudzvanya mukati kana kunze kwemenu yekudonha kuti iite kudyidzana.
Dropdowns ikozvino inotsigira .dropdown-itemyakaputirwa <li>mus.

Jumbotron

KupwanyaYakadonhedza chikamu chejumbotron sezvo ichikwanisa kudzokororwa nezvishandiso. Ona yedu itsva Jumbotron muenzaniso wedemo.

Rondedzera boka

Yakawedzera gadziriso nyowani .list-group-numberedkumapoka mapoka.

Navs uye tabs

Akawedzera mavara matsva nulle font-size, font-weight, color, uye :hover colorkukirasi .nav-link.

Navbars

KupwanyaNavbars ikozvino inoda mudziyo mukati (kurerutsa zvakanyanya kudiwa kwenzvimbo uye CSS inodiwa).
KupwanyaKirasi .activehaichagoni kushandiswa kune .nav-items, inofanira kushandiswa zvakananga pa .nav-links.

Offcanvas

Yakawedzera chinhu chitsva cheoffcanvas .

Pagination

Pagination links ikozvino ine customizable margin-leftiyo inotenderedzwa zvine simba pamakona ese kana yakaparadzaniswa kubva kune imwe.
Yakawedzerwa transitions kune pagination link.

Popover

KupwanyaYakatumidzwa zita .arrowmune .popover-arrowyedu default popover template.
Yakapihwa zita whiteListsarudzo ku allowList.

Spinners

Spinners zvino vanokudza prefers-reduced-motion: reducenekudzikisira animations. Ona #31882 .
Yakavandudzwa spinner vertical alignment.

Toasts

Toasts ikozvino inogona kuiswa mu a .toast-containernerubatsiro rwekuisa zvishandiswa .
Yakachinja nguva yetoast yagara iripo kuita masekonzi mashanu.
Yakabviswa overflow: hiddenkubva kune toast uye yakatsiviwa neyakakodzera border-radiuss ine calc()mabasa.

Tooltips

KupwanyaYakapihwa zita .arrowmune .tooltip-arrowyedu default tooltip template.
KupwanyaIko kukosha kwakasarudzika kweiyo inochinjirwa fallbackPlacementskune ['top', 'right', 'bottom', 'left']yekuiswa zvirinani kwezvinhu zvepopper.
KupwanyaYakapihwa zita whiteListsarudzo ku allowList.

Utilities

KupwanyaAkatumidza zita rekushandisa zvakati wandei kuti ushandise zvine musoro mazita ezvivakwa panzvimbo yemazita ekutungamira nekuwedzera kweRTL rutsigiro:
- Renamed .left-*uye .right-*ku .start-*uye .end-*.
- Renamed .float-leftuye .float-rightku .float-startuye .float-end.
- Renamed .border-leftuye .border-rightku .border-startuye .border-end.
- Renamed .rounded-leftuye .rounded-rightku .rounded-startuye .rounded-end.
- Renamed .ml-*uye .mr-*ku .ms-*uye .me-*.
- Renamed .pl-*uye .pr-*ku .ps-*uye .pe-*.
- Renamed .text-leftuye .text-rightku .text-startuye .text-end.
KupwanyaYakaremara miganho isina kunaka nekukasira.
Yakawedzera .bg-bodykirasi nyowani yekukurumidza kuseta iyo <body>kumashure kune zvimwe zvinhu.
Yakawedzera zvinzvimbo zvitsva zve top, right, bottom, uye left. Mitemo inosanganisira 0, 50%, uye 100%yechinhu chimwe nechimwe.
Yakawedzera zvitsva .translate-middle-x& .translate-middle-yzvinoshandiswa kune yakachinjika kana yakatwasuka pakati pemhedziso / yakamisikidzwa yakamisikidzwa zvinhu.
Yakawedzera border-widthzvishandiso zvitsva .
KupwanyaYakapihwa zita .text-monospacerekuti .font-monospace.
KupwanyaYakabviswa .text-hidesezvo iri nzira yechinyakare yekuviga zvinyorwa zvisingachafanirwe kushandiswa zvakare.
Yakawedzerwa .fs-*zvishandiso font-sizezvezvishandiso (ine RFS inogoneswa). Aya anoshandisa chikero chakafanana neHTML's default headings (1-6, hombe kusvika kudiki), uye inogona kugadziridzwa kuburikidza neSass mepu.
KupwanyaYakapihwa zita .font-weight-*rekushandisa .fw-*sekupfupika uye kuenderana.
KupwanyaYakapihwa zita .font-style-*rekushandisa .fst-*sekupfupika uye kuenderana.
Yakawedzerwa .d-gridkuratidza zvishandiso uye zvitsva gapzvinoshandiswa ( .gap) zveCSS Grid uye flexbox marongero.
KupwanyaYakabviswa .rounded-smuye rounded-lg, uye yakaunza chiyero chitsva chekirasi, .rounded-0ku .rounded-3. Ona #31687 .
Yakawedzera line-heightzvishandiso zvitsva: .lh-1, .lh-sm, .lh-baseuye .lh-lg. Ona pano .
Yakafambisa iyo .d-noneyekushandisa muCSS yedu kuti iwedzere huremu pamusoro pezvimwe zviratidziro zvekushandisa.
Akawedzera .visually-hidden-focusablemubatsiri kuti ashandewo pamidziyo, achishandisa :focus-within.

Vabatsiri

Kupwanya Vanoteerera embed vabatsiri vakatumidzwa zita rekuti vabatsiri vane mazita ekirasi matsva uye maitiro akavandudzwa, pamwe chete nerubatsiro rweCSS kusiyanisa.
- Makirasi akatumidzwa zita kuti achinje bykune xchikamu chechikamu. Somuenzaniso, .ratio-16by9zvino .ratio-16x9.
- Tadonhedza iyo .embed-responsive-itemuye element group yekusarudzi tichida imwe iri nyore .ratio > *yekusarudza. Hapasisina kirasi inodiwa, uye reshiyo mubatsiri ikozvino inoshanda nechero HTML chinhu.
- Mepu $embed-responsive-aspect-ratiosyeSass yakatumidzwa zita $aspect-ratiosuye hunhu hwayo hwakarerutswa kuti ubatanidze zita rekirasi uye muzana key: valuesevaviri.
- CSS zvinosiyana zvave kugadzirwa uye zvinosanganisirwa kune yega yega kukosha muSass mepu. Shandura --bs-aspect-ratioshanduko pairi .ratiokuti ugadzire chero chimiro chetsika .
Kupwanya "Screen reader" makirasi ave "akavanzika zvinoonekwa" makirasi .
- Yakachinja faira reSass kubva scss/helpers/_screenreaders.scsskuendascss/helpers/_visually-hidden.scss
- Yakatumidzwa .sr-onlyuye .sr-only-focusableku .visually-hiddenuye.visually-hidden-focusable
- Yakatumidzwa sr-only()uye sr-only-focusable()inosanganiswa ku visually-hidden()uye visually-hidden-focusable().
bootstrap-utilities.csszvino kusanganisirawo vabatsiri vedu. Vabatsiri havachadi kutengwa kunze kwenyika mune zvetsika zvinovaka zvakare.

JavaScript

Yakadonhedza jQuery kutsamira uye kunyorazve plugins kuti ive yenguva dzose JavaScript.
KupwanyaMamiriro e data kune ese maJavaScript plugins ave akaiswa mazita kuti abatsire kusiyanisa mashandiro eBootstrap kubva kumapato echitatu uye yako kodhi. Somuenzaniso, tinoshandisa data-bs-togglepane data-toggle.
Ese maplugins anogona ikozvino kugamuchira CSS selector senharo yekutanga. Unogona kupfuudza chinhu cheDOM kana chero cheCSS chakasarudzika kuti ugadzire chiitiko chitsva cheplugin:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfiginogona kupfuudzwa sebasa rinogamuchira iyo Bootstrap's default Popper config senharo, kuitira kuti iwe ugone kubatanidza iyi yekumisikidza yekumisikidza munzira yako. Inoshanda kune kudonhedza, popovers, uye matipi ekushandisa.
Iko kukosha kwakasarudzika kweiyo inochinjirwa fallbackPlacementskune ['top', 'right', 'bottom', 'left']yekuiswa nani kwePopper zvinhu. Inoshanda kune kudonhedza, popovers, uye matipi ekushandisa.
Yakabviswa underscore kubva kune yeruzhinji static nzira senge _getInstance()→ getInstance().