in English

Ʋuʋu yi v5 dzi

Kpɔ tɔtrɔ siwo wowɔ le Bootstrap ƒe dzɔtsoƒe faɛlwo, nuŋlɔɖiwo, kple akpawo ŋu eye nàlé ŋku ɖe wo ŋu be wòakpe ɖe ŋuwò nàʋu tso v4 ayi v5 me.

Le axa sia dzi

v5.2.0 ƒe ƒuƒoƒo

Aɖaŋu si wowɔ yeyee

Bootstrap v5.2.0 ɖea aɖaŋu yeye si menya kpɔna dzea sii bɔbɔe o fiana na akpa ʋɛ aɖewo kple nɔnɔmewo le dɔa katã me, vevietɔ to asixɔxɔ siwo ŋu wotrɔ asi border-radiusle le abɔtawo kple nɔnɔmetata dzi kpɔkpɔwo dzi . Wowɔ asitɔtrɔ le míaƒe nuŋlɔɖiwo hã ŋu kple aƒeme axa yeye, nuŋlɔɖiwo ƒe ɖoɖo si le bɔbɔe wu si megagbãa axadzinuŋɔŋlɔ ƒe akpa aɖewo o, kple Bootstrap Icons ƒe kpɔɖeŋu siwo ɖe dzesi wu .

CSS ƒe tɔtrɔ geɖe wu

Míewɔ míaƒe akpawo katã yeyee be woazã CSS ƒe tɔtrɔwo. Togbɔ be Sass gakpɔtɔ le nusianu te hã la, wowɔ akpa ɖesiaɖe yeyee be woatsɔ CSS tɔtrɔwo ade akpa ƒe gɔmeɖoanyi ƒe hatsotsowo me (le kpɔɖeŋu me, .btn), si ɖe mɔ na Bootstrap ƒe ɣeyiɣi ŋutɔŋutɔ ƒe tɔtrɔ geɖe wu. Le tata siwo akplɔe ɖo me la, míayi edzi akeke míaƒe CSS ƒe tɔtrɔwo zazã ɖe enu ɖe míaƒe ɖoɖo, agbalẽviwo, kpeɖeŋutɔwo, kple dɔwɔnuwo me. Xlẽ nu geɖe tso CSS ƒe tɔtrɔwo ŋu le akpa ɖesiaɖe me le woƒe nuŋlɔɖi ƒe axawo dzi.

Míaƒe CSS tɔtrɔ zazã made blibo vie vaseɖe esime Bootstrap 6. Togbɔ be míadi vevie be míawɔ esiawo ŋudɔ bliboe le ʋuƒoa katã me hã la, wole afɔku me be woahe tɔtrɔ siwo agbã la vɛ. Le kpɔɖeŋu me, ɖoɖowɔwɔ le míaƒe source code me gblẽa Sass si ate ŋu anɔ wò ŋutɔ wò code me nenye be susu aɖe tae $alert-border-width: var(--bs-border-width)nènɔ ewɔm .$alert-border-width * 2

Abe alesi wòle ene la, afisiafi si wòanya wɔ le la, míayi edzi anɔ tutum ɖe CSS ƒe tɔtrɔ geɖe ŋu, gake taflatse de dzesii be míaƒe dɔwɔwɔ ateŋu anye seɖoƒe vie le v5 me.

Yɛye`_maps.scss`

Bootstrap v5.2.0 to Sass faɛl yeye aɖe vɛ kple _maps.scss. Eɖea Sass ƒe anyigbatata geɖewo tso _variables.scsseme be yeaɖɔ nya aɖe si me womewɔ asitɔtrɔ le anyigbatata gbãtɔ ŋu le anyigbatata evelia siwo keke wo ɖe enu la ŋu o. Le kpɔɖeŋu me, womenɔ asitɔtrɔ siwo wowɔ na $theme-colorsla zãm ɖe tanya ƒe anyigbatata bubu siwo ɖo ŋu ɖe $theme-colors, si gblẽ dɔwɔwɔ ƒe ɖoɖo vevi siwo wowɔ ɖe ɖoɖo nu ŋu la ŋu o. Kpuie ko la, seɖoƒe aɖe le Sass si le afisi ne wonya zã tɔtrɔ alo anyigbatata si woɖo ɖi ko la , womate ŋu awɔ yeyee o. Gbɔdzɔgbɔdzɔ ma tɔgbe le CSS tɔtrɔwo ŋu ne wozã wo tsɔ ŋlɔ CSS tɔtrɔ bubuwo.

Esia tae wòle be tɔtrɔ ƒe tɔtrɔwo le Bootstrap me nava le megbe @import "functions", gake do ŋgɔ @import "variables"kple míaƒe import stack susɔea. Nenema ke wòle le Sass ƒe anyigbatatawo hã gome—ele be nàɖe asi le nusiwo woɖo ɖi ŋu hafi woazu numame na wo. Woɖe anyigbatata siwo gbɔna la yi yeyea dzi _maps.scss:

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

Ele be wò Bootstrap CSS xɔtuɖoɖo tɔxɛwo nadze nane abe esia ene azɔ kple anyigbatatawo ƒe tsɔtsɔ yi teƒe bubu.

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

Nu yeye siwo wozãna tsɔ wɔa dɔe

Wokeke font-weightutilities ɖe enu be woatsɔ ade eme .fw-semiboldna semibold ŋɔŋlɔdzesiwo.
Wokeke border-radiusdɔwɔnuwo ɖe enu be woatsɔ lolome yeye eve ade eme, .rounded-4kple .rounded-5, hena tiatia bubuwo.

Tɔtrɔ bubuwo kpee

