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.

Sa pahinang ito

v5.2.0

Nire-refresh ang disenyo

Nagtatampok ang Bootstrap v5.2.0 ng banayad na pag-update ng disenyo para sa ilang bahagi at pag-aari sa buong proyekto, lalo na sa pamamagitan ng mga pinong border-radiusvalue sa mga button at mga kontrol ng form . Ang aming dokumentasyon ay na-update din gamit ang isang bagong homepage, mas simpleng layout ng mga dokumento na hindi na nagko-collapse ng mga seksyon ng sidebar, at mas kilalang mga halimbawa ng Bootstrap Icons .

Higit pang mga variable ng CSS

Na-update namin ang lahat ng aming mga bahagi upang gumamit ng mga variable ng CSS. Bagama't pinagbabatayan pa rin ng Sass ang lahat, ang bawat bahagi ay na-update upang isama ang mga variable ng CSS sa mga baseng klase ng bahagi (hal, .btn), na nagbibigay-daan para sa higit pang real-time na pag-customize ng Bootstrap. Sa mga susunod na release, patuloy naming palalawakin ang aming paggamit ng mga variable ng CSS sa aming layout, form, helper, at utility. Magbasa nang higit pa tungkol sa mga variable ng CSS sa bawat bahagi sa kani-kanilang mga pahina ng dokumentasyon.

Ang aming CSS variable na paggamit ay magiging medyo hindi kumpleto hanggang sa Bootstrap 6. Bagama't gusto naming ganap na ipatupad ang mga ito sa kabuuan, mayroon silang panganib na magdulot ng mga paglabag sa mga pagbabago. Halimbawa, $alert-border-width: var(--bs-border-width)sinira ng setting sa aming source code ang potensyal na Sass sa sarili mong code kung ginagawa mo ito $alert-border-width * 2para sa ilang kadahilanan.

Dahil dito, hangga't maaari, patuloy kaming magtutulak patungo sa higit pang mga variable ng CSS, ngunit mangyaring kilalanin na ang aming pagpapatupad ay maaaring bahagyang limitado sa v5.

Bago`_maps.scss`

Ipinakilala ng Bootstrap v5.2.0 ang isang bagong Sass file na may _maps.scss. Naglalabas ito ng ilang mapa ng Sass _variables.scssupang ayusin ang isang isyu kung saan hindi inilapat ang mga update sa isang orihinal na mapa sa mga pangalawang mapa na nagpapalawak sa kanila. Halimbawa, ang mga update sa $theme-colorsay hindi inilapat sa iba pang mga mapa ng tema na umaasa sa $theme-colors, paglabag sa mga pangunahing daloy ng trabaho sa pag-customize. Sa madaling salita, may limitasyon ang Sass kung saan kapag ginamit ang default na variable o mapa , hindi ito maa-update. Mayroong katulad na pagkukulang sa mga variable ng CSS kapag ginamit ang mga ito upang bumuo ng iba pang mga variable ng CSS.

Ito ang dahilan kung bakit kailangang mangyari ang mga variable na pag-customize sa Bootstrap pagkatapos ng @import "functions", ngunit bago @import "variables"at ang iba pa sa aming stack ng pag-import. Nalalapat din ito sa mga mapa ng Sass—dapat mong i-override ang mga default bago magamit ang mga ito. Ang mga sumusunod na mapa ay inilipat sa bago _maps.scss:

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

Ang iyong custom na Bootstrap CSS build ay dapat na magmukhang ganito na may hiwalay na pag-import ng mga mapa.

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

Mga bagong utility

Mga pinalawak na font-weightutility na isasama .fw-semiboldpara sa mga semibold na font.
Mga pinalawak na border-radiusutility upang magsama ng dalawang bagong laki, .rounded-4at .rounded-5, para sa higit pang mga opsyon.

Mga karagdagang pagbabago

