Lumaktaw sa pangunahing nilalaman Lumaktaw sa docs navigation
in English

Lumilipat sa v5

Subaybayan at suriin ang mga pagbabago sa Bootstrap source file, dokumentasyon, at mga bahagi upang matulungan kang mag-migrate mula v4 hanggang v5.

Dependencies

  • Nahulog ang jQuery.
  • Na-upgrade mula Popper v1.x patungong Popper v2.x.
  • Pinalitan ang Libsass ng Dart Sass dahil hindi na ginagamit ang aming Sass compiler na ibinigay sa Libsass.
  • Lumipat mula sa Jekyll patungong Hugo para sa pagbuo ng aming dokumentasyon

Suporta sa browser

  • Inalis ang Internet Explorer 10 at 11
  • Binaba ang Microsoft Edge < 16 (Legacy Edge)
  • Binaba ang Firefox < 60
  • Nalaglag ang Safari < 12
  • Nahulog ang iOS Safari < 12
  • Nahulog ang Chrome < 60

Mga pagbabago sa dokumentasyon

  • Muling idinisenyong homepage, layout ng mga dokumento, at footer.
  • Nagdagdag ng bagong Parcel guide .
  • Nagdagdag ng bagong seksyong I-customize , pinapalitan ang page ng Theming ng v4 , ng mga bagong detalye sa Sass, mga opsyon sa pandaigdigang configuration, mga scheme ng kulay, mga variable ng CSS, at higit pa.
  • Muling inayos ang lahat ng dokumentasyon ng form sa bagong seksyon ng Mga Form , na pinaghiwa-hiwalay ang nilalaman sa mga mas nakatutok na pahina.
  • Katulad nito, na-update ang seksyong Layout , para mas malinaw na i-flesh ang grid content.
  • Pinalitan ang pangalan ng "Navs" component page sa "Navs & Tabs".
  • Pinalitan ang pangalan ng page na “Checks” sa “Checks at radios”.
  • Muling idinisenyo ang navbar at nagdagdag ng bagong subnav upang gawing mas madali ang paglibot sa aming mga site at mga bersyon ng doc.
  • Nagdagdag ng bagong keyboard shortcut para sa field ng paghahanap: Ctrl + /.

Sass

  • Inalis namin ang mga default na pagsasanib ng mapa ng Sass upang gawing mas madali ang pag-alis ng mga kalabisan na halaga. Tandaan na kailangan mo na ngayong tukuyin ang lahat ng mga halaga sa mga mapa ng Sass tulad ng $theme-colors. Tingnan kung paano haharapin ang mga mapa ng Sass .

  • NasiraPinalitan ang pangalan ng color-yiq()function at mga nauugnay na variable color-contrast()dahil hindi na ito nauugnay sa colorspace ng YIQ. Tingnan ang #30168.

    • $yiq-contrasted-thresholday pinalitan ng pangalan sa $min-contrast-ratio.
    • $yiq-text-darkat $yiq-text-lightayon sa pagkakabanggit ay pinalitan ng pangalan sa $color-contrast-darkat $color-contrast-light.
  • NasiraAng mga parameter ng mixin ng query ng media ay nagbago para sa isang mas lohikal na diskarte.

    • media-breakpoint-down()ginagamit ang breakpoint mismo sa halip na ang susunod na breakpoint (hal., media-breakpoint-down(lg)sa halip na mga media-breakpoint-down(md)target na viewport na mas maliit kaysa sa lg).
    • Katulad nito, ginagamit din ng pangalawang parameter sa media-breakpoint-between()ang breakpoint mismo sa halip na ang susunod na breakpoint (hal., media-between(sm, lg)sa halip na i- media-breakpoint-between(sm, md)target ang mga viewport sa pagitan ng smat lg).
  • NasiraInalis ang mga istilo ng pag-print at $enable-print-stylesvariable. Ang mga klase sa pag-print ng display ay nasa paligid pa rin. Tingnan ang #28339 .

  • NasiraNahulog ang color(), theme-color(), at gray()mga function na pabor sa mga variable. Tingnan ang #29083 .

  • NasiraPinalitan ang pangalan ng theme-color-level()function color-level()at tumatanggap na ngayon ng anumang kulay na gusto mo sa halip na mga $theme-colorkulay lamang. Tingnan ang #29083 Mag- ingat: color-level() sa kalaunan ay ibinaba sa v5.0.0-alpha3.

  • NasiraPinalitan ng pangalan $enable-prefers-reduced-motion-media-queryat $enable-pointer-cursor-for-buttonssa $enable-reduced-motionat $enable-button-pointerspara sa maikli.

  • NasiraInalis ang bg-gradient-variant()mixin. Gamitin ang .bg-gradientklase upang magdagdag ng mga gradient sa mga elemento sa halip na sa mga nabuong .bg-gradient-*klase.

  • Nasira Inalis ang dating hindi na ginagamit na mga mix:

    • hover, hover-focus, plain-hover-focus, athover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(tinanggal din ang nauugnay na klase ng utility, .text-hide)
    • visibility()
    • form-control-focus()
  • NasiraPinalitan ang pangalan ng scale-color()function upang shift-color()maiwasan ang banggaan sa sariling color scaling function ni Sass.

  • box-shadowpinapayagan na ngayon ng mga mixin ang mga nullhalaga at bumaba nonemula sa maraming argumento. Tingnan ang #30394 .

  • Ang border-radius()mixin ay mayroon na ngayong default na halaga.