Woto $enable-container-classestiatia yeye vɛ. — Azɔ ne ètiae ɖe dodokpɔ CSS Grid ƒe ɖoɖoa me la, .container-*woaƒo klasswo nu ƒu kokoko, negbe ɖe woɖo tiatia sia ɖe false. Fifia nugoewo hã léa woƒe tsiɖɔɖɔ ƒe asixɔxɔwo ɖe te fifia.
Offcanvas component fifia le ŋuɖoɖo ƒe vovototowo . Klass gbãtɔa .offcanvasmetrɔna o—eɣlaa nyatakakawo ɖe nukpɔkpɔwo katã me. Be wòawɔ dɔ nyuie la, trɔ klass ma .offcanvaswòazu klass ɖesiaɖe .offcanvas-{sm|md|lg|xl|xxl}.
Fifia kplɔ̃dzimama siwo le kpekpem wu la tiae. — Míeɖe liƒo si le kplɔ̃wo ƒe ƒuƒoƒowo dome si le kpekpem wu eye wòsesẽ wu be woaɖe asi le eŋu la ɖa eye míeʋui yi klass si nàte ŋu awɔ le wo ɖokui si me, .table-group-divider. Kpɔ kplɔ̃a dzi nuŋlɔɖiwo hena kpɔɖeŋu aɖe.
Wogbugbɔ ŋlɔ Scrollspy be wòazã Intersection Observer API , si fia be mègahiã dzila ƒe ƒomedodo ƒe agbalẽ xatsaxatsawo o, deprecatesoffsetconfig, kple bubuwo. Di wò Scrollspy dɔwɔwɔwo be woade pɛpɛpɛ wu eye woawɔ ɖeka le woƒe nav ƒe dzesidede me.
Popovers kple dɔwɔnu ƒe aɖaŋuɖoɖowo zãa CSS ƒe tɔtrɔwo fifia. Wotrɔ asi le CSS ƒe tɔtrɔ aɖewo ŋu tso woƒe Sass hatiwo gbɔ be woaɖe tɔtrɔwo ƒe xexlẽme dzi akpɔtɔ. Esia wɔe be woɖe asi le tɔtrɔ etɔ̃ ŋu le tata sia me: $popover-arrow-color, $popover-arrow-outer-color, kple $tooltip-arrow-color.
Wotsɔ kpeɖeŋutɔ yeyewo kpe ɖe .text-bg-{color}eŋu. Le esi teƒe be nàɖo ame ɖekaɖekawo .text-*kple .bg-*dɔwɔnuwo la, àte ŋu azã kpeɖeŋutɔawo azɔ atsɔ aɖo ŋgɔgbe.text-bg-*background-color si to vovo color.
Wotsɔ .form-check-reversemodifier kpe ɖe eŋu be wòatrɔ ɖoɖo si nu woŋlɔ ŋkɔwo ɖo kple dzesiɖaka/radio siwo do ƒome kplii.
Wotsɔ sɔti siwo le fli me kpe ɖe kplɔ̃wo ŋu to .table-striped-columnsklass yeyea dzi.

Ne èdi tɔtrɔwo ƒe xexlẽdzesi bliboa la, kpɔ v5.2.0 dɔa le GitHub .

v5.1.0 ƒe ƒuƒoƒo

Wotsɔ dodokpɔ ƒe kpekpeɖeŋu kpe ɖe CSS Grid ƒe ɖoɖo ŋu . — Esia nye dɔ si le edzi yim, eye mesu te na ewɔwɔ zazã haɖe o, gake àte ŋu atiae be yeage ɖe akpa yeyea me to Sass dzi. Be wòawɔ dɔ la, wɔ grid si woɖo ɖi la nuwɔametɔe, to ɖoɖowɔwɔ me $enable-grid-classes: falseeye nàna CSS Grid la nawɔ dɔ to ɖoɖowɔwɔ me $enable-cssgrid: true.
Wotrɔ asi le navbarwo ŋu be woado alɔ offcanvas. — Tsɔ offcanvas drawers kpe ɖe navbar ɖesiaɖe me kple ŋuɖoɖo .navbar-expand-*ƒe klasswo kple offcanvas markup aɖewo.
Wotsɔ teƒeɖoɖo ƒe akpa yeye kpe ɖe eŋu . — Míaƒe akpa yeyetɔ kekeake, si nye mɔ si dzi nàto ana ɣeyiɣi kpui aɖe ƒe mɔxexe ɖe nyatakaka ŋutɔŋutɔwo teƒe be wòakpe ɖe ŋuwò nàɖee afia be nane gakpɔtɔ le ʋuʋum le wò nyatakakadzraɖoƒea alo dɔwɔnua me.
Collapse plugin doa alɔ horizontal collapsing fifia . — Tsɔ kpe .collapse-horizontalɖe wò .collapseŋu be nàgbã la widthɖe height. Ƒo asa na browser gbugbɔgatata to ɖoɖowɔwɔ ɖe a min-heightalo height.
Wotsɔ stack yeye kple vertical se kpeɖeŋutɔwo kpe ɖe eŋu. — Wɔ flexbox ƒe nɔnɔme geɖewo ŋudɔ kaba be nàwɔ ɖoɖo tɔxɛwo kabakaba kple stacks . Tia tso ƒuƒoƒo siwo le tsia dzi ( .hstack) kple esiwo le tsia dzi ( .vstack) dome. Tsɔ mamãnu siwo le tsitrenu siwo sɔ kple elementwo <hr>kpe ɖe kpeɖeŋutɔ yeyeawo.vr ŋu .
:rootWotsɔ xexeame katã ƒe CSS ƒe tɔtrɔ yeyewo kpe ɖe eŋu . — Wotsɔ CSS ƒe tɔtrɔ yeye geɖewo kpe ɖe :rootdzidzenua ŋu hena <body>atsyãwo dzi ɖuɖu. Nu geɖe wu le dɔwo me, siwo dometɔ aɖewoe nye míaƒe dɔwɔnuwo kple akpawo katã, gake fifia ya xlẽ CSS ƒe tɔtrɔwo le akpa si nye Trɔ Asi Le Eŋu me .
Wotrɔ asi le amadede kple megbenyawo ƒe dɔwɔnuwo ŋu be woazã CSS ƒe tɔtrɔwo, eye wotsɔ nuŋɔŋlɔ ƒe opacity kple megbenyawo ƒe keklẽŋusẽ ƒe dɔwɔnu yeyewo kpe ɖe eŋu. — .text-* eye .bg-*wotu dɔwɔnuwo fifia kple CSS tɔtrɔwo kple rgba()amadede ƒe asixɔxɔwo, si na be nàte ŋu atrɔ asi le dɔwɔnu ɖesiaɖe ŋu bɔbɔe kple opacity dɔwɔnu yeyewo.
Wotsɔ snippet ƒe kpɔɖeŋu yeye siwo wotu ɖe edzi be woatsɔ afia alesi míatrɔ asi le míaƒe akpawo ŋui la kpe ɖe eŋu. — He klalo be yeazã akpa siwo wowɔ ɖe ɖoɖo nu kple aɖaŋuwɔwɔ ƒe kpɔɖeŋu bubu siwo bɔ kple míaƒe Snippets ƒe kpɔɖeŋu yeyeawo . Afɔdzideƒewo , nusiwo le fli dzi , xexlẽdzesiwo ƒe ƒuƒoƒowo , kple modals le eme .
Woɖe teƒeɖoɖo ƒe atsyã siwo womezã o ɖa le popovers kple dɔwɔnu ƒe aɖaŋuɖoɖowo me elabena Popper ɖeɖekoe kpɔa esiawo gbɔ. $tooltip-marginwoɖe asi le eŋu eye woɖoe ɖe nulledzi le ɖoɖoa me.

