Ʋuʋu yi v5 dzi

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 guide yeye kpe ɖe eŋu .
• Wotsɔ akpa yeye si nye Customize kpe ɖe eŋu , tsɔ nyatakaka yeyewo ɖɔ li v4 ƒe Theming page , 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 ƒe nuŋlɔɖiwo katã ɖ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 colorspace 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ɖo míaƒe $display-*tɔtrɔwo teƒe 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

• Trɔ asi le default horizontal padding-lefton <ul>kple <ol>elements tso browser default dzi 40pxva ɖo 2rem.

• Added $enable-smooth-scroll, si ku ɖe scroll-behavior: smoothxexeame katã ŋu—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 nyatakaka bubu siwo me native kple custom classwo 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-checknye fifia .form-check.
  • .custom-check.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 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 ɖe ɖoɖowɔwɔ ɖe ɖoɖo nu dzi).

• 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ɔ .closenɛ ɖe ŋkɔ .btn-closesi mebɔ o ta.

• 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ɔ siwo katã woawɔ 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 eye data-bs-popper="none"ne 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 alɔ native Popper ƒe ɖoɖowɔɖi. 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 doa alɔ .dropdown-items si woxatsa ɖe <li>s me azɔ.

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ɔ).

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 ɖ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ɔda 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ɔ ƒe kpɔɖeŋu yeye:

  Wɔ eƒe kɔpi

  var modal = new bootstrap.Modal('#myModal')
  var 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ƒo mɔnu siwo meʋãna o abe _getInstance()→ ene getInstance()me.