Ipinakilala ang bagong $enable-container-classesopsyon. — Ngayon kapag nag-o-opt in sa eksperimental na CSS Grid na layout, ang mga .container-*klase ay isasama pa rin, maliban kung ang opsyong ito ay nakatakda sa false. Pinapanatili na rin ngayon ng mga lalagyan ang kanilang mga halaga ng kanal.
Ang bahagi ng Offcanvas ay mayroon na ngayong mga tumutugong variation . Ang orihinal .offcanvasna klase ay nananatiling hindi nagbabago—nagtatago ito ng nilalaman sa lahat ng viewport. Upang gawin itong tumutugon, baguhin ang .offcanvasklase na iyon sa anumang .offcanvas-{sm|md|lg|xl|xxl}klase.
Nag-opt-in na ngayon ang mas makapal na table divider. — Inalis namin ang mas makapal at mas mahirap na i-override ang hangganan sa pagitan ng mga pangkat ng talahanayan at inilipat ito sa isang opsyonal na klase na maaari mong ilapat, .table-group-divider. Tingnan ang table docs para sa isang halimbawa.
Ang Scrollspy ay muling isinulat upang gamitin ang Intersection Observer API , na nangangahulugang hindi mo na kailangan ng mga kamag-anak na pambalot ng magulang, hindi na ginagamitoffsetconfig, at higit pa. Hanapin ang iyong mga pagpapatupad ng Scrollspy upang maging mas tumpak at pare-pareho sa kanilang nav highlight.
Gumagamit na ngayon ang mga popover at tooltip ng mga variable ng CSS. Ang ilang mga variable ng CSS ay na-update mula sa kanilang mga katapat na Sass upang bawasan ang bilang ng mga variable. Bilang resulta, tatlong variable ang hindi na ginagamit sa release na ito: $popover-arrow-color, $popover-arrow-outer-color, at $tooltip-arrow-color.
Nagdagdag ng mga bagong .text-bg-{color}katulong. Sa halip na magtakda ng indibidwal .text-*at mga .bg-*utility, maaari mo na ngayong gamitin ang mga .text-bg-*katulong upang magtakda ng isang background-colormay contrasting na foreground color.
Nagdagdag .form-check-reverseng modifier upang i-flip ang pagkakasunud-sunod ng mga label at nauugnay na mga checkbox/radio.
Nagdagdag ng suporta sa mga may guhit na column sa mga talahanayan sa pamamagitan ng bagong .table-striped-columnsklase.

Para sa kumpletong listahan ng mga pagbabago, tingnan ang v5.2.0 na proyekto sa GitHub .

v5.1.0