Sistema ng kulay

  • Ang sistema ng kulay na nagtrabaho color-level()at $theme-color-intervalinalis pabor sa isang bagong sistema ng kulay. Ang lahat lighten()at darken()mga function sa aming codebase ay pinapalitan ng tint-color()at shade-color(). Ihahalo ng mga function na ito ang kulay sa puti o itim sa halip na baguhin ang liwanag nito sa isang nakapirming halaga. Ang shift-color()tint o lilim ng isang kulay depende sa kung positibo o negatibo ang parameter ng timbang nito. Tingnan ang #30622 para sa higit pang mga detalye.

  • Nagdagdag ng mga bagong tints at shade para sa bawat kulay, na nagbibigay ng siyam na magkakahiwalay na kulay para sa bawat base na kulay, bilang mga bagong Sass variable.

  • Pinahusay na contrast ng kulay. Bumped color contrast ratio mula 3:1 hanggang 4.5:1 at na-update ang asul, berde, cyan, at pink na mga kulay para matiyak ang WCAG 2.1 AA contrast. Binago din ang aming kulay na contrast color mula $gray-900sa $black.

  • Upang suportahan ang aming system ng kulay, nagdagdag kami ng bagong custom tint-color()at shade-color()mga function upang paghaluin ang aming mga kulay nang naaangkop.

Mga update sa grid

  • Bagong breakpoint! Nagdagdag ng bagong xxlbreakpoint para sa 1400pxat pataas. Walang pagbabago sa lahat ng iba pang breakpoint.

  • Pinahusay na mga kanal. Ang mga kanal ay nakatakda na ngayon sa mga rem, at mas makitid kaysa sa v4 ( 1.5rem, o mga 24px, pababa mula sa 30px). Inihanay nito ang mga gutter ng aming grid system sa aming mga spacing utilities.

    • Nagdagdag ng bagong klase ng gutter ( .g-*, .gx-*, at .gy-*) para kontrolin ang horizontal/vertical gutters, horizontal gutters, at vertical gutters.
    • NasiraPinalitan ng pangalan .no-guttersupang .g-0tumugma sa mga bagong utilidad ng gutter.
  • Hindi na nailapat ang mga column position: relative, kaya maaaring kailanganin mong magdagdag .position-relativesa ilang elemento upang maibalik ang gawi na iyon.

  • NasiraNag-drop ng ilang mga .order-*klase na madalas na hindi nagamit. Nagbibigay lang kami ngayon .order-1ng .order-5out of the box.

  • NasiraNahulog ang .mediabahagi dahil madali itong ma-replicate sa mga utility. Tingnan ang #28265 at ang pahina ng flex utilities para sa isang halimbawa .

  • Nasira bootstrap-grid.cssnalalapat lang ngayon box-sizing: border-boxsa column sa halip na i-reset ang global box-sizing. Sa ganitong paraan, magagamit ang aming mga istilo ng grid sa mas maraming lugar nang walang panghihimasok.

  • $enable-grid-classeshindi na pinapagana ang pagbuo ng mga klase ng container. Tingnan ang #29146.

  • Na -update ang make-colmixin sa default sa mga pantay na column na walang tinukoy na laki.

