Trɔ yi nya veviwo gbɔ Trɔ yi docs navigation gbɔ
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

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 .

  • Breaking Wotrɔ ŋkɔ na color-yiq()dɔwɔwɔ kple tɔtrɔ siwo do ƒome kplii na 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.

  • Breaking Media biabia mixins parameters trɔ na 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).

  • Breaking Woɖe agbalẽtata ƒe atsyãwo kple $enable-print-stylestɔtrɔ ɖa. Agbalẽtata ɖeɖefia ƒe klasswo gakpɔtɔ li. Kpɔ #28339 .

  • Breaking Dropped color(), theme-color(), kple gray()dɔwɔwɔwo ɖe tɔtrɔwo ƒe nyonyo ta. Kpɔ #29083 .

  • Breaking Renamed theme-color-level()function to color-level()eye fifia xɔa amadede ɖesiaɖe si nèdi ɖe $theme-coloramadedewo ɖeɖeko teƒe. Kpɔ #29083 Kpɔ nyuie: color-level() wotsɔe va emegbe v5.0.0-alpha3.

  • Breaking Renamed $enable-prefers-reduced-motion-media-querykple $enable-pointer-cursor-for-buttonsto $enable-reduced-motionkple $enable-button-pointersna kpuie.

  • Breaking 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.

  • Breaking 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()

  • Breaking Renamed scale-color()function to 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.
    • Breaking Wotrɔ ŋkɔ .no-guttersna .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.

  • Breaking 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.

  • Breaking Woɖe asi le .mediaakpaa ŋu elabena woate ŋu agbugbɔe awɔ bɔbɔe kple utilities. Kpɔ #28265 kple flex utilities ƒe axa hena kpɔɖeŋu .

  • bootstrap-grid.cssFifia la, kɔlam la koe gblẽa nubox-sizing: border-box le eŋu tsɔ wu be nàgbugbɔ aɖo xexeame katã ƒe aɖaka ƒe lolome ɖe ɖoɖo nu. 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ã.

  • Breaking 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.

  • Breaking Nested kplɔ̃wo meganyi atsyãwo dome o.

  • Gbegblẽ .thead-light eye .thead-darkwoɖe asi le wo ŋu le .table-*vovototo ƒe hatsotso siwo woate ŋu azã na kplɔ̃dzinuawo katã ( thead, tbody, tfoot, tr, thkple td) ƒe nyonyo ta.

  • Breaking Wotrɔ table-row-variant()ŋkɔ na mixin la be table-variant()eye wòxɔa parameter 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.

  • Breaking Woɖe asi .pre-scrollablele klass la ŋu. Kpɔ #29135

  • Breaking .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

  • Breaking Woɖe asi .text-justifyle klass la ŋu. Kpɔ #29793

  • Breaking <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 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.

  • Breaking 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-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.

  • Breaking Dzudzɔ .input-group-appendeye .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.

  • Breaking 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.

  • Breaking Form labels fifia bia be .form-label.

  • Breaking .form-text no longer sets display, si na be nàte ŋu awɔ inline alo axe mɔ ɖe kpekpeɖeŋu nuŋɔŋlɔ nu 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

Nuxlɔ̃amewo

Akɔtagbalẽviwo

  • Breaking Woɖe asi le amadede ƒe hatsotsowo katã .badge-*ŋu na megbenyawo ƒe dɔwɔnuwo (le kpɔɖeŋu me, zã .bg-primaryɖe .badge-primary).

  • Breaking Dropped .badge-pill—zã dɔwɔnua .rounded-pillboŋ.

  • Breaking 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.

  • 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 kpee --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

  • Breaking Toggle buttons , kple dzesiɖakawo alo radiowo, 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.

  • Breaking 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

  • Breaking Dropped .card-deckle míaƒe grid ƒe nyonyo ta. 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).

  • Breaking Woɖe .card-columnsasi le eŋu le Masonry ƒe akpa dzi. Kpɔ #28922 .

  • Breaking Wotsɔ Accordion ƒe akpa yeye.card aɖe ɖɔ li accordion si wotu ɖe edzi la .

Klo nu ƒe dzesi

  • Breaking Wotrɔ ŋkɔ .closena ŋkɔ .btn-closesi mebɔ o.

  • Fifia la, wotu abɔtiwo zãa background-image(SVG si wotsɔ de eme) ɖe a teƒe &times;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.

  • 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ẽ Nudzɔdzɔwo katã na ʋuʋudedi la dzea egɔ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.

  • Breaking 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

Ŋlɔ ƒuƒoƒoa ɖi

  • nullWotsɔ tɔtrɔ yeyewo kpe ɖe font-size, font-weight, color, kple klass la ŋu :hover color..nav-link
  • Navbars gbagbã bia azɔ be woatsɔ nugoe aɖe aɖo eme (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

  • Breaking 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

  • Breaking Wotrɔ ŋkɔ .arrowna .tooltip-arrowle míaƒe dɔwɔnu ƒe aɖaŋuɖoɖo ƒe nɔnɔmetata gbãtɔ me.

  • Breaking 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.

  • Breaking Trɔ ŋkɔ na whiteListtiatia be allowList.

Dɔwɔnu Siwo Wozãna

  • Breaking 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.

  • Breaking Tsɔ negative margins wɔa dɔ 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 .

  • Breaking Wotrɔ ŋkɔ .text-monospacenɛ wòzu .font-monospace.

  • Breaking Woɖee ɖa .text-hideelabena enye mɔnu xoxo aɖe si wotsɔ ɣ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.

  • Breaking Wotrɔ ŋkɔ na .font-weight-*utilities abe alesi .fw-*wòle kpuie kple nuwɔwɔ ɖekae ene.

  • Breaking Wotrɔ ŋkɔ na .font-style-*utilities abe alesi .fst-*wòle kpuie kple nuwɔwɔ ɖ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.

  • Breaking 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

  • Wotrɔ ŋkɔ na Breaking Responsive embed helpers be ratio helpers kple klass ŋkɔ yeyewo kple nuwɔna siwo nyo wu, 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 .

  • “ Screen reader” ƒe klass siwo gblẽa nu le ame ŋu la zu klass siwo “ɣ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.

  • Breaking Data ƒe nɔnɔmewo na JavaScript ƒe kpeɖeŋutɔwo katã le ŋkɔwo dome fifia be wòakpe ɖe ŋuwò nàde vovototo Bootstrap ƒe dɔwɔwɔ dome tso ame etɔ̃lia 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ɔa ƒe kpɔɖeŋu yeye:

    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ƒomɔnu siwo mewɔa tɔtrɔ o abe _getInstance()→ ene getInstance()me.