Àdi nyatakaka bubuwoa? Xlẽ v5.1.0 ƒe blog me nyatakakaa.

Hey afima! Woŋlɔ tɔtrɔ siwo wowɔ le míaƒe Bootstrap 5 ƒe tata gã gbãtɔ, v5.0.0, ŋu ɖe ete. Womeɖea tɔtrɔ bubu siwo woɖe fia le etame la fiana o.

Nusiwo dzi woanɔ te ɖo

Woɖe asi le jQuery ŋu.
Wodoe ɖe ŋgɔ tso Popper v1.x dzi va ɖo Popper v2.x dzi.
Woɖɔli Libsass kple Dart Sass abe míaƒe Sass nuƒoƒoƒula si wona Libsass la megale dɔ wɔm o ene.
Woʋu tso Jekyll yi Hugo le míaƒe nuŋlɔɖiwo tutu ta

Browser ƒe kpekpeɖeŋu

Woɖe asi le Internet Explorer 10 kple 11 ŋu
Woɖe Microsoft Edge < 16 (Domenyinu ƒe Nugbɔ) .
Woɖe Firefox < 60 ɖa
Woɖe asi le Safari ŋu < 12
Woɖe asi le iOS Safari ŋu < 12
Chrome si wotsɔ ƒu gbe < 60

Nuŋlɔɖiwo trɔna

Wogbugbɔ trɔ asi le aƒeme axa, docs ƒe ɖoɖo, kple afɔti ŋu.
Wotsɔ Parcel ƒe mɔfiame yeye kpe ɖe eŋu .
Wotsɔ akpa yeye si nye Trɔ Asi Le Eŋu kpe ɖe eŋu , tsɔ nyatakaka yeyewo ɖɔ li v4 ƒe Tanya ƒe axa , kple nyatakaka yeyewo tso Sass ŋu, xexeame katã ƒe ɖoɖowɔɖi ƒe tiatiawɔblɔɖe, amadede ƒe ɖoɖowo, CSS ƒe tɔtrɔwo, kple bubuwo.
Wogbugbɔ ɖo agbalẽviawo katã ƒe nuŋlɔɖiwo ɖe ɖoɖo nu ɖe Agbalẽviawo ƒe akpa yeye me , eye woma emenyawo ɖe axa siwo ŋu woƒe susu nɔ wu me.
Nenema ke, wowɔ yeyee le akpa si nye Layout , be woaɖe grid me nyawo afia nyuie wu.
Wotrɔ ŋkɔ na “Navs” ƒe akpa aɖe ƒe axa wòzu “Navs & Tabs”.
Wotrɔ ŋkɔ na axa si nye “Checks” wòzu “Checks & radios”.
Wogbugbɔ trɔ asi le navbar la ŋu eye míetsɔ subnav yeye kpee be wòanɔ bɔbɔe be míate ŋu atsa le míaƒe nyatakakadzraɖoƒewo kple docs ƒe tɔtrɔwo me.
Wotsɔ keyboard ƒe mɔ kpui yeye kpe ɖe eŋu na didiƒea: Ctrl + /.

Sass ƒe nyawo

Míeɖe asi le Sass ƒe anyigbatata ƒe ƒoƒo ɖekae siwo woɖo ɖi la ŋu be wòanɔ bɔbɔe be woaɖe asixɔxɔ siwo mehiã o ɖa. Nenɔ susu me na wò azɔ ele be nàɖe asixɔxɔwo katã gɔme le Sass ƒe anyigbatatawo me abe $theme-colors. Kpɔ alesi nàwɔ nu ɖe Sass ƒe anyigbatatawo ŋui ɖa .
GbegblẽWotrɔ ŋkɔ na color-yiq()dɔwɔwɔ kple tɔtrɔ siwo do ƒome kplii be color-contrast()abe alesi megado ƒome kple YIQ amadede ƒe teƒe o ene. Kpɔ #30168.
- $yiq-contrasted-thresholdwotrɔ ŋkɔ nɛ be $min-contrast-ratio.
- $yiq-text-darkeye $yiq-text-lightwotrɔ ŋkɔ na wo ɖe wo nɔewo yome be $color-contrast-darkkple $color-contrast-light.
GbegblẽMedia biabia mixins parameters trɔ hena mɔnu si me susu le wu.
- media-breakpoint-down()zãa gbagbãƒe ŋutɔ ɖe gbagbãƒe si kplɔe ɖo teƒe (le kpɔɖeŋu me, media-breakpoint-down(lg)ɖe media-breakpoint-down(md)taɖodzinuwo ƒe nukpɔkpɔ siwo le sue wu teƒe lg).
- Nenema ke, parameter evelia le media-breakpoint-between()hã zãa breakpoint ŋutɔ ɖe breakpoint si kplɔe ɖo teƒe (le kpɔɖeŋu me, media-between(sm, lg)ɖe media-breakpoint-between(sm, md)taɖodzinuwo ƒe nukpɔkpɔwo teƒe le smkple lg).
GbegblẽWoɖe agbalẽtata ƒe atsyãwo kple $enable-print-stylestɔtrɔwo ɖa. Agbalẽtata ɖeɖefia ƒe klasswo gakpɔtɔ li. Kpɔ #28339 .
GbegblẽWoɖe asi color()le , theme-color(), kple gray()dɔwɔwɔwo ŋu le tɔtrɔwo ƒe nyonyo ta. Kpɔ #29083 .
GbegblẽWotrɔ ŋkɔ na theme-color-level()dɔwɔwɔ ɖe color-level()amadede ɖesiaɖe si nèdi ŋu eye fifia wòxɔ ɖe amadedewo ɖeɖeko teƒe $theme-color. Kpɔ #29083 Kpɔ nyuie: color-level() wotsɔe va emegbe v5.0.0-alpha3.
GbegblẽWotrɔ ŋkɔ $enable-prefers-reduced-motion-media-querynɛ eye wotsɔe $enable-pointer-cursor-for-buttonsna $enable-reduced-motionkple be $enable-button-pointerswòagblɔe kpuie.
GbegblẽWoɖe bg-gradient-variant()mixin la ɖa. Zã .bg-gradientklass la nàtsɔ akpe ɖe gradients ŋu ɖe elements ŋu ɖe .bg-gradient-*klass siwo wowɔ la teƒe.
Gbegblẽ Woɖe mixin siwo womegazãna tsã o ɖa:
- hover, hover-focus, plain-hover-focus, kplehover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(woɖe asi le dɔwɔnu ƒe hatsotso si do ƒome kplii hã ŋu, .text-hide)
- visibility()
- form-control-focus()
GbegblẽWotrɔ ŋkɔ na scale-color()dɔwɔwɔ be shift-color()be woaƒo asa na gododo kple Sass ŋutɔ ƒe amadede dzidzedze ƒe dɔwɔwɔ.
box-shadowmixins azɔ ɖe mɔ na nullasixɔxɔwo eye woɖiɖi nonetso nyaʋiʋli geɖewo me. Kpɔ #30394 .
Fifia border-radius()ƒe asixɔxɔ le mixin la ŋu.