Nagdagdag ng pang-eksperimentong suporta para sa layout ng CSS Grid . — Ito ay kasalukuyang ginagawa, at hindi pa handa para sa paggamit ng produksyon, ngunit maaari kang mag-opt in sa bagong feature sa pamamagitan ng Sass. Upang paganahin ito, huwag paganahin ang default na grid, sa pamamagitan ng pagtatakda $enable-grid-classes: falseat paganahin ang CSS Grid sa pamamagitan ng pagtatakda $enable-cssgrid: true.
Na-update ang mga navbar upang suportahan ang offcanvas. — Magdagdag ng mga offcanvas drawer sa anumang navbar na may mga tumutugong .navbar-expand-*klase at ilang offcanvas markup.
Nagdagdag ng bagong bahagi ng placeholder . — Ang aming pinakabagong bahagi, isang paraan upang magbigay ng pansamantalang mga bloke bilang kapalit ng tunay na nilalaman upang makatulong na ipahiwatig na may naglo-load pa rin sa iyong site o app.
Sinusuportahan na ngayon ng collapse plugin ang pahalang na pagbagsak . — Idagdag .collapse-horizontalsa iyong .collapsei-collapse ang sa widthhalip na ang height. Iwasan ang muling pagpipinta ng browser sa pamamagitan ng pagtatakda ng min-heighto height.
Nagdagdag ng bagong stack at vertical rule helper. — Mabilis na maglapat ng maraming katangian ng flexbox upang mabilis na makagawa ng mga custom na layout na may mga stack . Pumili mula sa pahalang ( .hstack) at patayong ( .vstack) na mga stack. Magdagdag ng mga patayong divider na katulad <hr>ng mga elemento sa mga bagong .vrkatulong .
Nagdagdag ng mga bagong global :rootCSS variable. — Nagdagdag ng ilang bagong CSS variable sa :rootantas para sa pagkontrol ng mga <body>istilo. Marami pa ang ginagawa, kabilang sa aming mga utility at bahagi, ngunit sa ngayon basahin ang mga variable ng CSS sa seksyong I-customize .
Ino-overhaul ang mga gamit sa kulay at background para gumamit ng mga variable ng CSS, at nagdagdag ng bagong text opacity at background opacity utilities. — .text-* at .bg-*ang mga utility ay binuo na ngayon gamit ang mga variable ng CSS at mga rgba()value ng kulay, na nagbibigay-daan sa iyong madaling i-customize ang anumang utility gamit ang mga bagong opacity utility.
Nagdagdag ng mga bagong halimbawa ng snippet batay upang ipakita kung paano i-customize ang aming mga bahagi. — Hilahin ang handang gumamit ng mga naka-customize na bahagi at iba pang karaniwang mga pattern ng disenyo gamit ang aming mga bagong halimbawa ng Snippet . Kasama ang mga footer , dropdown , listahan ng mga pangkat , at modals .
Inalis ang hindi nagamit na mga istilo ng pagpoposisyon mula sa mga popover at tooltip dahil ang mga ito ay pinangangasiwaan lamang ng Popper. $tooltip-marginay hindi na ginagamit at itinakda sa nullproseso.

Gusto ng karagdagang impormasyon? Basahin ang v5.1.0 blog post.

Hoy, ikaw! Ang mga pagbabago sa aming unang pangunahing release ng Bootstrap 5, v5.0.0, ay nakadokumento sa ibaba. Hindi nila ipinapakita ang mga karagdagang pagbabagong ipinapakita sa itaas.

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 idisenyo ang 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 "Mga Check" sa "Mga Check at radyo".
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 espasyo ng kulay 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 ang 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 sistema 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 gutters 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-control.custom-checkboxay ngayon .form-check.
- .custom-control.custom-custom-radioay ngayon .form-check.
- .custom-control.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 na elemento.
Ang mga kontrol sa form ay hindi na ginagamit nang maayos heightkung posible, sa halip ay ipinagpaliban min-heightupang mapabuti ang pag-customize at pagiging tugma sa iba pang mga bahagi.
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

Nagdagdag ng bagong bahagi ng akurdyon .

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.

Mga mumo ng tinapay

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 property --bs-breadcrumb-dividerpara sa madaling pag-customize nang hindi na kailangang i-compile muli ang 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 .

Carousel

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 ×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.

Mga dropdown

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, o 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

NasiraNahulog ang jumbotron component dahil maaari itong kopyahin sa mga utility. Tingnan ang aming bagong halimbawa ng Jumbotron para sa isang demo.

Listahan ng pangkat

Nagdagdag ng bagong .list-group-numberedmodifier sa listahan ng mga pangkat.

Mga Nav at tab

Nagdagdag ng mga bagong nullvariable para sa font-size, font-weight, color, at :hover colorsa .nav-linkklase.

Mga Navbar

NasiraAng mga Navbar ay nangangailangan na ngayon ng isang lalagyan sa loob (upang lubos na pasimplehin ang mga kinakailangan sa espasyo at kinakailangan ng CSS).
NasiraAng .activeklase ay hindi na maaaring ilapat sa .nav-items, dapat itong ilapat nang direkta sa .nav-links.

Offcanvas

Idinagdag ang bagong bahagi ng 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:
```
const modal = new bootstrap.Modal('#myModal')
const 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().