Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn iwe aṣẹ
in English

Gbigbe lọ si v5

Tọpinpin ati atunyẹwo awọn ayipada si awọn faili orisun Bootstrap, iwe, ati awọn paati lati ṣe iranlọwọ fun ọ lati jade lati v4 si v5.

Lori iwe yi

Awọn igbẹkẹle

  • Ju silẹ jQuery.
  • Igbegasoke lati Popper v1.x si Popper v2.x.
  • Libsass ti o rọpo pẹlu Dart Sass bi olupilẹṣẹ Sass wa ti a fun Libsas ti jẹ idinku.
  • Iṣilọ lati Jekyll si Hugo fun kikọ iwe-ipamọ wa

Atilẹyin aṣawakiri

  • Ju Internet Explorer 10 ati 11 silẹ
  • Silẹ Microsoft Edge <16 (Legacy Edge)
  • Firefox ti lọ silẹ <60
  • Safari silẹ <12
  • Ju iOS Safari silẹ <12
  • Chrome silẹ <60

Awọn iyipada iwe

  • Oju-iwe ile ti a tun ṣe, iṣeto awọn iwe aṣẹ, ati ẹlẹsẹ.
  • Ti ṣafikun itọsọna Parcel tuntun .
  • Ti ṣafikun apakan Isọdi tuntun , rirọpo oju-iwe Theming v4 , pẹlu awọn alaye tuntun lori Sass, awọn aṣayan atunto agbaye, awọn ero awọ, awọn oniyipada CSS, ati diẹ sii.
  • Ṣe atunto gbogbo awọn iwe fọọmu sinu apakan Awọn fọọmu tuntun , fifọ yato si akoonu sinu awọn oju-iwe idojukọ diẹ sii.
  • Bakanna, ṣe imudojuiwọn apakan Ifilelẹ , si ẹran-ara jade akoonu akoj diẹ sii kedere.
  • Fun lorukọmii “Navs” oju-iwe paati si “Navs & Awọn taabu”.
  • Fun lorukọmii oju-iwe “Ṣayẹwo” si “Ṣayẹwo & awọn redio”.
  • Ti ṣe atunto navbar o si ṣafikun subnav tuntun lati jẹ ki o rọrun lati wa ni ayika awọn aaye wa ati awọn ẹya docs.
  • Ṣafikun ọna abuja keyboard tuntun fun aaye wiwa Ctrl + /:.

Sass

  • A ti sọ adapo maapu Sass aiyipada lati jẹ ki o rọrun lati yọkuro awọn iye laiṣe. Ranti pe o ni lati ṣalaye gbogbo awọn iye ninu awọn maapu Sass bii $theme-colors. Ṣayẹwo bi o ṣe le ṣe pẹlu awọn maapu Sass .

  • FifọIṣẹ ti a tun lorukọ color-yiq()ati awọn oniyipada ti o ni ibatan si color-contrast()bi ko ṣe ni ibatan si aaye awọ YIQ mọ. Wo #30168.

    • $yiq-contrasted-thresholdti wa ni lorukọmii si $min-contrast-ratio.
    • $yiq-text-darkati $yiq-text-lightti wa ni lẹsẹsẹ lorukọmii si $color-contrast-darkati $color-contrast-light.

  • FifọMedia ibeere mixins paramita ti yi pada fun kan diẹ mogbonwa ona.

    • media-breakpoint-down()nlo aaye fifọ funrararẹ dipo aaye fifọ ti o tẹle (fun apẹẹrẹ, media-breakpoint-down(lg)dipo awọn oju wiwo ibi- media-breakpoint-down(md)afẹde ti o kere ju lg).
    • Bakanna, paramita keji ninu media-breakpoint-between()tun nlo aaye fifọ funrarẹ dipo aaye fifọ atẹle (fun apẹẹrẹ, media-between(sm, lg)dipo awọn ibi-iwoye ibi- media-breakpoint-between(sm, md)afẹde laarin smati lg).

  • FifọYọ awọn aza titẹjade ati $enable-print-stylesoniyipada. Awọn kilasi ifihan titẹ sita tun wa ni ayika. Wo # 28339 .

  • FifọJu silẹ color(), theme-color(), ati gray()awọn iṣẹ ni ojurere ti awọn oniyipada. Wo # 29083 .

  • FifọIṣẹ ti a lorukọmii theme-color-level()si color-level()ati bayi gba eyikeyi awọ ti o fẹ dipo awọn $theme-colorawọ nikan. Wo # 29083 Ṣọra: color-level() nigbamii ti lọ silẹ ni v5.0.0-alpha3.

  • FifọFun lorukọmii $enable-prefers-reduced-motion-media-queryati $enable-pointer-cursor-for-buttonssi $enable-reduced-motionati $enable-button-pointersfun kukuru.

  • FifọApopọ ti yọ kuro bg-gradient-variant(). Lo .bg-gradientkilasi lati ṣafikun awọn gradients si awọn eroja dipo awọn .bg-gradient-*kilasi ti ipilẹṣẹ.

  • Fifọ Yọ awọn akojọpọ ti a ti sọ tẹlẹ kuro:

    • hover, hover-focus, plain-hover-focus, atihover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(tun fi kilasi ohun elo ti o somọ silẹ, .text-hide)
    • visibility()
    • form-control-focus()

  • FifọIṣẹ ti a tunrukọ scale-color()lati shift-color()yago fun ikọlura pẹlu iṣẹ igbelowọn awọ tirẹ ti Sass.

  • box-shadowmixins bayi gba nulliye ati ju silẹ nonelati ọpọ ariyanjiyan. Wo # 30394 .

  • Mixin ni border-radius()bayi ni iye aiyipada.