Nilalaman, I-reboot, atbp

  • Ang RFS ay pinagana na ngayon bilang default. font-size()Awtomatikong isasaayos ng mgaheading na gumagamit ngfont-sizesa sukat sa viewport. Ang feature na ito ay dating nag-opt-in gamit ang v4.

  • NasiraIno-overhaul ang aming display typography upang palitan ang aming $display-*mga variable at ng isang $display-font-sizesSass na mapa. Inalis din ang mga indibidwal na $display-*-weightvariable para sa isang solong $display-font-weightat inayos na font-sizes.

  • Nagdagdag ng dalawang bagong .display-*laki ng heading, .display-5at .display-6.

  • Ang mga link ay may salungguhit bilang default (hindi lamang sa pag-hover), maliban kung bahagi sila ng mga partikular na bahagi.

  • Muling idisenyo ang mga talahanayan upang i-refresh ang kanilang mga istilo at muling itayo ang mga ito gamit ang mga variable ng CSS para sa higit na kontrol sa pag-istilo.

  • NasiraHindi na nagmamana ng mga istilo ang mga nested table.

  • Nasira .thead-lightat .thead-darkibinagsak pabor sa mga .table-*variant na klase na maaaring magamit para sa lahat ng elemento ng talahanayan ( thead, tbody, tfoot, tr, that td).

  • NasiraAng table-row-variant()mixin ay pinalitan ng pangalan table-variant()at tumatanggap lamang ng 2 parameter: $color(pangalan ng kulay) at $value(code ng kulay). Ang kulay ng hangganan at mga kulay ng accent ay awtomatikong kinakalkula batay sa mga variable ng table factor.

  • Hatiin ang mga variable ng table cell padding sa -yat -x.

  • NasiraBumagsak ang .pre-scrollableklase. Tingnan ang #29135

  • Nasira .text-*Ang mga utility ay hindi na nagdaragdag ng mga estado ng hover at focus sa mga link. .link-*maaaring gamitin sa halip ang mga klase ng helper. Tingnan ang #29267

  • NasiraBumagsak ang .text-justifyklase. Tingnan ang #29793

  • Nasira <hr>ginagamit na ngayon ng mga elemento heightsa halip borderna mas mahusay na suportahan ang sizekatangian. Nagbibigay-daan din ito sa paggamit ng mga kagamitan sa padding upang lumikha ng mas makapal na mga divider (hal., <hr class="py-1">).

  • I- reset ang default na pahalang padding-leftsa <ul>at <ol>mga elemento mula sa default ng browser 40pxsa 2rem.

  • Idinagdag $enable-smooth-scroll, na nalalapat scroll-behavior: smoothsa buong mundo—maliban sa mga user na humihiling ng pinababang galaw sa pamamagitan ng prefers-reduced-motionmedia query. Tingnan ang #31877

RTL

  • Ang mga variable, utility, at mixin na partikular sa pahalang na direksyon ay pinalitan ng pangalan upang gumamit ng mga lohikal na katangian tulad ng makikita sa mga layout ng flexbox—hal, startat endbilang kapalit ng leftat right.