Amadede ƒe ɖoɖo

Amadede ƒe ɖoɖo si wɔ dɔ kple color-level()eye $theme-color-intervalwoɖee ɖa tsɔ do alɔ amadede ƒe ɖoɖo yeye aɖe. Wotsɔ kple ɖɔli wo katã lighten()kple dɔwɔwɔ siwo le míaƒe codebase me . Dɔwɔwɔ siawo atsaka amadedea kple ɣi alo yibɔ tsɔ wu be woatrɔ eƒe bɔbɔenyenye agbɔsɔsɔme aɖe si woɖo ɖi. The awɔ amadede alo vɔvɔli le amadede aɖe me le ne eƒe kpekpeme parameter nye nyui alo vɔ̃. Kpɔ #30622 hena numeɖeɖe bubuwo.darken()tint-color()shade-color()shift-color()
Wotsɔ amadede yeyewo kple vɔvɔliwo kpe ɖe amadede ɖesiaɖe ŋu, si na amadede vovovo enyi na gɔmeɖoanyi amadede ɖesiaɖe, abe Sass ƒe tɔtrɔ yeyewo ene.
Amadede ƒe vovototo si nyo ɖe edzi. Bumped amadede ƒe vovototo ƒe xexlẽme tso 3:1 va ɖo 4.5:1 kple yeye blɔ, amadede, cyan, kple pink amadedewo be woakpɔ egbɔ be WCAG 2.1 AA vovototo. Azɔ hã trɔ míaƒe amadede ƒe vovototo ƒe amadede $gray-900tso $black.
Be míado alɔ míaƒe amadede ƒe ɖoɖoa la, míetsɔ dekɔnu tint-color()kple shade-color()dɔwɔwɔ yeyewo kpe ɖe eŋu be míatsaka míaƒe amadedewo nyuie.

Grid ƒe yeyewo

Gbeɖeka yeyee! xxlWotsɔ breakpoint yeye kpee na 1400pxkple dzi. Tɔtrɔ aɖeke mele gbagbãƒe bubuawo katã ŋu o.
Tɔdzisasrã siwo wowɔ wònyo wu. Fifia woɖo gutters ɖe rems me, eye wole kpuie wu v4 ( 1.5rem, alo abe 24px, yi anyime tso 30px). Esia na míaƒe grid system ƒe gutters sɔ kple míaƒe dometsotso utilities.
- Wotsɔ tsidzɔƒe ƒe hatsotso yeye ( .g-*, .gx-*, kple .gy-*) kpe ɖe eŋu be woatsɔ akpɔ tsiɖɔɖɔɖɔɖɔƒe siwo le tsia dzi/siwo le tsitrenu, tsiɖɔɖɔɖɔɖɔƒe siwo le tsia dzi, kple tsiɖɔɖɔɖɔɖɔƒe siwo le tsitrenu dzi.
- GbegblẽWotrɔ ŋkɔ .no-guttersnɛ .g-0be wòasɔ kple gutter utilities yeyewo.
Sɔtiwo megawɔa position: relativedɔ o, eyata ɖewohĩ ahiã be nàtsɔ .position-relativenu aɖewo akpe ɖe eŋu be nàgbugbɔ nuwɔna ma aɖo anyi.
GbegblẽWoɖe asi le .order-*klass geɖe siwo womezãna zi geɖe o la ŋu. Fifia koe míenaa .order-1nu .order-5tso aɖaka la me.
GbegblẽWoɖe asi le .mediaakpaa ŋu abe alesi woate ŋu agbugbɔe awɔ bɔbɔe kple utilities ene. Kpɔ #28265 kple flex utilities ƒe axa hena kpɔɖeŋu .
Gbegblẽ bootstrap-grid.cssfifia ɖeko wòku box-sizing: border-boxɖe kɔlam la ŋu tsɔ wu be wòagbugbɔ aɖo xexeame katã ƒe aɖaka ƒe lolome. To mɔ sia dzi la, woate ŋu azã míaƒe grid ƒe atsyãwo le teƒe geɖe wu kplamatsedonu aɖeke manɔmee.
$enable-grid-classesmegawɔa nuteƒe na nugoe ƒe hatsotsowo ƒe dzidzime o. Kpɔ #29146.
Wotrɔ asi le make-colmixin la ŋu be wòanye kɔlam siwo sɔ kple wo nɔewo ƒe lolome si womeɖo o.

Emenyawo, Reboot, kple bubuawo