Eto awọ

  • Eto awọ eyiti o ṣiṣẹ pẹlu color-level()ati $theme-color-intervalyọkuro ni ojurere ti eto awọ tuntun kan. Gbogbo lighten()ati darken()awọn iṣẹ inu koodu koodu wa ti rọpo nipasẹ tint-color()ati shade-color(). Awọn iṣẹ wọnyi yoo dapọ awọ pẹlu boya funfun tabi dudu dipo iyipada ina rẹ nipasẹ iye ti o wa titi. Ifẹ shift-color()boya tint tabi iboji awọ kan da lori boya paramita iwuwo rẹ jẹ rere tabi odi. Wo #30622 fun alaye diẹ sii.

  • Ti ṣafikun awọn tints tuntun ati awọn ojiji fun gbogbo awọ, pese awọn awọ lọtọ mẹsan fun awọ ipilẹ kọọkan, bi awọn oniyipada Sass tuntun.

  • Imudara iyatọ awọ. Ipin itansan awọ bumped lati 3: 1 si 4.5: 1 ati imudojuiwọn buluu, alawọ ewe, cyan, ati awọn awọ Pink lati rii daju iyatọ WCAG 2.1 AA. Tun yi awọ itansan awọ wa pada lati $gray-900si $black.

  • Lati ṣe atilẹyin eto awọ wa, a ti ṣafikun aṣa tuntun tint-color()ati shade-color()awọn iṣẹ lati dapọ awọn awọ wa ni deede.

Awọn imudojuiwọn akoj

  • Oju-iwe fifọ tuntun! Fi kun titun xxlbreakpoint fun 1400pxati si oke. Ko si awọn ayipada si gbogbo awọn aaye isinmi miiran.

  • Awọn gotters ti o ni ilọsiwaju. Awọn gọta ti wa ni bayi ṣeto ni awọn rems, ati pe o dín ju v4 ( 1.5rem, tabi nipa 24px, isalẹ lati 30px). Eyi ṣe deede awọn gọta ti eto akoj wa pẹlu awọn ohun elo aye aye.

    • Fikun kilasi titun gutter ( .g-*, .gx-*, ati .gy-*) lati ṣakoso awọn gogo petele / inaro, awọn gọta petele, ati awọn gọta inaro.
    • FifọTi lorukọmii .no-gutterslati .g-0baamu awọn ohun elo gutter tuntun.

  • Awọn ọwọn ko ti position: relativelo mọ, nitorinaa o le ni lati ṣafikun .position-relativesi diẹ ninu awọn eroja lati mu ihuwasi yẹn pada.

  • FifọSilẹ orisirisi awọn .order-*kilasi ti o igba lọ ajeku. A pese nikan .order-1lati .order-5jade kuro ninu apoti.

  • FifọSilẹ .mediapaati bi o ti le ṣe ni irọrun tun ṣe pẹlu awọn ohun elo. Wo #28265 ati oju-iwe awọn ohun elo irọrun fun apẹẹrẹ .

  • Fifọ bootstrap-grid.cssbayi nikan kan box-sizing: border-boxọwọn dipo ti atunto titobi apoti agbaye. Ni ọna yii, awọn aza akoj wa le ṣee lo ni awọn aaye diẹ sii laisi kikọlu.

  • $enable-grid-classesko si ohun to disables awọn iran ti eiyan kilasi mọ. Wo #29146.

  • Ṣe imudojuiwọn make-colmixin si aiyipada si awọn ọwọn dogba laisi iwọn kan pato.