Mga porma

  • Nagdagdag ng mga bagong lumulutang na form! Na-promote namin ang halimbawa ng mga Floating label sa ganap na suportadong mga bahagi ng form. Tingnan ang bagong Floating label na page.

  • Nasira Pinagsama-samang native at custom na mga elemento ng form. Ang mga checkbox, radyo, mga pili, at iba pang mga input na may mga native at custom na klase sa v4 ay pinagsama-sama. Ngayon halos lahat ng aming mga elemento ng form ay ganap na custom, karamihan ay hindi nangangailangan ng custom na HTML.

    • .custom-checkay ngayon .form-check.
    • .custom-check.custom-switchay ngayon .form-check.form-switch.
    • .custom-selectay ngayon .form-select.
    • .custom-fileat .form-filenapalitan ng mga custom na istilo sa ibabaw ng .form-control.
    • .custom-rangeay ngayon .form-range.
    • Nahulog ang katutubong .form-control-fileat .form-control-range.
  • NasiraNahulog .input-group-appendat .input-group-prepend. Maaari ka na ngayong magdagdag ng mga pindutan at .input-group-textbilang direktang mga anak ng mga pangkat ng input.

  • Ang matagal nang Nawawalang border radius sa input group na may validation feedback bug ay sa wakas ay naayos sa pamamagitan ng pagdaragdag ng karagdagang .has-validationklase sa mga input group na may validation.

  • Nasira Nag-drop ng mga klase ng layout na tukoy sa form para sa aming grid system. Gamitin ang aming grid at mga utility sa halip na .form-group, .form-row, o .form-inline.

  • NasiraAng mga label ng form ay nangangailangan na ngayon ng .form-label.

  • Nasira .form-texthindi na sets display, na nagbibigay-daan sa iyong lumikha ng inline o i-block ang text ng tulong ayon sa gusto mo sa pamamagitan lamang ng pagbabago ng HTML element.

  • Ang mga icon ng pagpapatunay ay hindi na inilalapat sa <select>s na may multiple.

  • Muling inayos ang pinagmulang Sass file sa ilalim ng scss/forms/, kabilang ang mga estilo ng pangkat ng input.


Mga bahagi

  • Pinag -isang paddingvalue para sa mga alerto, breadcrumb, card, dropdown, list group, modal, popover, at tooltip na ibabatay sa aming $spacervariable. Tingnan ang #30564 .

Akordyon

Mga alerto

  • Ang mga alerto ay mayroon na ngayong mga halimbawa na may mga icon .

  • Inalis ang mga custom na istilo para sa <hr>s sa bawat alerto dahil ginagamit na nila ang currentColor.

Mga badge

  • NasiraInalis ang lahat ng mga .badge-*klase ng kulay para sa mga kagamitan sa background (hal., gamitin .bg-primarysa halip na .badge-primary).

  • NasiraNahulog .badge-pill—gamitin na lang ang .rounded-pillutility.

  • NasiraInalis ang mga estilo ng hover at focus para sa <a>at <button>mga elemento.

  • Nadagdagang default na padding para sa mga badge mula sa .25em/ .5emhanggang .35em/ .65em.

  • Pinasimple ang default na hitsura ng mga breadcrumb sa pamamagitan ng pag-alis ng padding, background-color, at border-radius.

  • Nagdagdag ng bagong CSS custom na ari-arian --bs-breadcrumb-dividerpara sa madaling pag-customize nang hindi na kailangang muling mag-compile ng CSS.

Mga Pindutan

  • Nasira Ang mga toggle button , na may mga checkbox o radyo, ay hindi na nangangailangan ng JavaScript at may bagong markup. Hindi na kami nangangailangan ng elemento ng pambalot, idagdag.btn-checksa<input>, at ipares ito sa anumang.btnmga klase sa<label>. Tingnan ang #30650 . Ang mga doc para dito ay lumipat mula sa aming pahina ng Mga Pindutan patungo sa bagong seksyon ng Mga Form.

  • Nasira Nahulog .btn-blockpara sa mga utility. Sa halip na gamitin .btn-blocksa .btn, balutin ang iyong mga button .d-gridng at isang .gap-*utility upang i-space ang mga ito kung kinakailangan. Lumipat sa mga tumutugong klase para sa higit pang kontrol sa mga ito. Basahin ang mga doc para sa ilang halimbawa.

  • Na -update ang aming button-variant()at button-outline-variant()mixins upang suportahan ang mga karagdagang parameter.

  • Mga na-update na button para matiyak ang tumaas na contrast sa hover at mga aktibong estado.

  • Ang mga naka-disable na button ay mayroon na ngayong pointer-events: none;.

