Migrating ka taa v5 la

v5.2.0 ye

Dilancogo kura

Bootstrap v5.2.0 bɛ dilancogo kurayali nɔgɔlen dɔ jira ka ɲɛsin bolomafaraw ni nafolomafɛnw ma porozɛ kɔnɔ, kɛrɛnkɛrɛnnenya la, nafa nɔgɔlenw border-radiusfɛ butɔni ni foroko kunkankow kan . An ka sɛbɛnw fana kurayara ni dakun kura ye, sɛbɛnniw labɛncogo nɔgɔman min tɛ kɛrɛfɛyɔrɔ yɔrɔw Dɔgɔya tugun, ani Bootstrap Icons misali ɲɛnamaw .

CSS fɛn caman bɛrɛbɛrɛw

An ye an ka yɔrɔw bɛɛ ladamu walasa ka baara kɛ ni CSS fɛn caman sɛgɛsɛgɛli ye. Hali ni Sass bɛ fɛn bɛɛ sinsin hali bi, yɔrɔ kelen-kelen bɛɛ ladamulen don walasa ka CSS fɛn caman sɛgɛsɛgɛli kɛ yɔrɔ basigilen kalasiw kan (misali la, .btn), o bɛ sira Di Bootstrap ka ladamuni caman ma waati yɛrɛ la. Bɔko nataw la, an bɛna t’a fɛ k’an ka CSS fɛn caman ɲɔgɔnna baara caya ka don an ka labɛncogo la, an ka sɛbɛnw kɔnɔ, an ka dɛmɛbagaw la, ani an ka nafalanw na. Aw ye kunnafoni wɛrɛw kalan CSS fɛn caman sɛgɛsɛgɛli kan yɔrɔ kelen-kelen bɛɛ kɔnɔ u ka sɛbɛnw ɲɛw kan.

An ka CSS fɛn caman ɲɔgɔnna baarakɛcogo bɛna dafa dɔɔnin fo Bootstrap 6. Hali n’an b’a fɛ ka ninnu waleya k’a dafa fɛn bɛɛ la, u bɛ farati la ka fɛn caman Changements breaks. Misali la, sigili $alert-border-width: var(--bs-border-width)an ka source code kɔnɔ bɛ Sass potentiel tiɲɛ i yɛrɛ ka code kɔnɔ n’i tun bɛ o kɛ $alert-border-width * 2kun dɔw la.

O cogo la, n’a bɛ Se ka Kɛ yɔrɔ o yɔrɔ, an bɛna t’a fɛ ka CSS fɛn caman sɛgɛsɛgɛli Kɛ, nka aw k’a Dɔn ko an ka waleyali bɛ Se ka dan dɔɔnin v5 la.

Kura_maps.scss

Bootstrap v5.2.0 ye Sass filen kura dɔ jira ni _maps.scss. A bɛ Sass karti damadɔ Bɔ ka Bɔ _variables.scsswalasa ka ko dɔ Labɛn yɔrɔ min na, fɛn kura minnu Kɛra karti fɔlɔ dɔ kan, olu ma Kɛ karti filananw kan minnu b’u Lasegin. Misali la, fɛn kuraw to $theme-colorstun tɛ ka baara kɛ ni barokun karti wɛrɛw ye minnu tun bɛ u jigi da $theme-colors, ka fɛn kolomaw ka baarakɛcogo ɲumanw tiɲɛ. Kuma surun na, Sass bɛ dan Kɛ yɔrɔ min na ni 'dafalen-falen-falen walima karti dɔ Kɛra , a tɛ Se ka 'kùnnafoni Sɔrɔ. O dɛsɛ kelen bɛ CSS fɛnɲɛnɛmaw la n’u bɛ Kɛ ka CSS fɛnɲɛnɛma wɛrɛw Dabɔ.

O de y’a To bεε bε bεn Bootstrap kɔnɔ ka kan ka Nà kɔfɛ @import "functions", nka ka Kɔn @import "variables"ani an ka import stack tɔ. O cogo kelen de bɛ kɛ Sass kartiw la—i ka kan ka defaults (dafalenw) tiɲɛ sani u ka dege. Nin karti ninnu jiginna ka taa kura la _maps.scss:

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

Aw ka Bootstrap CSS jɔli ladamulenw ka kan sisan ka kɛ nin cogo la ni kartiw doncogo danfaralen ye.

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

Nafamafɛnw kura

• font-weightNafa minnu bɛ bonya ka don sɛbɛnnibolow la minnu ye semibold .fw-semiboldye.
• Nafalanw bonyalen border-radiusdon walasa ka hakɛ kura fila don a kɔnɔ, .rounded-4ani .rounded-5, walasa ka sugandi caman sɔrɔ.

Yɛlɛma wɛrɛw kɛra

• $enable-container-classesA ye sugandi kura daminɛ . — Sisan ni i bɛ sugandi ka don CSS Grid labɛncogo kɔrɔbɔli la, .container-*kalanw bɛna lajɛ hali bi, fo ni nin sugandi in bilala false. Minɛnw fana bɛ u ka gutɛri nafaw mara sisan.

• Offcanvas component sisan a bɛ ni jaabi caman ɲɔgɔnna ye . Kalanso fɔlɔ .offcanvasbɛ to a cogo la—a bɛ kɔnɔkow dogo filɛlikɛyɔrɔw bɛɛ kɔnɔ. Walasa a ka se ka jaabi di, i ka o .offcanvaskalan caman Changer ka kɛ kalan suguya o suguya .offcanvas-{sm|md|lg|xl|xxl}ye.