Akoonu, Atunbere, ati be be lo

  • RFS ti ṣiṣẹ bayi nipasẹ aiyipada. Awọn akọle nipa lilofont-size()mixin yoo ṣatunṣe wọn laifọwọyifont-sizesi iwọn pẹlu wiwo wiwo. Ẹya yii ti jade tẹlẹ pẹlu v4.

  • FifọTi ṣe atunṣe iwe kikọ ifihan wa lati rọpo awọn $display-*oniyipada wa ati pẹlu $display-font-sizesmaapu Sass kan. Tun yọ awọn $display-*-weightoniyipada kọọkan kuro fun ẹyọkan $display-font-weightati atunṣe font-sizes.

  • Ṣe afikun awọn .display-*titobi akọle tuntun meji, .display-5ati .display-6.

  • Awọn ọna asopọ ti wa ni abẹlẹ nipasẹ aiyipada (kii ṣe lori rababa nikan), ayafi ti wọn ba jẹ apakan ti awọn paati kan pato.

  • Awọn tabili ti a tunṣe lati tun awọn aṣa wọn ṣe ati tun wọn kọ pẹlu awọn oniyipada CSS fun iṣakoso diẹ sii lori iselona.

  • FifọAwọn tabili itẹle ko jogun awọn aṣa mọ.

  • Fifọ .thead-lightati .thead-darkpe a sọ silẹ ni ojurere ti awọn .table-*kilasi iyatọ eyiti o le ṣee lo fun gbogbo awọn eroja tabili ( thead,,,,, tbodyati tfoot) .trthtd

  • FifọMixin ti table-row-variant()wa ni lorukọmii si table-variant()ati gba awọn paramita 2 nikan: $color(orukọ awọ) ati $value(koodu awọ). Awọ aala ati awọn awọ asẹnti jẹ iṣiro laifọwọyi da lori awọn oniyipada ifosiwewe tabili.

  • Pipin tabili cell padding oniyipada sinu -yati -x.

  • FifọSilẹ .pre-scrollablekilasi. Wo #29135

  • Fifọ .text-*Awọn ohun elo ko ṣe afikun fifin ati awọn ipinlẹ idojukọ si awọn ọna asopọ mọ. .link-*awọn kilasi oluranlọwọ le ṣee lo dipo. Wo #29267

  • FifọSilẹ .text-justifykilasi. Wo #29793

  • Tun petele aiyipada to padding-lefttan <ul>ati <ol>awọn eroja lati aiyipada ẹrọ aṣawakiri 40pxsi 2rem.

  • Ṣafikun $enable-smooth-scroll, eyiti o kan scroll-behavior: smoothni agbaye-ayafi fun awọn olumulo ti n beere fun idinku gbigbe nipasẹ prefers-reduced-motionibeere media. Wo # 31877

RTL

  • Itọnisọna petele awọn oniyipada pato, awọn ohun elo, ati awọn alapọpọ ti jẹ lorukọmii lati lo awọn ohun-ini ọgbọn bii awọn ti a rii ni awọn ipilẹ flexbox — fun apẹẹrẹ, startati endni dipo leftati right.