Card

  • NasiraBumagsak .card-deckpabor sa aming grid. I-wrap ang iyong mga card sa mga klase ng column at magdagdag ng parent .row-cols-*container para muling likhain ang mga card deck (ngunit may higit na kontrol sa tumutugon na pagkakahanay).

  • NasiraBumagsak .card-columnssa pabor ng Masonry. Tingnan ang #28922 .

  • NasiraPinalitan ang .cardnakabatay na akurdyon ng isang bagong bahagi ng Accordion .

  • Nagdagdag ng bagong .carousel-darkvariant para sa madilim na text, mga kontrol, at mga indicator (mahusay para sa mas magaan na background).

  • Pinalitan ang mga icon ng chevron para sa mga kontrol ng carousel ng mga bagong SVG mula sa Mga Icon ng Bootstrap .

Isara ang pindutan

  • NasiraPinalitan .closeng pangalan .btn-closepara sa hindi gaanong generic na pangalan.

  • Gumagamit na ngayon ang mga close button ng background-image(naka-embed na SVG) sa halip na isang &times;sa HTML, na nagbibigay-daan para sa mas madaling pag-customize nang hindi na kailangang pindutin ang iyong markup.

  • Nagdagdag ng bagong .btn-close-whitevariant na ginagamit filter: invert(1)upang paganahin ang mas mataas na contrast para i-dismiss ang mga icon laban sa mas madidilim na background.

Pagbagsak

  • Inalis ang scroll anchoring para sa mga accordion.
  • Nagdagdag ng bagong .dropdown-menu-darkvariant at nauugnay na mga variable para sa on-demand na dark dropdown.

  • Nagdagdag ng bagong variable para sa $dropdown-padding-x.

  • Pinadilim ang dropdown divider para sa pinahusay na contrast.

  • NasiraAng lahat ng mga kaganapan para sa dropdown ay nati-trigger na ngayon sa dropdown na toggle button at pagkatapos ay bubula hanggang sa parent na elemento.

  • Ang mga dropdown na menu ay mayroon na ngayong data-bs-popper="static"nakatakdang katangian kapag ang pagpoposisyon ng dropdown ay static at data-bs-popper="none"kapag ang dropdown ay nasa navbar. Ito ay idinagdag ng aming JavaScript at tinutulungan kaming gumamit ng mga custom na istilo ng posisyon nang hindi nakakasagabal sa pagpoposisyon ng Popper.

  • NasiraNa- drop flipna opsyon para sa dropdown na plugin na pabor sa native na configuration ng Popper. Maaari mo na ngayong i-disable ang flipping behavior sa pamamagitan ng pagpasa ng isang bakanteng array para sa fallbackPlacementsopsyon sa flip modifier.

  • Ang mga dropdown na menu ay maaari na ngayong ma-click gamit ang isang bagong autoCloseopsyon upang mahawakan ang awtomatikong pagsasara ng gawi . Maaari mong gamitin ang opsyong ito upang tanggapin ang pag-click sa loob o labas ng dropdown na menu upang gawin itong interactive.

  • Sinusuportahan na ngayon ng mga dropdown ang .dropdown-items na nakabalot sa <li>s.

Jumbotron

Listahan ng pangkat

  • Nagdagdag ng mga bagong nullvariable para sa font-size, font-weight, color, at :hover colorsa .nav-linkklase.
  • NasiraNangangailangan na ngayon ang mga Navbar ng lalagyan sa loob (upang lubos na pasimplehin ang mga kinakailangan sa espasyo at kinakailangan ang CSS).