• Tabali tilayɔrɔ minnu ka bon kosɛbɛ, olu ye opt-in ye sisan. — An ye dancɛ min ka bon ani min ka gɛlɛn ka tɛmɛn tabali kuluw ni ɲɔgɔn cɛ, o bɔ yen k’a bila kalansen sugandilen dɔ la i bɛ se ka min waleya, .table-group-divider. Aw ye tabali sɛbɛnw lajɛ walasa ka misali sɔrɔ.

• Scrollspy sɛbɛnna kokura walasa ka baara kɛ ni Intersection Observer API ye , o kɔrɔ ye ko i mago tɛ bangebagaw ka wrappers relatives la tugun, deprecatesoffsetconfig, ani fɛn wɛrɛw. Aw ye aw ka Scrollspy waleyaliw ɲini walasa u ka kɛ tiɲɛ ye ani ka bɛn u ka nav ɲɛfɔli la.

• Popovers ni baarakɛminɛnw bɛ baara kɛ sisan ni CSS fɛn caman sɛgɛsɛgɛli ye. CSS bεε bεε bε bεn u ka Sass bεnkanw ma walasa ka bεnkansεbεnw hakɛ Dɔgɔya. O de kosɔn, fɛn saba bεε bεε bε Se ka bεn nin bɔko in kɔnɔ: $popover-arrow-color, $popover-arrow-outer-color, ani $tooltip-arrow-color.

• .text-bg-{color}Dɛmɛbaga kura dɔw farala a kan . Sanni i ka mɔgɔ kelen-kelen .text-*ni .bg-*nafamafɛnw sigi, sisan i bɛ se ka baara kɛ ni .text-bg-*dɛmɛbagaw ye walasa ka a background-colorni ɲɛfɛla danfaralen sigi color.

• A .form-check-reverseye modifier fara a kan walasa ka labeliw ni a ni ɲɔgɔn cɛ checkboxes/radiow sigicogo wuli.

• A farala kuluw sɛrɛkiliw kan minnu bɛ dɛmɛ don tabali kan .table-striped-columnskalasi kura fɛ.

Walasa ka fɛn caman ɲɔgɔnna caman sɔrɔ, aw ye v5.2.0 porozɛ lajɛ GitHub kan .

v5.1.0 ye

• CSS Grid labɛncogo dɛmɛni kɔlɔsili farala a kan . — Nin ye baara ye min bɛ sen na, wa a ma labɛn fɔlɔ ka baara kɛ ni a dilanni ye, nka i bɛ se ka sugandi ka don o fɛɛrɛ kura in na Sass fɛ. Walasa k’a daminɛ, i ka grid default bali, i kɛtɔ $enable-grid-classes: falseka CSS Grid sigi ani ka baara kɛ ni setting $enable-cssgrid: trueye .

• Navbars kurayali walasa ka offcanvas dɛmɛ. — Aw bɛ offcanvas drawers fara navbar o navbar kan ni jaabi .navbar-expand-*kalanw ye ani offcanvas markup dɔw.

• Yɔrɔ-yɔrɔ-yɔrɔ kura farala a kan . — An ka yɔrɔ kura, o ye fɛɛrɛ ye min bɛ se ka waati kunkurunnin blokiw di kunnafoni lakikaw nɔ na walasa ka dɛmɛ don k’a jira ko fɛn dɔ bɛ ka doni hali bi i ka siti walima i ka porogaramu kɔnɔ.

• Collapse plugin bɛ collapse horizontal dɛmɛ sisan . — A fara .collapse-horizontali .collapseka kan ka collapse the widthinstead of the height. Aw ye aw yɛrɛ tanga navigatɔrɔn pentacogo kura ma ni aw ye a min-heightwalima height.

• A ye stack kura ni vertical rule dɛmɛbagaw fara a kan. — Aw bɛ teliya ka flexbox nafa caman kɛ walasa ka teliya ka ladamucogo labɛn ni stacks ye . Aw bɛ sugandi ka bɔ ( .hstack) ani jɔlen ( .vstack) kuluw cɛma. faranfasilenw fara ɲɔgɔn kan minnu bɛ tali kɛ <hr>fɛnw na ni dɛmɛbaga kuraw.vr ye .

• A ye diɲɛ :rootCSS fɛn caman ɲɔgɔnna kura fara a kan. — A ye CSS fɛn kura caman fara a kan :rootnivo la walasa ka <body>cogoyaw kɔlɔsi. Dɔ wɛrɛw bɛ baara la, an ka nafalanw ni yɔrɔw bɛɛ la, nka sisan, aw ye CSS fɛn caman sɛgɛsɛgɛli kɛ Customize yɔrɔ la .

• Kulɛri ni kɔkanna nafalanw labɛnna kokura walasa ka baara kɛ ni CSS fɛn caman sɛgɛsɛgɛli ye, ani ka sɛbɛnni opacity ani kɔkanna opacity nafalan kura fara a kan. — .text-* ani .bg-*nafalanw bɛ jɔ sisan ni CSS fɛn caman sɛgɛsɛgɛli ye ani rgba()kulɛri nafaw, o b’a to i bɛ se ka nafalan suguya bɛɛ ladilan nɔgɔya la ni opacity nafamafɛn kuraw ye.

• A ye misali kura dɔw fara a kan minnu sinsinnen bɛ walasa k’an ka yɔrɔw labɛncogo jira. — Sama labɛn ka baara kɛ ni yɔrɔw ye minnu bɛ kɛ ka kɛɲɛ ni mɔgɔw sago ye ani dilancogo wɛrɛw minnu bɛ kɛ tuma bɛɛ ni an ka Snippets misali kuraw ye . , jukɔrɔlafɛnw , fɛnw jiginni , lisi kuluw , ani modɛliw bɛ sɔrɔ a kɔnɔ .