RFS le dɔ wɔm fifia le gɔmedzedzea me. Tanya siwo zãafont-size()mixin la atrɔ asi le wo ɖokui ŋufont-sizebe woadzidze kple nukpɔkpɔ ƒe ʋɔtrua. Nɔnɔme sia nye opt-in kple v4 tsã.
GbegblẽWotrɔ asi le míaƒe ɖeɖefia ƒe nuŋɔŋlɔ ŋu be woatsɔ aɖɔli míaƒe $display-*tɔtrɔwo eye woatsɔ $display-font-sizesSass ƒe anyigbatata aɖo eteƒe. Azɔ hã woɖe tɔtrɔ ɖekaɖekawo ɖa na s $display-*-weightɖeka $display-font-weighteye wotrɔ asi le eŋu.font-size
.display-*Wotsɔ tanya ƒe lolome yeye eve kpe ɖe eŋu , .display-5eye .display-6.
Wote fli ɖe kadodowo te le gɔmedzedzea me (menye le hover dzi ɖeɖeko o), negbe ɖe wonye akpa aɖewo koŋ ƒe akpa aɖe ko hafi.
Wogbugbɔ trɔ asi le kplɔ̃wo ŋu be woagbugbɔ woƒe atsyãwo awɔ yeyee eye woagbugbɔ wo atu kple CSS tɔtrɔwo hena ŋusẽ geɖe wu ɖe atsyãwo dzi.
GbegblẽNested tables meganyia atsyãwo dome o.
Gbegblẽ .thead-lighteye .thead-darkwoɖea wo ɖa le .table-*vovototo ƒe hatsotso siwo woate ŋu azã na kplɔ̃dzinuawo katã ( thead, tbody, tfoot, tr, thkple td) la ta.
GbegblẽWotrɔ table-row-variant()ŋkɔ na mixin la be table-variant()eye wòxɔa nɔnɔme 2 ko: $color(amadede ŋkɔ) kple $value(amadede ƒe nuŋɔŋlɔ). Wobua liƒo ƒe amadede kple gbeɖiɖi ƒe amadedewo le wo ɖokui si ɖe kplɔ̃a ƒe akpa ƒe tɔtrɔwo dzi.
Ma table cell padding ƒe tɔtrɔwo ɖe -ykple -x.
GbegblẽWoɖe asi .pre-scrollablele klass ŋu. Kpɔ #29135
Gbegblẽ .text-*utilities megatsɔa hover kple focus nɔnɔmewo kpena ɖe kadodowo ŋu o. .link-*woate ŋu azã kpeɖeŋutɔ ƒe klasswo boŋ. Kpɔ #29267
GbegblẽWoɖe asi .text-justifyle klass ŋu. Kpɔ #29793
Gbegblẽ <hr>elements zãna fifia tsɔ heightwu borderbe woatsɔ ado alɔ sizenɔnɔmea nyuie wu. Esia hã wɔnɛ be woate ŋu azã padding utilities atsɔ awɔ mama siwo le kpekpem wu (le kpɔɖeŋu me, <hr class="py-1">).
Trɔ asi le default horizontal padding-lefton <ul>kple <ol>elements tso browser default dzi 40pxva ɖo 2rem.
Added $enable-smooth-scroll, si sɔ scroll-behavior: smoothle xexeame katã—negbe ezãla siwo bia be woaɖe ʋuʋu dzi akpɔtɔ to prefers-reduced-motionnyadzɔdzɔgblɔmɔnuwo ƒe nyabiasewo me ko. Kpɔ #31877

RTL

Wotrɔ ŋkɔ na Horizontal direction specific variables, utilities, kple mixins katã be woazã logical properties abe esiwo wokpɔ le flexbox layouts me ene—le kpɔɖeŋu me, startkple ɖe kple endteƒe .leftright

Kpekpeɖeŋugbalẽviwo

Wotsɔ agbalẽvi yeye siwo le tsia dzi kpee! Míedo Floating labels ƒe kpɔɖeŋu ɖe ŋgɔ na form components siwo wodo alɔ bliboe. Kpɔ Floating labels ƒe axa yeyea.
Gbegblẽ Woƒo ƒu native kple custom form elements. Woƒo dzesiɖakawo, radiowo, tiatiawo, kple nya bubu siwo wotsɔ de eme siwo me native kple custom classes nɔ le v4 me la nu ƒu ɖekae. Fifia míaƒe nuŋlɔɖi ƒe akpawo katã kloe nye esiwo wowɔ ɖe ɖoɖo nu keŋkeŋ, akpa gãtɔ mehiã HTML si wowɔ ɖe ɖoɖo nu o.
- .custom-control.custom-checkboxnye fifia .form-check.
- .custom-control.custom-custom-radionye fifia .form-check.
- .custom-control.custom-switchnye fifia .form-check.form-switch.
- .custom-selectnye fifia .form-select.
- .custom-fileeye .form-filewotsɔ atsyã siwo wowɔ ɖe ɖoɖo nu ɖɔ li wo ɖe .form-control.
- .custom-rangenye fifia .form-range.
- Woɖe asi le dukɔa me tɔ .form-control-filekple .form-control-range.
GbegblẽWodae .input-group-appendɖe anyi eye .input-group-prepend. Fifia àteŋu atsɔ abɔtawo akpe ɖe eŋu ko eye .input-group-textabe nyawo tsɔtsɔ de eme ƒe ƒuƒoƒoawo ƒe viwo tẽ ene.
Woɖɔ liƒo ƒe didime si bu ɣeyiɣi didi aɖe le nyawo tsɔtsɔ de eme ƒe ƒuƒoƒo si me kpeɖodzinya ƒe nyaŋuɖoɖo ƒe vodada le la ɖo mlɔeba to .has-validationklass bubu tsɔtsɔ kpe ɖe nyawo tsɔtsɔ de eme ƒe ƒuƒoƒo siwo ŋu kpeɖodzi le ŋu me.
Gbegblẽ Woɖe asi le nɔnɔmetata-koŋ ƒe ɖoɖo ƒe klasswo ŋu na míaƒe grid ɖoɖoa. Zã míaƒe grid kple utilities ɖe .form-group, .form-row, alo teƒe .form-inline.
GbegblẽFifia la, agbalẽviwo ƒe dzesidewo bia be .form-label.
Gbegblẽ .form-textno longer sets display, si ana nàte ŋu awɔ kpekpeɖeŋu nuŋɔŋlɔ le fli me alo axe mɔ ɖe enu abe alesi nèdi ene to HTML ƒe akpaa tɔtrɔ ko me.
Womegazãa agbalẽvi dzi kpɔkpɔwo le ɖoɖo nu heightne anya wɔ o, ke boŋ woɖea megbe be min-heightwoana asitɔtrɔ kple akpa bubuwo ƒe wɔwɔme nanyo ɖe edzi.
Womegazãa kpeɖodzidzesiwo ɖe <select>s kple multiple.
Wogbugbɔ ɖo dzɔtsoƒe Sass faɛlwo ɖe scss/forms/, si me nyawo tsɔtsɔ de ƒuƒoƒo ƒe atsyãwo hã le.

Nusiwo le eme