Offcanvas

Pagbilang ng pahina

  • Ang mga link sa pagbilang ng pahina ay mayroon na ngayong nako-customize margin-leftna dynamic na bilugan sa lahat ng sulok kapag pinaghiwalay sa isa't isa.

  • Nagdagdag ng transitions sa mga link ng pagination.

Mga Popover

  • NasiraPinalitan ng pangalan .arrowsa .popover-arrowaming default na template ng popover.

  • Pinalitan ang pangalan ng whiteListopsyon sa allowList.

Mga Spinner

  • Pinarangalan na ngayon prefers-reduced-motion: reduceng mga Spinner ang pagpapabagal ng mga animation. Tingnan ang #31882 .

  • Pinahusay na spinner vertical alignment.

Mga toast

  • Ang mga toast ay maaari na ngayong ilagay sa isang sa tulong ng mga kagamitan sa pagpoposisyon ..toast-container

  • Binago ang default na tagal ng toast sa 5 segundo.

  • Inalis overflow: hiddenmula sa mga toast at pinalitan ng tamang border-radiuss ng mga calc()function.

Mga tooltip

  • NasiraPinalitan .arrowng pangalan .tooltip-arrowsa aming default na template ng tooltip.

  • NasiraAng default na halaga para sa fallbackPlacementsay binago sa ['top', 'right', 'bottom', 'left']para sa mas mahusay na paglalagay ng mga elemento ng popper.

  • NasiraPinalitan ang pangalan ng whiteListopsyon sa allowList.

Mga utility

  • NasiraPinalitan ang pangalan ng ilang mga utility upang gumamit ng mga lohikal na pangalan ng ari-arian sa halip na mga pangalan ng direksyon kasama ang pagdaragdag ng suporta sa RTL:

    • Pinalitan ng pangalan .left-*at .right-*sa .start-*at .end-*.
    • Pinalitan ng pangalan .float-leftat .float-rightsa .float-startat .float-end.
    • Pinalitan ng pangalan .border-leftat .border-rightsa .border-startat .border-end.
    • Pinalitan ng pangalan .rounded-leftat .rounded-rightsa .rounded-startat .rounded-end.
    • Pinalitan ng pangalan .ml-*at .mr-*sa .ms-*at .me-*.
    • Pinalitan ng pangalan .pl-*at .pr-*sa .ps-*at .pe-*.
    • Pinalitan ng pangalan .text-leftat .text-rightsa .text-startat .text-end.
  • NasiraNaka-disable ang mga negatibong margin bilang default.

  • Nagdagdag ng bagong .bg-bodyklase para sa mabilis na pagtatakda ng <body>background ni sa mga karagdagang elemento.

  • Nagdagdag ng mga bagong kagamitan sa posisyon para sa top, right, bottom, at left. Kasama sa mga value ang 0, 50%, at 100%para sa bawat property.

  • Nagdagdag ng bago .translate-middle-xat .translate-middle-ymga utilidad sa pahalang o patayo na nakasentro sa ganap/nakaayos na mga elementong nakaposisyon.

  • Nagdagdag ng mga bagong border-widthutility .

  • NasiraPinalitan ng pangalan .text-monospacesa .font-monospace.

  • NasiraInalis .text-hidedahil isa itong lumang paraan para sa pagtatago ng text na hindi na dapat gamitin.

  • Nagdagdag .fs-*ng mga utility para sa font-sizemga utility (na may RFS enabled). Gumagamit ang mga ito ng parehong sukat gaya ng mga default na heading ng HTML (1-6, malaki hanggang maliit), at maaaring mabago sa pamamagitan ng Sass map.

  • NasiraPinalitan ang pangalan .font-weight-*ng mga utility .fw-*para sa kaiklian at pagkakapare-pareho.

  • NasiraPinalitan ang pangalan .font-style-*ng mga utility .fst-*para sa kaiklian at pagkakapare-pareho.

  • Idinagdag .d-gridupang ipakita ang mga utility at bagong gaputility ( .gap) para sa CSS Grid at flexbox na mga layout.

  • NasiraInalis .rounded-smat rounded-lg, at ipinakilala ang isang bagong sukat ng mga klase, .rounded-0sa .rounded-3. Tingnan ang #31687 .

  • Nagdagdag ng mga bagong line-heightutility: .lh-1, .lh-sm, .lh-baseat .lh-lg. Tingnan dito .

  • Inilipat ang .d-noneutility sa aming CSS upang bigyan ito ng higit na timbang kaysa sa iba pang mga utility sa display.

  • Pinahaba ang .visually-hidden-focusablekatulong para magtrabaho din sa mga lalagyan, gamit ang :focus-within.