• A ye jɔyɔrɔ-falen-falen-cogo minnu Kɛ, olu Bɔra popovers ni baarakɛminɛnw na bawo ninnu bɛ Popper dɔrɔn de fɛ. $tooltip-marginye deprecated ani a bilalen don nulla ka baara la.

Aw b’a fɛ ka kunnafoni wɛrɛw sɔrɔ wa? Aw ye v5.1.0 bulɔgu sɛbɛn kalan.

Dependencies (Jɛkuluw).

• A ye jQuery bila.
• A bɛ wuli ka bɔ Popper v1.x la ka taa Popper v2.x la.
• A ye Libsass bila Dart Sass nɔ na i n'a fɔ an ka Sass compiler min dira Libsass ma o tun bɛ baara la.
• A bɔra Jekyll ka taa Hugo an ka sɛbɛnw jɔli kosɔn

Navigatɛri dɛmɛni

• A ye Internet Explorer 10 ani 11 bila
• Microsoft Edge < 16 (Edge kɔrɔlen) bɔra a la.
• Firefox < 60 bɔra a la
• Safari jiginna < 12
• A ye iOS Safari < 12 bɔ
• Chrome min bɛ jigin < 60

Sɛbɛnw bɛ fɛn caman Changer

• A daminɛna, sɛbɛnw labɛncogo ani a jukɔrɔla yɔrɔ labɛnna kokura.
• A ye Parsela gafe kura fara a kan .
• A ye Customize yɔrɔ kura fara a kan , ka v4 ka Theming ɲɛ bila a nɔ na , ni kunnafoni kuraw ye Sass kan, diɲɛ kɔnɔ sigicogo suganditaw, kulɛriw, CSS fɛn caman sɛgɛsɛgɛli, ani fɛn wɛrɛw.
• A ye sɛbɛnw bɛɛ labɛn kokura ka kɛ Sɛbɛnw yɔrɔ kura ye , ka kɔnɔkow tila ka kɛ ɲɛw ye minnu sinsinnen don kosɛbɛ.
• O cogo kelen na, Layout yɔrɔ kura ye , walasa ka grid kɔnɔkow farikolo jira ka jɛya.
• A tɔgɔ jiginna ka kɛ “Navs” yɔrɔ ɲɛ ye ka kɛ “Navs & Tabs” ye.
• A tɔgɔ jiginna “Checks” ɲɛ kan ka kɛ “Checks & radios” ye.
• A ye navbar labɛn kokura ani ka subnav kura dɔ fara a kan walasa ka nɔgɔya don an ka sitew ni docs versions lamini na.
• Klaviyeti surun kura farala ɲinini yɔrɔ kan: Ctrl + /.

Sass ye

• An ye Sass karti jɛ-ka-baara daminɛtaw ditched walasa ka nɔgɔya don nafalanw bɔli la. Aw k' a to aw hakili la sisan aw ka kan ka nafa bɛɛ ɲɛfɔ Sass karitiw kɔnɔ i n' a fɔ $theme-colors. Aw ye Sass kartiw kunbɛncogo lajɛ .

• Ka kariTɔgɔ wɛrɛ Kɛra color-yiq()baarakɛcogo la ani a ni ɲɔgɔn cɛ fɛn caman b'a la ka color-contrast()Kɛ i n'a fɔ a tɛ tali Kɛ YIQ kulɛri yɔrɔ la tugun. Aw ye #30168 lajɛ.

  • $yiq-contrasted-thresholdbɛ tɔgɔ caman wɛrɛ da $min-contrast-ratio.
  • $yiq-text-darkani $yiq-text-lightu tɔgɔ caman bɛ wuli ka kɛ $color-contrast-darkani $color-contrast-light.

• Ka kariMedia query mixins paramètres ye fɛn caman Changé walasa ka fɛɛrɛ sɔrɔ min bɛ bɛn hakili ma.

  • media-breakpoint-down()bɛ baara kɛ ni kariyɔrɔ yɛrɛ ye kariyɔrɔ nata nɔ na (misali la, media-breakpoint-down(lg)sanni ka media-breakpoint-down(md)laɲiniw filɛlifɛnw ka dɔgɔ ni lg).
  • O cogo kelen na, paramɛtɛrɛ filanan in media-breakpoint-between()fana bɛ baara Kɛ ni kariyɔrɔ yɛrɛ ye kariyɔrɔ nata nɔ na (misali la, laɲiniw filɛliyɔrɔw media-between(sm, lg)nɔ na ani ).media-breakpoint-between(sm, md)smlg

• Ka kariA bɔra sɛbɛnni kɛcogoyaw ni $enable-print-stylesfɛn caman sɛgɛsɛgɛli la. Print display classes bɛ yen hali bi. Aw ye #28339 lajɛ .

• Ka kariDropped color(), theme-color(), ani gray()functions ka ɲɛsin variables ma. Aw ye #29083 lajɛ .

• Ka kariRenamed theme-color-level()function to color-level()ani sisan a bɛ sɔn kulɛri o kulɛri ma i b’a fɛ sanni ka kɛ $theme-colorkulɛriw dɔrɔn ye. Aw ye #29083 lajɛ : color-level() a kɛra kɔfɛ ka bila v5.0.0-alpha3.

• Ka kariTɔgɔ kura donna $enable-prefers-reduced-motion-media-queryani $enable-pointer-cursor-for-buttonska taa $enable-reduced-motionani $enable-button-pointerska surunya.

• Ka kariA ye bg-gradient-variant()mixin bɔ. Baara kɛ ni .bg-gradientkalasi ye walasa ka gradients (gradients) fara elements (daɲɛw) kan sanni ka .bg-gradient-*classes (kalanso) minnu bɛ sɔrɔ.