Asixɔxɔ paddingɖeka na nuxlɔ̃amewo, abolomegbawo, kaɖiwo, nusiwo wotsɔna ƒua gbe, xexlẽdzesiwo ƒe ƒuƒoƒowo, modals, popovers, kple dɔwɔnu ƒe aɖaŋuɖoɖowo be woanɔ te ɖe míaƒe $spacertɔtrɔ dzi. Kpɔ #30564 .

Accordion ƒe ƒuƒoƒo

Wotsɔ accordion ƒe akpa yeye aɖe kpe ɖe eŋu .

Nuxlɔ̃amewo

Kpɔɖeŋu siwo me dzesiwo le le nuxlɔ̃amewo ŋu fifia .
Woɖe atsyã tɔxɛwo ɖa na <hr>s le nuxlɔ̃ame ɖesiaɖe me elabena wozãa currentColor.

Akɔtagbalẽviwo

GbegblẽWoɖe asi le .badge-*amadede ƒe hatsotsowo katã ŋu na megbenyawo ƒe dɔwɔnuwo (le kpɔɖeŋu me, zã .bg-primaryɖe .badge-primary).
GbegblẽWoɖe asi le eŋu —zã .badge-pilldɔwɔnua .rounded-pillboŋ.
GbegblẽWoɖe hover kple focus atsyãwo ɖa na <a>kple <button>elements.
Wodzi akɔtagbalẽviwo ƒe padding gbãtɔ ɖe edzi tso .25em/ .5emva ɖo .35em/ .65em.

Abolomegbawo

Ewɔ abolomegbawo ƒe dzedzeme si woɖo ɖi la bɔbɔe to padding, background-color, kple border-radius.
Wotsɔ CSS ƒe nɔnɔme yeye kpe ɖe eŋu --bs-breadcrumb-dividerhena tɔtrɔwɔwɔ bɔbɔe evɔ mahiã be woagbugbɔ aƒo CSS nu ƒu o.

Abɔtawo ƒe ƒuƒoƒo

Gbegblẽ Toggle buttons , siwo me dzesiɖakawo alo radiowo le, megahiã JavaScript o eye dzesi yeye le wo ŋu. Míegahiã na agbalẽxatsaxatsa ƒe akpa aɖe o, tsɔe kpe.btn-checkɖe<input>, eye míetsɔe kpe ɖe.btnklass ɖesiaɖe si le<label>. Kpɔ #30650 . Esia ƒe nuŋlɔɖiwo ʋu tso míaƒe Buttons ƒe axaa dzi yi Forms ƒe akpa yeyea dzi.
Gbegblẽ Woɖe .btn-blockasi le eŋu na utilities. Le esi teƒe be nàzãe .btn-blockɖe .btn, xatsa wò abɔtawo kple dɔwɔnu .d-gridaɖe .gap-*si ana dometsotso nanɔ wo dome ne ehiã. Trɔ ɖe klass siwo ɖoa nya ŋu gbɔ be nàkpɔ ŋusẽ ɖe wo dzi geɖe wu gɔ̃ hã. Xlẽ docs la hena kpɔɖeŋu aɖewo.
Wotrɔ asi le míaƒe button-variant()kple button-outline-variant()mixins ŋu be woado alɔ parameter bubuwo.
Wotrɔ asi le abɔtawo ŋu be woakpɔ egbɔ be vovototo geɖe wu le hover kple nɔnɔme siwo le dɔ wɔm dzi.
Fifia la, pointer-events: none;.

Kpekpeɖeŋugbalẽvi

GbegblẽWoɖe .card-deckasi le míaƒe grid la ŋu. Kpe wò kaɖiwo ɖe sɔtiwo ƒe klasswo me eye nàtsɔ dzila .row-cols-*ƒe nugoe akpe ɖe eŋu be nàgbugbɔ awɔ kaɖiwo ƒe akpawo (gake nàkpɔ ŋusẽ geɖe wu ɖe ɖoɖowɔwɔ ɖe ɖoɖo nu ŋu).
GbegblẽWoɖe .card-columnsasi le eŋu tsɔ da asi ɖe Masonry dzi. Kpɔ #28922 .
GbegblẽWotsɔ Accordion ƒe akpa yeye.card aɖe ɖɔ li accordion si wotu ɖe edzi la .

Carousel ƒe ƒuƒoƒo

.carousel-darkWotsɔ tɔtrɔ yeye kpe ɖe nuŋɔŋlɔ viviti, dziɖuɖuwo, kple dzesiwo ŋu (enyo ŋutɔ na megbenya siwo me kɔ wu).
Woɖɔli chevron nɔnɔmetatawo na carousel dziɖuɖuwo kple SVG yeyewo tso Bootstrap Nɔnɔmetatawo .

Klo nu ƒe dzesi

GbegblẽWotrɔ ŋkɔ na ŋkɔ .closesi .btn-closemebɔ o.
Fifia la, wotu abɔtiwo zãa background-image(SVG si wotsɔ de eme) ɖe a teƒe ×le HTML la me, si wɔnɛ be woate ŋu atrɔ asi le eŋu bɔbɔe wu evɔ mahiã be nàka asi wò dzesidenu ŋu o.
Wotsɔ .btn-close-whitetɔtrɔ yeye si zãna filter: invert(1)be wòana vovototo si lolo wu ƒe dismiss dzesiwo nawɔ dɔ ɖe megbe vivitiwo dzi kpe ɖe eŋu.

Dze anyi

Woɖe agbalẽxatsaxatsa ƒe seke ɖa na accordion.

Nusiwo wotsɔna ƒua gbe