Awọn fọọmu

  • Ṣafikun awọn fọọmu lilefoofo tuntun! A ti ṣe igbega apẹẹrẹ awọn aami Lilefoofo si awọn paati fọọmu ti o ni atilẹyin ni kikun. Wo oju-iwe awọn aami Lilefoofo tuntun.

  • Fifọ Isopọ abinibi ati awọn eroja fọọmu aṣa. Awọn apoti ayẹwo, awọn redio, awọn yiyan, ati awọn igbewọle miiran ti o ni awọn kilasi abinibi ati aṣa ni v4 ti ni isọdọkan. Bayi fere gbogbo awọn eroja fọọmu wa jẹ aṣa patapata, pupọ julọ laisi iwulo HTML aṣa.

    • .custom-checkni bayi .form-check.
    • .custom-check.custom-switchni bayi .form-check.form-switch.
    • .custom-selectni bayi .form-select.
    • .custom-fileati .form-filepe a ti rọpo nipasẹ awọn aṣa aṣa lori oke .form-control.
    • .custom-rangeni bayi .form-range.
    • Silẹ abinibi .form-control-fileati .form-control-range.

  • FifọSilẹ .input-group-appendati .input-group-prepend. O le kan ṣafikun awọn bọtini ati .input-group-textbi awọn ọmọ taara ti awọn ẹgbẹ titẹ sii.

  • Radiọsi aala ti o ti pẹ ti o padanu lori ẹgbẹ titẹ sii pẹlu kokoro esi afọwọsi ni ipari nipasẹ fifi .has-validationkilasi afikun kun si awọn ẹgbẹ titẹ sii pẹlu afọwọsi.

  • Fifọ Awọn kilasi iṣeto-fọọmu kan ti o lọ silẹ fun eto akoj wa. Lo akoj ati awọn ohun elo wa dipo .form-group, .form-row, tabi .form-inline.

  • FifọAwọn aami fọọmu nilo bayi .form-label.

  • Fifọ .form-textno gun seto display, gbigba ọ laaye lati ṣẹda inline tabi dènà ọrọ iranlọwọ bi o ṣe fẹ nikan nipa yiyipada eroja HTML.

  • Awọn aami afọwọsi ko ni lilo si <select>s pẹlu multiple.

  • Atunto orisun Sass awọn faili labẹ scss/forms/, pẹlu awọn aza ẹgbẹ titẹ sii.

Awọn eroja

  • Awọn iye iṣọkan paddingfun awọn titaniji, akara akara, awọn kaadi, awọn isọ silẹ, awọn ẹgbẹ atokọ, awọn awoṣe, awọn agbejade, ati awọn imọran irinṣẹ lati da lori $spaceroniyipada wa. Wo # 30564 .

Accordion

Awọn itaniji

Baajii

  • FifọJu gbogbo .badge-*awọn kilasi awọ silẹ fun awọn ohun elo abẹlẹ (fun apẹẹrẹ, lo .bg-primarydipo .badge-primary).

  • FifọJu silẹ — lo .badge-pillohun .rounded-pillelo dipo.

  • FifọRaba kuro ati awọn aza idojukọ fun <a>ati <button>awọn eroja.

  • Alekun fifẹ aiyipada fun awọn baaji lati .25em/ .5emsi .35em/ .65em.

  • Irọrun irisi aifọwọyi ti burẹdi nipa yiyọ padding, background-color, ati border-radius.

  • Ṣafikun ohun-ini aṣa CSS tuntun --bs-breadcrumb-dividerfun isọdi irọrun laisi iwulo lati ṣajọ CSS.

Awọn bọtini

  • Fifọ Awọn bọtini yi pada , pẹlu awọn apoti ayẹwo tabi awọn redio, ko nilo JavaScript mọ ati ni isamisi tuntun. A ko nilo eroja ipari mọ, ṣafikun.btn-checksi<input>, ati ṣe alawẹ-meji pẹlu awọn.btnkilasi eyikeyi lori<label>. Wo #30650 . Awọn iwe aṣẹ fun eyi ti gbe lati oju-iwe Awọn bọtini wa si apakan Awọn fọọmu tuntun.

  • Fifọ Silẹ .btn-blockfun igbesi. Dipo lilo .btn-blocklori .btn, fi ipari si awọn bọtini rẹ pẹlu .d-gridati ohun .gap-*elo lati aaye wọn bi o ti nilo. Yipada si awọn kilasi idahun fun paapaa iṣakoso diẹ sii lori wọn. Ka awọn iwe aṣẹ fun diẹ ninu awọn apẹẹrẹ.

  • Ṣe imudojuiwọn wa button-variant()ati button-outline-variant()awọn apopọ lati ṣe atilẹyin awọn paramita afikun.

  • Awọn bọtini imudojuiwọn lati rii daju iyatọ ti o pọ si lori rababa ati awọn ipinlẹ ti nṣiṣe lọwọ.

  • Awọn bọtini alaabo ni bayi pointer-events: none;.