Mga katulong

  • Nasira Ang mga tumutugon na naka-embed na katulong ay pinalitan ng pangalan sa ratio ng mga katulong na may mga bagong pangalan ng klase at pinahusay na pag-uugali, pati na rin ang isang kapaki-pakinabang na variable ng CSS.

    • Ang mga klase ay pinalitan ng pangalan upang mapalitan bysa xaspect ratio. Halimbawa, .ratio-16by9ngayon ay .ratio-16x9.
    • Inalis namin ang .embed-responsive-itemat element group selector pabor sa isang mas simpleng .ratio > *selector. Wala nang klase ang kailangan, at gumagana na ngayon ang ratio helper sa anumang elemento ng HTML.
    • Ang $embed-responsive-aspect-ratiosmapa ng Sass ay pinalitan ng pangalan $aspect-ratiosat ang mga halaga nito ay pinasimple upang isama ang pangalan ng klase at ang porsyento bilang key: valuepares.
    • Ang mga variable ng CSS ay nabuo na ngayon at kasama para sa bawat halaga sa mapa ng Sass. Baguhin ang --bs-aspect-ratiovariable sa .ratioupang lumikha ng anumang custom na aspect ratio .
  • Nasira Ang mga klase sa "Screen reader" ay mga klase na ngayon na "visually hidden" .

    • Binago ang Sass file mula scss/helpers/_screenreaders.scsssascss/helpers/_visually-hidden.scss
    • Pinalitan ng pangalan .sr-onlyat .sr-only-focusablesa .visually-hiddenat.visually-hidden-focusable
    • Pinalitan ang pangalan sr-only()at sr-only-focusable()pinaghalo sa visually-hidden()at visually-hidden-focusable().
  • bootstrap-utilities.csskasama na rin ngayon ang ating mga katulong. Hindi na kailangang i-import ang mga katulong sa mga custom na build.

JavaScript

  • Inalis ang dependency sa jQuery at muling isinulat ang mga plugin upang maging regular na JavaScript.

  • NasiraAng mga attribute ng data para sa lahat ng plugin ng JavaScript ay namespace na ngayon upang makatulong na makilala ang functionality ng Bootstrap mula sa mga third party at sa iyong sariling code. Halimbawa, ginagamit namin data-bs-togglesa halip na data-toggle.

  • Ang lahat ng mga plugin ay maaari na ngayong tumanggap ng isang CSS selector bilang ang unang argumento. Maaari kang magpasa ng elemento ng DOM o anumang wastong CSS selector para gumawa ng bagong instance ng plugin:

    var modal = new bootstrap.Modal('#myModal')
    var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
    
  • popperConfigmaaaring ipasa bilang isang function na tumatanggap ng default na Popper config ng Bootstrap bilang argumento, para mapagsama mo ang default na configuration na ito sa iyong paraan. Nalalapat sa mga dropdown, popover, at tooltip.

  • Ang default na halaga para sa fallbackPlacementsay binago sa ['top', 'right', 'bottom', 'left']para sa mas mahusay na paglalagay ng mga elemento ng Popper. Nalalapat sa mga dropdown, popover, at tooltip.

  • Inalis ang underscore mula sa mga pampublikong static na pamamaraan tulad _getInstance()ng → getInstance().