• Ka kari Mixin minnu tun ma deli ka kɛ fɔlɔ, olu bɔra:

  • hover, hover-focus, plain-hover-focus, anihover-focus-active
  • float()
  • form-control-mixin()
  • nav-divider()
  • retina-img()
  • text-hide()(a fana ye nafabɔ-kalasi min bɛ tali kɛ a la, o bɔ yen, .text-hide)
  • visibility()
  • form-control-focus()

• Ka kariTɔgɔ scale-color()wɛrɛ da baarakɛcogo kan walasa shift-color()ka Sass yɛrɛ ka kulɛri sɛgɛsɛgɛli baarakɛcogo bali ka ɲɔgɔn sɔrɔ.

• box-shadowmixins sisan bɛ sira di nullnafaw ma ani ka jigin noneka bɔ dalilu caman na. Aw ye #30394 lajɛ .

• Mixin border-radius()sisan bɛ ni default value ye.

Kulɛriw sigicogo

• Kulɛri siratigɛ min ye baara Kɛ ni color-level()ani $theme-color-intervala Bɔra ka Kɛ kulɛri kura sigicogo nɔfɛ. Bɛɛ lighten()ni darken()baarakɛcogo minnu bɛ an ka codebase kɔnɔ olu bɛ bila u nɔ na ni tint-color()ani shade-color(). O baara ninnu bɛna kulɛri ɲagami ni finman walima nɛrɛmuguma ye sanni k’a nɔgɔya caman Changer ni hakɛ latigɛlen ye. A shift-color()bɛna kulɛri dɔ tin walima ka a bonya ka kɛɲɛ ni a girinya paramɛtiri ye ko ɲuman ye walima ko jugu ye. Aw ye #30622 lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ .

• A ye tintin ni biɲɛ kura fara a kan kulɛri kelen-kelen bɛɛ la, ka kulɛri danfaralen kɔnɔntɔn di basigi kulɛri kelen-kelen bɛɛ ma, i n’a fɔ Sass fɛn kuraw.

• Kulɛriw danfara ɲɛnabɔra. Bumped color contrast ratio ka bɔ 3:1 na ka se 4.5:1 ma ani ka kulɛri bulu, wuluwulu, cyan ani pink kuraya walasa ka WCAG 2.1 AA danfara sabati. Fana an ye an ka kulɛri danfara kulɛri Changé ka bɔ $gray-900ka taa $black.

• Walasa k’an ka kulɛriw sigicogo dɛmɛ, an ye laadalakow tint-color()ni shade-color()baarakɛcogo kura dɔw fara a kan walasa k’an ka kulɛriw ɲagami cogo bɛnnen na.

Grid kurayali

• Breakpoint kura! xxlA ye breakpoint kura fara a kan 1400pxka taa san fɛ. Yɛlɛma si ma kɛ kariyɔrɔ tɔw bɛɛ la.

• Gutters (jibolisiraw) minnu ɲɛnabɔra. Sisan, gutɛriw bɛ sigi rems kɔnɔ, wa u ka dɔgɔ ni v4 ye ( 1.5rem, walima 24px, ka jigin ka bɔ 30px). O b’a to an ka grid system ka gutters ni an ka spacing utilities bɛ bɛn ɲɔgɔn ma.

  • A ye jibolisiraw kalasi kura ( .g-*, .gx-*, ani .gy-*) fara a kan walasa ka jibolisiraw jɔlenw/jiginnenw, jibolisiraw jɔlenw, ani jibolisiraw jɔlenw kɔlɔsi.
  • Ka kariA tɔgɔ jiginna .no-gutterska kɛ walasa .g-0ka bɛn gutter utilities kura ma.

• Kolonw ma position: relativebaara Kɛ tugun, o la, i bɛ Se ka dɔ Fàra .position-relativefɛn dɔw kan walasa k’o kɛcogo Lasegin.

• Ka kariA ye kalan damadɔw bila .order-*minnu tun bɛ to ka taa baara tɛ kɛ ni minnu ye. An bɛ sisan dɔrɔn de di .order-1ka .order-5bɔ kɛsu kɔnɔ.

• Ka kariA ye .mediacomponent (yɔrɔ) Dòn i n'a fɔ a bɛ Se ka Lasegin nɔgɔya la ni utilités (nafamafɛnw) ye. aw ye #28265 ani flex utilities ɲɛ lajɛ misali la .

• Ka kari bootstrap-grid.csssisan a bɛ tali box-sizing: border-boxkɛ kulu dɔrɔn de la sanni ka diɲɛ kɛsu-taamacogo lasegin. O cogo la, an ka grid styles bɛ se ka baara kɛ yɔrɔ caman na k’a sɔrɔ u ma dankari kɛ.

• $enable-grid-classestɛ minɛnko kalanw bɔli bali tugun. Aw ye #29146 lajɛ.

• A ye make-colmixin kuraya ka kɛ default ye ka kɛɲɛ ni kuluw ye minnu hakɛ ma fɔ.

Kɔnɔkow, Reboot, a ɲɔgɔnnaw

• RFS bɛ baara kɛ sisan ka kɛɲɛ ni a daminɛ ye. Kumakun minnu bɛ baara kɛ nifont-size()mixin ye, olu bɛna u yɛrɛ ladilanfont-sizeka kɛɲɛ ni jatebɔlan ye. O fɛɛrɛ in tùn ye opt-in ye ni v4 ye fɔlɔ.

• Ka kariA ye an ka jiralan sɛbɛnnibolow labɛn kokura walasa k’an ka $display-*fɛn caman sɛmɛntiyalenw bila u nɔ na ani ka $display-font-sizesSass karti dɔ bila u nɔ na. Fana a ye $display-*-weightbεnkan kelen-kelenw Bɔ s kelen na $display-font-weightani s ladilanen font-size.