Kaadi

  • FifọSilẹ .card-deckni ojurere ti wa akoj. Pa awọn kaadi rẹ sinu awọn kilasi ọwọn ki o ṣafikun .row-cols-*eiyan obi lati tun awọn deki kaadi ṣe (ṣugbọn pẹlu iṣakoso diẹ sii lori titete idahun).

  • FifọSilẹ .card-columnsni ojurere ti Masonry. Wo # 28922 .

  • FifọRọpo .cardaccordion ipilẹ pẹlu paati Accordion tuntun kan .

  • Ṣe afikun .carousel-darkiyatọ tuntun fun ọrọ dudu, awọn idari, ati awọn olufihan (o dara fun awọn ipilẹ ti o fẹẹrẹfẹ).

  • Awọn aami chevron rọpo fun awọn iṣakoso carousel pẹlu awọn SVG tuntun lati Awọn aami Bootstrap .

Bọtini pipade

  • FifọFun lorukọmii .closesi .btn-closefun orukọ jeneriki ti o kere si.

  • Awọn bọtini pipade ni bayi lo background-image(SVG ti a fi sii) dipo kan &times;ninu HTML, gbigba fun isọdi irọrun laisi iwulo lati fi ọwọ kan isamisi rẹ.

  • Ti ṣafikun iyatọ tuntun .btn-close-whiteti o lo filter: invert(1)lati mu awọn aami ifasilẹ itansan giga ṣiṣẹ lodi si awọn ipilẹ dudu.

Subu

  • Anchoring yi lọ kuro fun accordions.

  • Ṣe afikun .dropdown-menu-darkiyatọ tuntun ati awọn oniyipada ti o somọ fun awọn sisọ silẹ dudu ti o beere.

  • Fi kun titun oniyipada fun $dropdown-padding-x.

  • Ṣe okunkun pipin sisọ silẹ fun ilọsiwaju itansan.

  • FifọGbogbo awọn iṣẹlẹ fun sisọ silẹ ti wa ni ṣiṣi silẹ ni bayi lori bọtini toggle silẹ silẹ ati lẹhinna bubbled soke si nkan obi.

  • Awọn akojọ aṣayan silẹ ni bayi ti data-bs-popper="static"ṣeto abuda kan nigbati ipo sisọ silẹ jẹ aimi ati data-bs-popper="none"nigbati sisọ silẹ ba wa ni navbar. Eyi jẹ afikun nipasẹ JavaScript wa o ṣe iranlọwọ fun wa lati lo awọn aṣa ipo aṣa laisi kikọlu pẹlu ipo Popper.

  • FifọAṣayan silẹ flipfun ohun itanna silẹ ni ojurere ti atunto Popper abinibi. O le mu ihuwasi yiyi kuro ni bayi nipa gbigbe orun sofo fun fallbackPlacementsaṣayan ni iyipada isipade .

  • Awọn akojọ aṣayan silẹ le jẹ titẹ ni bayi pẹlu autoCloseaṣayan tuntun lati mu ihuwasi isunmọ aifọwọyi . O le lo aṣayan yii lati gba titẹ inu tabi ita akojọ aṣayan silẹ lati jẹ ki o ni ibaraẹnisọrọ.

  • Dropdowns bayi atilẹyin .dropdown-items we ni <li>s.

Jumbotron

Ẹgbẹ akojọ

  • Ṣafikun awọn nulloniyipada titun fun font-size, font-weight, color, ati :hover colorsi .nav-linkkilasi naa.
  • FifọNavbars bayi nilo eiyan laarin (lati jẹ ki awọn ibeere aye di irọrun ati CSS nilo).