Wotsɔ tɔtrɔ yeye .dropdown-menu-darkkple tɔtrɔ siwo do ƒome kplii kpe ɖe eŋu na viviti ƒe fli siwo le didi nu.
Wotsɔ tɔtrɔ yeye kpe ɖe eŋu na $dropdown-padding-x.
Do viviti ɖe dropdown divider la me hena vovototo si nyo ɖe edzi.
GbegblẽWodzea nudzɔdzɔwo katã na ʋuʋudedi la gɔme azɔ le ʋuʋudedi ƒe tɔtrɔ ƒe abɔta dzi eye emegbe wotsɔa bubble yia dzila ƒe akpaa dzi.
Fifia data-bs-popper="static"nɔnɔme aɖe le dropdown menuwo si ne dropdown la ƒe nɔƒe le teƒe ɖeka, alo dropdown le navbar la me. Esia nye míaƒe JavaScript tsɔ kpe ɖe eŋu eye wòkpena ɖe mía ŋu míezãa teƒeɖoɖo ƒe atsyã siwo wowɔ ɖe ɖoɖo nu evɔ míedoa kplamatse Popper ƒe teƒeɖoɖo o.
GbegblẽWoɖe flipasi le tiatia ŋu na dropdown plugin si doa dzidzɔ na Popper ƒe ɖoɖowɔwɔ ŋutɔŋutɔ. Fifia àteŋu awɔ flipping nuwɔna la nuwɔametɔe to ƒuƒoƒo ƒuƒlu aɖe tsɔtsɔ yi na fallbackPlacementstiatia le flip modifier me.
Woateŋu azi nuɖuɖu siwo le tsia dzi la dzi azɔ kple autoClosetiatia yeye aɖe be woakpɔ auto close nuwɔna la gbɔ . Àte ŋu azã tiatia sia atsɔ alɔ̃ ɖe asiƒoƒo ɖe nu siwo le fli dzi la me alo egodo dzi be wòawɔ dɔ ɖe ame dzi.
Dropdowns fifia doa alɔ .dropdown-items si woxatsa ɖe <li>s me.

Jumbotron ƒe ƒuƒoƒo

GbegblẽWoɖe asi le jumbotron ƒe akpaa ŋu abe alesi woate ŋu agbugbɔe awɔ kple utilities ene. Kpɔ míaƒe Jumbotron ƒe kpɔɖeŋu yeyea hena wɔwɔfia.

Ŋlɔ ƒuƒoƒoa ɖi

.list-group-numberedWotsɔ tɔtrɔ yeye kpe ɖe ƒuƒoƒowo ƒe xexlẽdzesiwo ŋu.

Navs kple tabs

nullWotsɔ tɔtrɔ yeyewo kpe ɖe font-size, font-weight, color, kple klass la ŋu :hover color..nav-link

Navbarwo ƒe ƒuƒoƒo

GbegblẽNavbars hiã nugoe le eme azɔ (be woana dometsotso ƒe nudidiwo kple CSS hiã nanɔ bɔbɔe ŋutɔ).
GbegblẽWomateŋu .activeawɔ klass la ŋudɔ ɖe .nav-items dzi o, ele be woawɔe ɖe .nav-links dzi tẽ.

Offcanvas ƒe akpa aɖe

Wotsɔ akpa yeye si nye offcanvas kpe ɖe eŋu .

Axawo dzi nɔnɔ

Fifia woate ŋu atrɔ asi le axadzinɔnɔ ƒe kadodowo ŋu siwo woate ŋu atrɔ asi margin-leftle wo ŋu le dzogoewo katã dzi ne woɖe wo ɖa tso wo nɔewo gbɔ.
Wotsɔ transitions kpe ɖe axawo ƒe kadodowo ŋu.

Popovers ƒe amewo

GbegblẽWotrɔ ŋkɔ .arrowna .popover-arrowle míaƒe popover template gbãtɔ me.
Wotrɔ ŋkɔ na whiteListtiatia be allowList.

Spinners ƒe ƒuƒoƒo

Fifia, amesiwo tsɔa nu ƒoa nui la dea bubu eŋu prefers-reduced-motion: reduceto nɔnɔmetata siwo me woɖea nɔnɔmetatawo le dzi ɖeɖe kpɔtɔ me. Kpɔ #31882 .
Spinner ƒe tsitrenu ƒe ɖoɖo si nyo ɖe edzi.

Toast siwo wotsɔna ɖaa nu

Woate ŋu aɖo toastwo ɖe teƒe aɖe azɔ to nuzazãwo ɖoɖo.toast-container ɖe teƒewo ƒe kpekpeɖeŋu me .
Wotrɔ toast ƒe ɣeyiɣi didime si woɖo ɖi la wòzu sɛkɛnd 5.
Woɖee ɖa overflow: hiddenle toasts me eye wotsɔa border-radiuss si sɔ kple calc()dɔwɔwɔwo ɖɔliae.

Dɔwɔnu ƒe Aɖaŋuɖoɖowo

GbegblẽWotrɔ ŋkɔ .arrowna .tooltip-arrowle míaƒe dɔwɔnu ƒe aɖaŋuɖoɖo ƒe nɔnɔmetata gbãtɔ me.
GbegblẽWotrɔ asi le asixɔxɔ si woɖo ɖi na la fallbackPlacementsŋu wòzu ['top', 'right', 'bottom', 'left']hena popper ƒe akpawo ƒe ɖoɖo nyuie wu.
GbegblẽWotrɔ ŋkɔ na whiteListtiatia be allowList.

Dɔwɔnu Siwo Wozãna