• .display-*A ye barokun hakɛ kura fila fara a kan, .display-5ani .display-6.

• Jɛɲɔgɔnya bɛ 'jyɛn 'kɔnɔ (a tɛ Kɛ 'yɔrɔ la dɔrɔn), fo n'u ye 'yɔrɔ kɛrɛnkɛrɛnnenw ye.

• Tabali minnu labɛnna kokura walasa k’u ka cogoyaw labɛn kokura ani k’u jɔ kokura ni CSS fɛn caman sɛgɛsɛgɛli ye walasa ka se ka u ka cogoyaw mara kosɛbɛ.

• Ka kariTabali minnu bɛ sigi sen kan, olu tɛ cogoyaw ciyɛn ta tugun.

• Ka kari .thead-lightani .thead-darku bɛ fili ka ɲɛsin .table-*kalasi suguya caman ma minnu bɛ se ka baara kɛ ni tabali kɔnɔfɛnw bɛɛ ye ( thead, tbody, tfoot, tr, thani td).

• Ka karitable-row-variant()Mixin tɔgɔ bɛ Yɛlɛma ka Kɛ table-variant()ani a bɛ Sɔn paramɛtɛrɛ 2 dɔrɔn ma: $color(kulɛri tɔgɔ) ani $value(kulɛri kode). Dankan kulɛri ni fɔcogo kulɛriw bɛ jate u yɛrɛma ka da tabali factor variables (tabali factor variables) kan.

• Tabali selilɛri padding variables tila ka kɛ -yani -x.

• Ka kariKalanso bilala .pre-scrollable. Aw ye #29135 lajɛ

• Ka kari .text-*nafamafɛnw tɛ hover ni focus states fara links kan tugun. .link-*dɛmɛbagaw ka kalanw bɛ se ka kɛ o nɔ na. Aw ye #29267 lajɛ

• Ka kariKalanso bilala .text-justify. Aw ye #29793 lajɛ

• Ka kari <hr>elements sisan baara kɛ heightnɔ na walasa ka attribut borderdɛmɛ ka ɲɛ . sizeO fana bɛ kɛ sababu ye ka baara kɛ ni padding utilities ye walasa ka tilayɔrɔbaw dilan minnu ka bon (misali la, <hr class="py-1">).

• Segin default horizontal padding-lefton <ul>ani <ol>elements ka bɔ browser default 40pxla ka taa 2rem.

• A farala a kan $enable-smooth-scroll, min bɛ tali kɛ scroll-behavior: smoothdiɲɛ fan bɛɛ la—n’a ma fɔ baarakɛlaw ye minnu bɛ ɲini ka lamaga dɔgɔya prefers-reduced-motionkunnafonidilanw ɲinini fɛ. Aw ye #31877 lajɛ

RTL ye

• Horizontal direction specific variables, utilities, ani mixins bɛɛ tɔgɔ jiginna walasa ka baara kɛ ni logical properties ye i n’a fɔ minnu bɛ sɔrɔ flexbox layouts kɔnɔ—misali la , startani ani .endleftright

Sɛbɛnw

• Formulaire flottant kura farala a kan! An ye Floating labels misali lafasa ka se foroko yɔrɔw ma minnu bɛ dɛmɛ dafalen na. Aw ye sɛbɛn ɲɛ kura lajɛ min tɔgɔ ye ko Floating labels.

• Ka kari Native ani custom form elements (fɔcogo nafamaw) jɛlenw. Jateblaw, arajow, sugandiliw, ani donnafɛn wɛrɛw minnu tun bɛ ni native ani custom classes ye v4 kɔnɔ, olu faralen don ɲɔgɔn kan. Sisan an ka foroko kɔnɔfɛnw bɛɛ bɛ Se ka Kɛ ladamu ye pewu, u fanba tɛ mago ɲɛ HTML ladamulen na.

  • .custom-control.custom-checkboxye sisan .form-check.
  • .custom-control.custom-custom-radioye sisan .form-check.
  • .custom-control.custom-switchye sisan .form-check.form-switch.
  • .custom-selectye sisan .form-select.
  • .custom-fileani .form-fileu bilala laada cogoyaw nɔ na sanfɛ .form-control.
  • .custom-rangeye sisan .form-range.
  • Jiginna native .form-control-fileani .form-control-range.

• Ka kariA binna .input-group-appendani .input-group-prepend. Aw bɛ se sisan ka butɔni dɔrɔn fara a kan ani .input-group-texti n’a fɔ donnajɛkuluw ka denw tilennen.

• Missing border radius min bɛ yen kabini tuma jan donna kulu kan ni validation feedback bug ye, o laban bɛ Labɛn ni kalasi wɛrɛ farali .has-validationye donna kuluw kan ni validation ye.

• Ka kari A ye foroko kɛrɛnkɛrɛnnenw labɛncogo kalanw bila an ka grid system (jatebɔlan) kama. Baara kɛ ni an ka grid ni utilités ye .form-group, .form-row, walima .form-inline.

• Ka kariForoko labeliw bɛ ɲini sisan .form-label.

• Ka kari .form-textno longer sets display, o b’a to i bɛ se ka dɛmɛ sɛbɛn inline walima block block kɛ i n’a fɔ i b’a fɛ cogo min na HTML yɔrɔ caman cili dɔrɔn fɛ.

• Formulaire controls tɛ baara kɛ tugun fixed heightni a bɛ se ka kɛ, o nɔ na deferring to min-heightwalasa ka customization ni compatibilité ni component wɛrɛw yiriwa.

• Validation icons tɛ baara kɛ tugun <select>s ni multiple.

• Labɛnna kokura source Sass files jukɔrɔ scss/forms/, donna kulu cogoyaw fana sen bɛ o la.

A yɔrɔw

• Nafa kelenw paddingka ɲɛsin lasɔminiw, buruburuw, kartiw, fɛnw jiginni, lisi kuluw, modaliw, popoverw, ani baarakɛminɛnw ma walasa ka sinsin an ka $spacerfɛn caman sɛgɛsɛgɛli kan. Aw ye #30564 lajɛ .

Akordeyɔn

• A ye accordéon yɔrɔ kura fara a kan .

Kɔlɔsiliw

• sisan misaliw bɛ lasɔminiw la ni taamasiyɛnw ye .

• s ka ladamu cogoyaw bɔra <hr>lasɔmini kelen-kelen bɛɛ kɔnɔ bawo u bɛ baara kɛ ni u ye kaban currentColor.

Badgew (Badges).

• Ka kari.badge-*A ye kulɛri kalasi bɛɛ bila kɔfɛ nafalanw kama (misali la, baara kɛli kɛ .bg-primarya nɔ na .badge-primary).

• Ka kariDropped .badge-pill— baara kɛ ni .rounded-pillutilité ye o nɔ na.

• Ka kariA bɔra hover ni focus styles for <a>ani <button>elements.

• dɔ farala badge default padding kan ka bɔ .25em/ .5emla ka taa .35em/ .65emla .

Buruburuw

• buruburuw cogoya fɔlɔ nɔgɔyara ni padding, background-color, ani border-radius.

• CSS ladamucogo kura farala a kan --bs-breadcrumb-dividerwalasa ka ladamu nɔgɔya k’a sɔrɔ a ma kɛ wajibi ye ka CSS lajɛ kokura.

Butɔnw

• Ka kari Toggle buttons , ni checkboxes walima arajow ye, olu tɛ JavaScript wajibiya tugun ani markup kura bɛ u la. An tɛ fɛn dɔ wajibiya tugun min bɛ kɛ ka fɛnw siri, ka fara ,.btn-checkk’a<input>ɲɔgɔn kan ni kalan suguya o.btnsuguya ye<label>. Aw ye #30650 lajɛ . O kama docs bɔra an ka Buttons ɲɛ kan ka taa Formulaire yɔrɔ kura la.

• Ka kari A filila .btn-blockka ɲɛsin utilités ma. Sanni i ka baara .btn-blockkɛ .btnni . Aw bɛ wuli ka taa kalanw la minnu bɛ jaabi di walasa ka se ka u yɛrɛ minɛ kosɛbɛ. Aw ye docs kalan walasa ka misali dɔw sɔrɔ..d-grid.gap-*

• Updated our button-variant()ani button-outline-variant()mixins ka dɛmɛ don paramɛtɛrɛ wɛrɛw la.

• Butɔnw kurayali walasa ka dɔ fara danfara kan hover ani active states kan.

• Butɔn minnu ye baarakɛbaliw ye sisan , olu bɛ pointer-events: none;.

Karti

• Ka kariA jiginna .card-deckka ɲɛsin an ka grid ma. Aw bɛ aw ka kartiw siri kulu kalanw kɔnɔ ani ka bangebaga .row-cols-*minɛn dɔ fara a kan walasa ka karti dekiw dilan kokura (nka ni aw bɛ se ka kunnafoni caman sɔrɔ jaabiw labɛncogo kan).

• Ka kariA binna .card-columnska ɲɛsin Masonry ma. Aw ye #28922 lajɛ .

• Ka karia ye accordion .cardbasigilen bila a nɔ na ni Accordion yɔrɔ kura ye .

Karosel

• A ye fɛn kura .carousel-darkdɔ fara a kan sɛbɛnni dibimanw, kunnafonidiw, ani taamasiyɛnw kama (a ka ɲi kosɛbɛ kɔkanna jɛlenw kama).

• chevron taamasiyɛnw bilala karɔsili kunkankow nɔ na ni SVG kura ye ka bɔ Bootstrap taamasiyɛnw na .

Butɔn da tugu

• Ka kariA tɔgɔ jiginna .closeka .btn-closekɛ tɔgɔ ye min tɛ caman ye.

• Butɔnw dadonni bɛ baara Kɛ sisan ni a background-image(SVG min bɛ Dòn a la) Kɛ a nɔ na ×HTML kɔnɔ, o bɛ sira Di mɔgɔw ma minnu bɛ Se ka Labɛn nɔgɔya la k’a sɔrɔ i ma maga i ka taamaʃyɛn na.

• A ye fɛn kura dɔ fara a kan .btn-close-whitemin bɛ baara kɛ ni filter: invert(1)a ye walasa ka se ka danfara caman bɔ taamasiyɛnw na ka ɲɛsin dibi kɔkannakow ma.

Ka bin

• A ye scroll anchoring bɔ acordionw kama.

Dropdowns (Donkiliw).

• A ye fɛn kura dɔw fara a kan .dropdown-menu-darkani fɛn caman ɲɔgɔnna minnu bɛ tali kɛ dibi la.

• A ye fɛn kura dɔw fara a kan ka ɲɛsin $dropdown-padding-x.

• A ye dibi don dropdown divider la walasa ka danfara ɲɛ.

• Ka kariKo minnu bɛ Kɛ 'sènfɛ-sɛbɛnni na olu bɛɛ bɛ Daminɛ sisan 'sènfɛ-sɛbɛnni-butɔni kan ka sɔrɔ ka bugun fo ka Se bangebaga-yɔrɔ ma.

• Sisan, fɛn minnu bɛ jigin, olu bɛ ni fɛn dɔ ye min data-bs-popper="static"bɛ sigi sen kan ni jiginɛ jɔyɔrɔ bɛ jɔ, walima ni jigin bɛ navbar kɔnɔ. O bɛ Fàra o kan an ka JavaScript fɛ ani k’an Dɛmɛ ka baara Kɛ ni jɔyɔrɔfalen-falen-cogow ye k’a sɔrɔ an ma Popper ka jɔyɔrɔfalen-falen-falen Kɛ.

• Ka kariA bɔra flipsugandili la ka ɲɛsin dropdown plugin ma min bɛ Popper native configuration nafa. Sisan i bɛ se ka flipping kɛcogo bali ni i ye array lankolon dɔ tɛmɛ for fallbackPlacementsoption in flip modifier kɔnɔ.

• sisan menu minnu bɛ jigin , olu bɛ se ka digi ni autoClosesugandi kura ye walasa ka auto close kɛcogo ɲɛnabɔ . I bɛ se ka baara kɛ ni nin sugandi in ye walasa ka sɔn ka digi yɔrɔ la min bɛ yɔrɔ la walima a kɔkan walasa a ka kɛ fɛn ye min bɛ se ka kɛ ɲɔgɔn fɛ.

• Dropdowns sisan bɛ .dropdown-items dɛmɛ min sirilen bɛ <li>s la.

Jumbotron ye

• Ka kariA ye jumbotron yɔrɔ bila iko a bɛ se ka segin ni nafamafɛnw ye. Aw ye an ka Jumbotron misali kura lajɛ walasa ka demo sɔrɔ.

Lisiti kulu

• A ye fɛn kura Fàra .list-group-numberedɲɔgɔn kan ka Kɛ kuluw lisɛli ye.

Navs ani tabs

• nullA ye fɛn kura dɔw fara font-size, font-weight, color, ani :hover colorkan .nav-linkkalan na.

Navbarw ye

• Ka kariNavbarw bɛ minɛn dɔ de wajibiya sisan kɔnɔna na (walasa ka yɔrɔjan ɲininiw nɔgɔya kosɛbɛ ani CSS wajibiyalenw).
• Ka kariKalanso .activetɛ se ka waleya .nav-items kan tugun, a ka kan ka waleya k’a ɲɛsin .nav-links ma.

Offcanvas ye

• A ye offcanvas yɔrɔ kura fara a kan .

Ɲɛjirali sɛbɛnw

• Pagenation links sisan bɛ customizable margin-leftminnu bɛ dynamiquement rounded kan corner bɛɛ kan ni u faralen don ɲɔgɔn kan.

• A transitionye s fara ɲɛɲiniw kan.

Popovers (Popovers) ye

• Ka kariA tɔgɔ jiginna .arrowka .popover-arrowkɛ an ka popover template default kɔnɔ.

• Tɔgɔ caman tigɛra whiteListsugandili la ka kɛ allowList.

Fɛnɲɛnɛmaw

• Spinners bɛ bonya sisan prefers-reduced-motion: reduceni animations (animasiyɔnw) sumaya ye. Aw ye #31882 lajɛ .

• A ka fisa ni spinner vertical alignment ye.

Tositiw bɛ kɛ

• tositiw bɛ se ka bila sisan a kɔnɔ ni jɔyɔrɔfalen nafamafɛnw.toast-container dɛmɛ ye .

• Tositi kuntaala dafalen Changé ka kɛ segin 5 ye.

• A bɛ bɔ tobilikɛminɛnw na ka a bila a nɔ na ni s overflow: hiddenbɛnnenw ye ni baarakɛcogo ye.border-radiuscalc()

Baarakɛminɛnw ladilikanw

• Ka kariTɔgɔ .arrowkura .tooltip-arrowdonna an ka baarakɛminɛnw jatebɔsɛbɛn kɔnɔ.

• Ka kariNafa min bɛ sɔrɔ o la, fallbackPlacementso bɛ Changé ka ['top', 'right', 'bottom', 'left']kɛ walasa ka popper elements bila ka ɲɛ.

• Ka kariTɔgɔ caman tigɛra whiteListsugandili la ka kɛ allowList.

Nafamafɛnw

• Ka kariA ye nafa caman tɔgɔ caman sɛmɛntiya walasa ka baara kɛ ni logical property tɔgɔw ye sira tɔgɔw nɔ na ni RTL dɛmɛ faralen ye a kan:

  • Tɔgɔ kura donna .left-*ani .right-*ka taa .start-*ani .end-*.
  • Tɔgɔ kura donna .float-leftani .float-rightka taa .float-startani .float-end.
  • Tɔgɔ kura donna .border-leftani .border-rightka taa .border-startani .border-end.
  • Tɔgɔ kura donna .rounded-leftani .rounded-rightka taa .rounded-startani .rounded-end.
  • Tɔgɔ kura donna .ml-*ani .mr-*ka taa .ms-*ani .me-*.
  • Tɔgɔ kura donna .pl-*ani .pr-*ka taa .ps-*ani .pe-*.
  • Tɔgɔ kura donna .text-leftani .text-rightka taa .text-startani .text-end.

• Ka kariMarge négatifs (Marges négatifs) balilen don ka kɛɲɛ ni default ye.

• Kalanso kura farala a kan walasa ka 's kɔkanna .bg-bodysigi teliya la ka kɛ fɛn wɛrɛw ye.<body>

• A ye jɔyɔrɔ nafamafɛn kura fara a kan top, right, bottom, ani left. Nafaw bɛ 0, 50%, ani 100%nafolo kelen-kelen bɛɛ la.

• A ye kura .translate-middle-x& .translate-middle-ynafamafɛnw fara a kan ka ɲɛsin horizontalement walima vertically center absolute/fixed positioned elements ma.

• border-widthNafamafɛn kura dɔw farala a kan .

• Ka kariA tɔgɔ jiginna .text-monospaceka kɛ .font-monospace.

• Ka kariA Bɔra .text-hidebari a ye fɛɛrɛ kɔrɔlen ye sɛbɛnni dogo la min man kan ka Kɛ tugun.

• Nafalanw farala .fs-*nafalanw font-sizekan (ni RFS bɛ baara la). Olu bɛ baara Kɛ ni sɛgɛsɛgɛli kelen ye ni HTML ka dakun fɔlɔw ye (1-6, belebele ka Taa fitinin), wa u bɛ Se ka Lakodɔn Sass karti fɛ.

• Ka kariNafamafɛnw tɔgɔ caman tigɛra .font-weight-*i n’a fɔ .fw-*a surunyali ni a bɛnkan.

• Ka kariNafamafɛnw tɔgɔ caman tigɛra .font-style-*i n’a fɔ .fst-*a surunyali ni a bɛnkan.

• A farala a kan .d-gridwalasa ka nafalanw jira ani nafalan kuraw gap( .gap) CSS Grid ani flexbox layidu talenw kama.

• Ka kariA bɔra .rounded-smani rounded-lg, ka kalan hakɛ kura dɔ don a kɔnɔ, .rounded-0ka .rounded-3. Aw ye #31687 lajɛ .

• Nafamafɛn kura dɔw farala a kan line-height: .lh-1, .lh-sm, .lh-baseani .lh-lg. Aw ye a lajɛ yan .

• A ye .d-nonenafalan in wuli an ka CSS kɔnɔ walasa ka girinya caman di a ma ka tɛmɛ jiralan nafamafɛn tɔw kan.

• A ye dɛmɛbaga janya .visually-hidden-focusableka baara kɛ fana minɛnw kan, ka baara kɛ ni :focus-within.

Dɛmɛbagaw

• Ka kari Jaabi embed dɛmɛbagaw tɔgɔ jiginna ka kɛ ratio dɛmɛbagaw ye ni kala tɔgɔ kuraw ye ani kɛcogo ɲumanw, ka fara CSS fɛn caman sɛgɛsɛgɛli kan.

  • Kalansow tɔgɔ jiginna ka Changé byka xkɛ in aspect ratio ye. Misali la, .ratio-16by9ye sisan .ratio-16x9.
  • An ye .embed-responsive-itemani element kulu sugandili Blà ka ɲɛsin sugandili nɔgɔman dɔ .ratio > *ma. Kalanso wɛrɛ mago tɛ yen, wa ratio dɛmɛbaga bɛ baara kɛ sisan ni HTML fɛn o fɛn ye.
  • Sass karti tɔgɔ $embed-responsive-aspect-ratiosjiginna ka kɛ $aspect-ratiosa nafaw nɔgɔyara walasa ka kalasi tɔgɔ ni kɛmɛsarada la don a la i n’a fɔ key: valuefila.
  • CSS bεε bε bεn sisan ka bεn nafa kelen-kelen bɛɛ ma Sass karti kɔnɔ. fɛn --bs-aspect-ratiocaman b' a la ka.ratio fɛn caman sɛmɛntiya .

• Ka kari “Screen reader” kalanw ye sisan “yecogo dogolenw” kalanw ye .

  • A ye Sass filen Changé ka bɔ scss/helpers/_screenreaders.scsska taascss/helpers/_visually-hidden.scss
  • Tɔgɔ kura donna .sr-onlyani .sr-only-focusableka kɛ .visually-hiddenani.visually-hidden-focusable
  • Tɔgɔ kura donna sr-only()ani sr-only-focusable()mixins ka kɛ visually-hidden()ani visually-hidden-focusable().

• bootstrap-utilities.csssisan, an dɛmɛbagaw fana sen bɛ o la. Dɛmɛbagaw mago tɛ ka don ladamu jɔli la tugun.

JavaScript ye

• A ye jQuery dependency bila ka plugins sɛbɛn kokura walasa u ka kɛ JavaScript basigilen kɔnɔ.

• Ka kariJavaScript plugins bɛɛ ka data attributes (daɲɛw) bɛ tɔgɔladonni na sisan walasa ka dɛmɛ don ka Bootstrap baarakɛcogo faranfasi ka bɔ mɔgɔ wɛrɛw la ani i yɛrɛ ka kode la. Misali la, an bɛ baara kɛ data-bs-toggleni data-toggle.

• Sisan, plugins bɛɛ bɛ se ka sɔn CSS sugandili ma i n’a fɔ dalilu fɔlɔ. Aw bɛ se ka DOM yɔrɔ dɔ tɛmɛ walima CSS sugandilikɛlan ɲuman o fɛn bɛ se ka kɛ walasa ka plugin instance kura dɔ da:

  const modal = new bootstrap.Modal('#myModal')
  const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
  

• popperConfigbɛ se ka tɛmɛ i n’a fɔ baarakɛcogo min bɛ sɔn Bootstrap ka Popper config default ma i n’a fɔ argument, walasa i ka se ka nin default configuration in fara ɲɔgɔn kan i ka sira kan. A bɛ tali kɛ dropdowns, popovers ani baarakɛminɛnw na.

• Nafa min bɛ sɔrɔ o la, fallbackPlacementso bɛ Changé ka ['top', 'right', 'bottom', 'left']kɛ walasa ka Popper elements bila ka ɲɛ. A bɛ tali kɛ dropdowns, popovers ani baarakɛminɛnw na.

• A bɔra forobaciyɛn jɔlenw na i n' a fɔ _getInstance()→ getInstance().