Offcanfasi

Oju-iwe

  • Awọn ọna asopọ oju-iwe ni bayi ni isọdi margin-leftti o yika ni agbara ni gbogbo awọn igun nigbati a yapa si ara wọn.

  • Ṣafikun transitions si awọn ọna asopọ pagination.

Popovers

  • Fifọ.arrowFun lorukọmii si ninu awoṣe popover .popover-arrowaiyipada wa.

  • whiteListAṣayan fun lorukọmii si allowList.

Spinners

  • Spinners bayi ola prefers-reduced-motion: reducenipa fa fifalẹ awọn ohun idanilaraya. Wo # 31882 .

  • Imudara spinner inaro titete.

Toasts

  • Toasts le wa ni ipo ni bayi .toast-containerpẹlu iranlọwọ ti awọn ohun elo ipo ipo .

  • Yipada iye akoko tositi aiyipada si awọn aaya 5.

  • Kuro overflow: hiddenlati tositi ati ki o rọpo pẹlu to dara border-radiuss pẹlu calc()awọn iṣẹ.

Awọn imọran irinṣẹ

  • FifọTi lorukọmii .arrowsi .tooltip-arrowninu awoṣe ọpa irinṣẹ aifọwọyi wa.

  • FifọAwọn aiyipada iye fun awọn ti fallbackPlacementswa ni yipada si ['top', 'right', 'bottom', 'left']fun dara placement ti popper eroja.

  • FifọwhiteListAṣayan fun lorukọmii si allowList.

Awọn ohun elo

  • FifọṢe lorukọmii ọpọlọpọ awọn ohun elo lati lo awọn orukọ ohun-ini ọgbọn dipo awọn orukọ itọsọna pẹlu afikun atilẹyin RTL:

    • Fun lorukọmii .left-*ati .right-*si .start-*ati .end-*.
    • Fun lorukọmii .float-leftati .float-rightsi .float-startati .float-end.
    • Fun lorukọmii .border-leftati .border-rightsi .border-startati .border-end.
    • Fun lorukọmii .rounded-leftati .rounded-rightsi .rounded-startati .rounded-end.
    • Fun lorukọmii .ml-*ati .mr-*si .ms-*ati .me-*.
    • Fun lorukọmii .pl-*ati .pr-*si .ps-*ati .pe-*.
    • Fun lorukọmii .text-leftati .text-rightsi .text-startati .text-end.

  • FifọAlaabo awọn ala odi nipasẹ aiyipada.

  • Fi kun titun .bg-bodykilasi fun ni kiakia ṣeto awọn <body>'s isale si afikun eroja.

  • Ṣafikun awọn ohun elo ipo tuntun fun top, right, bottom, ati left. Awọn iye pẹlu 0, 50%, ati 100%fun ohun-ini kọọkan.

  • Ti ṣafikun tuntun .translate-middle-x& .translate-middle-yawọn ohun elo si petele tabi inaro aarin idi/awọn eroja ipo ti o wa titi.

  • Ti ṣafikun awọn border-widthohun elo tuntun .

  • FifọFun lorukọmii .text-monospacesi .font-monospace.

  • FifọYọ kuro .text-hidebi o ṣe jẹ ọna igba atijọ fun fifipamọ ọrọ ti ko yẹ ki o lo mọ.

  • Awọn .fs-*ohun elo ti a ṣafikun fun font-sizeawọn ohun elo (pẹlu RFS ṣiṣẹ). Iwọnyi lo iwọn kanna gẹgẹbi awọn akọle aiyipada HTML (1-6, nla si kekere), ati pe o le ṣe atunṣe nipasẹ maapu Sass.

  • FifọAwọn ohun .font-weight-*elo fun lorukọmii bi .fw-*fun kukuru ati aitasera.

  • FifọAwọn ohun .font-style-*elo fun lorukọmii bi .fst-*fun kukuru ati aitasera.

  • Fikun -un .d-gridlati ṣafihan awọn ohun elo ati awọn gapohun elo tuntun ( .gap) fun Akoj CSS ati awọn ipalemo flexbox.

  • FifọYọ kuro .rounded-smati rounded-lg, ati ṣafihan iwọn tuntun ti awọn kilasi, .rounded-0si .rounded-3. Wo # 31687 .

  • Awọn ohun elo tuntun ti a line-heightṣafikun: .lh-1, .lh-sm, .lh-baseati .lh-lg. Wo nibi .

  • Ti gbe ohun .d-noneelo naa sinu CSS wa lati fun ni iwuwo diẹ sii lori awọn ohun elo ifihan miiran.

  • Ṣe afikun .visually-hidden-focusableoluranlọwọ lati tun ṣiṣẹ lori awọn apoti, lilo :focus-within.