GbegblẽWotrɔ ŋkɔ na dɔwɔnu geɖewo be woazã nunɔamesi ŋkɔ siwo me susu le ɖe mɔfiame ŋkɔwo teƒe kple RTL ƒe kpekpeɖeŋu tsɔtsɔ kpee:
- Wotrɔ ŋkɔ .left-*nɛ eye .right-*wòzu .start-*kple .end-*.
- Wotrɔ ŋkɔ .float-leftnɛ eye .float-rightwòzu .float-startkple .float-end.
- Wotrɔ ŋkɔ .border-leftnɛ eye .border-rightwòzu .border-startkple .border-end.
- Wotrɔ ŋkɔ .rounded-leftnɛ eye .rounded-rightwòzu .rounded-startkple .rounded-end.
- Wotrɔ ŋkɔ .ml-*nɛ eye .mr-*wòzu .ms-*kple .me-*.
- Wotrɔ ŋkɔ .pl-*nɛ eye .pr-*wòzu .ps-*kple .pe-*.
- Wotrɔ ŋkɔ .text-leftnɛ eye .text-rightwòzu .text-startkple .text-end.
GbegblẽWowɔa margins manyomanyowo ŋudɔ le gɔmedzedzea me.
.bg-bodyWotsɔ klass yeye kpee hena <body>'s megbenyawo ɖoɖo kabakaba ɖe nu bubuwo ŋu.
Wotsɔ ɖoƒe ƒe dɔwɔnu yeyewo kpe ɖe eŋu na top, right, bottom, kple left. Asixɔxɔwo dometɔ aɖewoe nye 0, 50%, kple 100%na nunɔamesi ɖesiaɖe.
Wotsɔ yeye .translate-middle-x& .translate-middle-yutilities kpe ɖe horizontally alo vertically titina absolute / fixed positioned elements.
border-widthWotsɔ dɔwɔnu yeyewo kpe ɖe eŋu .
GbegblẽWotrɔ ŋkɔ .text-monospacenɛ be .font-monospace.
GbegblẽWoɖee ɖa .text-hideelabena enye mɔnu xoxo aɖe si dzi woato aɣla nuŋɔŋlɔ siwo mele be woagazã o.
Wotsɔ .fs-*dɔwɔnuwo kpe ɖe eŋu na font-sizedɔwɔnuwo (kple RFS le dɔ wɔm). Esiawo zãa dzidzenu si sɔ kple HTML ƒe tanya gbãtɔwo (1-6, gã va ɖo sue), eye woateŋu atrɔ asi le wo ŋu to Sass ƒe anyigbatata dzi.
GbegblẽWotrɔ ŋkɔ na .font-weight-*utilities abe alesi .fw-*wòle kpuie kple alesi wowɔa nu ɖekae ene.
GbegblẽWotrɔ ŋkɔ na .font-style-*utilities abe alesi .fst-*wòle kpuie kple alesi wowɔa nu ɖekae ene.
Wotsɔe kpe ɖe eŋu .d-gridbe woaɖe dɔwɔnuwo kple dɔwɔnu yeyewo afia gap( .gap) na CSS Grid kple flexbox ƒe ɖoɖowo.
GbegblẽWoɖe .rounded-smkple rounded-lg, eye woto klass ƒe dzidzenu yeye aɖe vɛ, .rounded-0be .rounded-3. Kpɔ #31687 .
line-heightWotsɔ dɔwɔnu yeyewo kpe ɖe eŋu : .lh-1, .lh-sm, .lh-basekple .lh-lg. Kpɔ afisia .
Ʋu .d-nonedɔwɔnu si le míaƒe CSS me be wòana wòalolo wu ɖeɖefia dɔwɔnu bubuwo.
Wokeke .visually-hidden-focusablekpeɖeŋutɔa ɖe enu be wòawɔ dɔ le nugoewo hã ŋu, eye wòzã :focus-within.

Kpekpeɖeŋunalawo

Gbegblẽ Wotrɔ ŋkɔ na embed kpeɖeŋutɔ siwo ɖoa nya ŋu be woazu ratio kpeɖeŋutɔ siwo si klass ŋkɔ yeyewo kple nuwɔna siwo nyo wu le, kpakple CSS tɔtrɔ si kpena ɖe ame ŋu.
- Wotrɔ ŋkɔ na klasswo be woatrɔ byɖe xle aspect ratio me. Le kpɔɖeŋu me, .ratio-16by9nye fifia .ratio-16x9.
- Míeɖe asi le .embed-responsive-itemkple element ƒuƒoƒo tiatiawɔnu ŋu tsɔ do ŋgɔ na .ratio > *tiatiawɔnu bɔbɔetɔ. Klass bubu aɖeke megahiã o, eye ratio kpeɖeŋutɔa wɔa dɔ kple HTML element ɖesiaɖe fifia.
- Wotrɔ $embed-responsive-aspect-ratiosŋkɔ na Sass ƒe anyigbatata $aspect-ratioseye wowɔ eƒe asixɔxɔwo bɔbɔe be woatsɔ klass ƒe ŋkɔ kple alafa memamã ade eme abe key: valueeve ene.
- Wowɔ CSS ƒe tɔtrɔwo azɔ eye wotsɔ wo de asixɔxɔ ɖesiaɖe ŋu le Sass ƒe anyigbatata me. Trɔ asi le --bs-aspect-ratiotɔtrɔ si le la dzi .ratiobe nàwɔ akpa ɖesiaɖe si wowɔ ɖe ɖoɖo nu .
Gbegblẽ “Screen reader” ƒe klasswo nye klass siwo “woɣla ɖe nukpɔkpɔ me” fifia .
- Trɔ Sass ƒe faɛl la tso scss/helpers/_screenreaders.scssyi dziscss/helpers/_visually-hidden.scss
- Wotrɔ ŋkɔ .sr-onlynɛ eye .sr-only-focusablewòzu .visually-hiddenkple.visually-hidden-focusable
- Wotrɔ ŋkɔ na sr-only()wo eye wotsɔ sr-only-focusable()mixins va zu visually-hidden()kple visually-hidden-focusable().
bootstrap-utilities.cssfifia míaƒe kpeɖeŋutɔwo hã le eme. Megahiã be woatsɔ kpeɖeŋutɔwo ava xɔtuɖoɖo tɔxɛwo me o.

JavaScript

Woɖe asi le jQuery ŋuɖoɖo ɖe eŋu eye wogbugbɔ ŋlɔ plugins be woanɔ JavaScript si wozãna edziedzi me.
GbegblẽWoɖo ŋkɔwo ɖe JavaScript ƒe kpeɖeŋutɔwo katã ƒe nyatakakawo ƒe nɔnɔmewo ŋu fifia be wòakpe ɖe ŋuwò nàde vovototo Bootstrap ƒe dɔwɔwɔ dome tso ame bubuwo kple wò ŋutɔ wò kɔpi gbɔ. data-bs-toggleLe kpɔɖeŋu me , míezãa data-toggle.
Fifia plugins katã ateŋu axɔ CSS tiatia abe nyaʋiʋli gbãtɔ ene. Àteŋu atsɔ DOM ƒe akpa aɖe alo CSS tiatiawɔla ɖesiaɖe si sɔ la atsɔ awɔ kpeɖeŋutɔa ƒe kpɔɖeŋu yeye:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigateŋu ato eme abe dɔwɔwɔ si xɔa Bootstrap ƒe Popper ɖoɖowɔɖi gbãtɔ abe nyaʋiʋli ene, ale be nàteŋu aƒo ɖoɖo gbãtɔ sia nu ƒu ɖe wò mɔ dzi. Eku ɖe dropdowns, popovers, kple dɔwɔnu ƒe aɖaŋuɖoɖowo ŋu.
Wotrɔ asi le asixɔxɔ si woɖo ɖi na la fallbackPlacementsŋu be ['top', 'right', 'bottom', 'left']wòanye Popper ƒe akpawo ƒe ɖoɖo nyuie wu. Eku ɖe dropdowns, popovers, kple dɔwɔnu ƒe aɖaŋuɖoɖowo ŋu.
Woɖe nuŋɔŋlɔ si le ete la ɖa le dutoƒomɔnu siwo mewɔa tɔtrɔ o abe _getInstance()→ ene getInstance()me.