Awọn oluranlọwọ

  • Fifọ Awọn oluranlọwọ ifibọ idahun ti ni lorukọ si awọn oluranlọwọ ipin pẹlu awọn orukọ kilasi tuntun ati awọn ihuwasi ilọsiwaju, bakanna bi oniyipada CSS ti o ṣe iranlọwọ.

    • Awọn kilasi ti ni lorukọ lati yipada bysi xni ipin abala. Fun apẹẹrẹ, .ratio-16by9ni bayi .ratio-16x9.
    • A ti sọ silẹ .embed-responsive-itemati yiyan ẹgbẹ eroja ni ojurere ti yiyan ti o rọrun .ratio > *. Ko si kilasi diẹ sii ti a nilo, ati oluranlọwọ ipin bayi n ṣiṣẹ pẹlu eyikeyi ẹya HTML.
    • Maapu $embed-responsive-aspect-ratiosSass ti ni lorukọ si $aspect-ratiosati pe awọn iye rẹ ti jẹ irọrun lati ni orukọ kilasi ati ipin ogorun bi key: valuebata.
    • Awọn oniyipada CSS ti wa ni ipilẹṣẹ ati pe o wa pẹlu iye kọọkan ninu maapu Sass. Ṣatunṣe --bs-aspect-ratiooniyipada lori .ratiolati ṣẹda ipin abala aṣa eyikeyi .

  • Fifọ Awọn kilasi “Oluka iboju” ti wa ni bayi awọn kilasi “farasin ni wiwo” .

    • Yi faili Sass pada lati scss/helpers/_screenreaders.scsssiscss/helpers/_visually-hidden.scss
    • Fun lorukọmii .sr-onlyati .sr-only-focusablesi .visually-hiddenati.visually-hidden-focusable
    • Fun lorukọmii sr-only()ati sr-only-focusable()dapọ si visually-hidden()ati visually-hidden-focusable().

  • bootstrap-utilities.cssbayi tun pẹlu awọn oluranlọwọ wa. Awọn oluranlọwọ ko nilo lati gbe wọle ni awọn kikọ aṣa mọ.

JavaScript

  • Igbẹkẹle jQuery silẹ ati atunkọ awọn afikun lati wa ni JavaScript deede.

  • FifọAwọn abuda data fun gbogbo awọn afikun JavaScript ti wa ni orukọ ni bayi lati ṣe iranlọwọ ṣe iyatọ iṣẹ ṣiṣe Bootstrap lati awọn ẹgbẹ kẹta ati koodu tirẹ. Fun apẹẹrẹ, a lo data-bs-toggledipo data-toggle.

  • Gbogbo awọn afikun le gba yiyan CSS kan bi ariyanjiyan akọkọ. O le kọja nkan DOM kan tabi eyikeyi yiyan CSS to wulo lati ṣẹda apẹẹrẹ tuntun ti ohun itanna:

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

  • popperConfigle ti wa ni kọja bi iṣẹ kan ti o gba Bootstrap aiyipada Popper konfigi bi ohun ariyanjiyan, ki o le dapọ yi aiyipada iṣeto ni ọna rẹ. Kan si awọn isọ silẹ, popovers, ati awọn imọran irinṣẹ.

  • Awọn aiyipada iye fun awọn ti fallbackPlacementswa ni yipada si ['top', 'right', 'bottom', 'left']fun dara placement ti Popper eroja. Kan si awọn isọ silẹ, popovers, ati awọn imọran irinṣẹ.

  • Isalẹmọ kuro lati awọn ọna aimi gbangba bi _getInstance()→ getInstance().