in English

Pagbalhin sa v5

Pagsubay ug pagrepaso sa mga pagbag-o sa Bootstrap source file, dokumentasyon, ug mga sangkap aron matabangan ka nga molalin gikan sa v4 hangtod sa v5.

Niini nga panid

v5.2.0

Gibag-o nga disenyo

Ang Bootstrap v5.2.0 nagpakita sa usa ka maliputon nga pag-update sa disenyo alang sa pipila ka mga sangkap ug mga kabtangan sa tibuok proyekto, ilabi na pinaagi sa dalisay nga border-radiusmga bili sa mga buton ug mga kontrol sa porma . Ang among dokumentasyon gi-update usab sa usa ka bag-ong homepage, mas simple nga docs layout nga dili na mo-collapse sa mga seksyon sa sidebar, ug mas prominenteng mga ehemplo sa Bootstrap Icons .

Dugang CSS variables

Among gi-update ang tanan namong mga component para magamit ang CSS variables. Samtang gipaluyohan gihapon ni Sass ang tanan, ang matag component gi-update aron maapil ang CSS variables sa component base classes (eg, .btn), nga nagtugot sa mas real-time nga customization sa Bootstrap. Sa sunod nga mga pagpagawas, magpadayon kami sa pagpalapad sa among paggamit sa mga variable sa CSS sa among layout, mga porma, katabang, ug mga gamit. Basaha ang dugang bahin sa CSS variables sa matag component sa ilang tagsa-tagsa ka mga pahina sa dokumentasyon.

Ang among CSS variable nga paggamit mahimong medyo dili kompleto hangtod sa Bootstrap 6. Bisan kung gusto namon nga hingpit nga ipatuman kini sa tibuuk nga board, kini adunay peligro nga hinungdan sa mga pagbag-o. Pananglitan, ang pag-set $alert-border-width: var(--bs-border-width)sa among source code makaguba sa potensyal nga Sass sa imong kaugalingong code kung imong gibuhat $alert-border-width * 2sa pipila ka rason.

Ingon niana, kung mahimo, magpadayon kami sa pagduso sa daghang mga variable sa CSS, apan palihug ilha nga ang among pagpatuman mahimong limitado sa v5.

Bag-o nga`_maps.scss`

Ang Bootstrap v5.2.0 nagpaila sa bag-ong Sass file nga adunay _maps.scss. Gikuha niini ang daghang mga mapa sa Sass _variables.scssaron ayohon ang usa ka isyu diin ang mga pag-update sa usa ka orihinal nga mapa wala magamit sa mga sekondaryang mapa nga nagpalapad niini. Pananglitan, ang mga pag-update sa $theme-colorswala gipadapat sa ubang mga mapa sa tema nga nagsalig sa $theme-colors, nga naglapas sa mga yawe nga pag-customize sa workflows. Sa laktod nga pagkasulti, ang Sass adunay limitasyon diin sa higayon nga ang usa ka default variable o mapa gigamit na , dili kini ma-update. Adunay susama nga kakulangan sa CSS variables kung kini gigamit sa paghimo sa uban nga CSS variables.

Mao kini ang hinungdan ngano nga ang mga variable nga pag-customize sa Bootstrap kinahanglan nga moabut pagkahuman @import "functions", apan sa wala pa @import "variables"ug ang nahabilin sa among import stack. Ang sama nga magamit sa mga mapa sa Sass-kinahanglan nimo nga i-override ang mga default sa dili pa kini magamit. Ang mosunod nga mga mapa gibalhin ngadto sa bag-o _maps.scss:

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

Ang imong naandan nga Bootstrap CSS build kinahanglan nga tan-awon sama niini nga adunay usa ka lahi nga pag-import sa 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

Bag-ong mga utilities

Gipalapad nga mga font-weightutilities nga iapil .fw-semiboldpara sa semibold nga mga font.
Gipalapad nga mga border-radiusutilities aron maapil ang duha ka bag-ong gidak-on, .rounded-4ug .rounded-5, alang sa dugang nga mga kapilian.

Dugang nga mga pagbag-o

Gipaila ang bag-ong $enable-container-classeskapilian. — Karon kung mopili na sa eksperimento nga CSS Grid nga layout, .container-*ang mga klase tigumon gihapon, gawas kung kini nga opsyon gitakda sa false. Ang mga sudlanan usab karon nagpabilin sa ilang mga kantidad sa kanal.
Ang component sa Offcanvas aduna nay responsive nga mga kausaban . Ang orihinal nga .offcanvasklase nagpabilin nga wala mausab-kini nagtago sa sulod sa tanang viewports. Aron mahimo kini nga responsive, usba kana nga .offcanvasklase sa bisan unsang .offcanvas-{sm|md|lg|xl|xxl}klase.
Ang mas baga nga mga divider sa lamesa karon nag-opt-in. — Gitangtang namo ang mas baga ug mas lisud nga i-override ang utlanan tali sa mga grupo sa lamesa ug gibalhin kini sa usa ka opsyonal nga klase nga imong magamit, .table-group-divider. Tan-awa ang table docs alang sa usa ka pananglitan.
Gisulat na usab ang Scrollspy aron gamiton ang Intersection Observer API , nga nagpasabot nga dili na nimo kinahanglan ang mga paryente nga mga wrapper sa ginikanan, gi-deprecate angoffsetconfig, ug uban pa. Pangitaa ang imong mga pagpatuman sa Scrollspy nga mas tukma ug makanunayon sa ilang nav highlight.
Ang mga popover ug tooltip karon naggamit sa CSS variables. Ang ubang mga variable sa CSS gi-update gikan sa ilang mga katugbang sa Sass aron makunhuran ang gidaghanon sa mga variable. Ingon usa ka sangputanan, tulo ka mga variable ang wala magamit sa kini nga pagpagawas: $popover-arrow-color, $popover-arrow-outer-color, ug $tooltip-arrow-color.
Gidugang bag-ong .text-bg-{color}mga katabang. Imbis nga magbutang sa indibidwal .text-*ug mga .bg-*utilities, mahimo nimong gamiton ang mga .text-bg-*katabang aron magbutang usa background-colornga adunay lahi nga foreground color.
Gidugang .form-check-reversenga modifier aron i-flip ang han-ay sa mga label ug kaubang mga checkbox/radio.
Gidugang ang mga striped column nga suporta sa mga lamesa pinaagi sa bag-ong .table-striped-columnsklase.

Alang sa kompletong listahan sa mga kausaban, tan-awa ang v5.2.0 nga proyekto sa GitHub .

v5.1.0

Gidugang nga suporta sa eksperimento alang sa layout sa CSS Grid . — Kini usa ka trabaho nga nagpadayon, ug dili pa andam alang sa paggamit sa produksiyon, apan mahimo kang mopili sa bag-ong bahin pinaagi sa Sass. Aron mahimo kini, i-disable ang default grid, pinaagi sa pag-set $enable-grid-classes: falseug pagpagana sa CSS Grid pinaagi sa pag-set $enable-cssgrid: true.
Gi-update ang mga navbar aron suportahan ang offcanvas. — Idugang ang mga offcanvas drawer sa bisan unsang navbar nga adunay mga responsive .navbar-expand-*nga klase ug pipila ka offcanvas markup.
Gidugang bag-ong bahin sa placeholder . — Ang among labing bag-o nga sangkap, usa ka paagi aron mahatagan ang mga temporaryo nga bloke imbes sa tinuud nga sulud aron matabangan nga ipakita nga adunay nagkarga sa imong site o app.
Ang collapse plugin karon nagsuporta sa horizontal collapsing . — Idugang .collapse-horizontalsa imong .collapsearon i-collapse ang widthimbes nga ang height. Likayi ang pagpintal pag-usab sa browser pinaagi sa pagbutang og min-heighto height.
Gidugang ang bag-ong stack ug vertical rule helpers. - Pag- aplay dayon sa daghang mga kabtangan sa flexbox aron dali nga makahimo og naandan nga mga layout nga adunay mga stack . Pagpili gikan sa pinahigda ( .hstack) ug bertikal ( .vstack) nga mga stack. Idugang ang mga bertikal nga divider nga susama sa <hr>mga elemento nga adunay bag-ong mga .vrkatabang .
Gidugang bag-ong global :rootCSS variables. - Gidugang ang daghang bag-ong mga variable sa CSS sa :rootlebel alang sa pagkontrol sa mga <body>istilo. Daghan pa ang anaa sa trabaho, lakip na sa among mga utilities ug mga sangkap, apan sa pagkakaron basaha ang CSS variables sa Customize nga seksyon .
Gi-overhaul ang mga gamit sa kolor ug background aron magamit ang CSS variables, ug gidugang ang bag-ong text opacity ug background opacity utilities. — .text-* ug .bg-*ang mga utilities karon gitukod uban sa CSS variables ug rgba()color values, nga nagtugot kanimo sa dali nga pag-customize sa bisan unsang utility nga adunay bag-ong opacity utilities.
Gidugang ang bag-ong mga pananglitan sa snippet nga gibase aron ipakita kung giunsa ang pag-customize sa among mga sangkap. — Pagbira andam sa paggamit sa customized nga mga sangkap ug uban pang komon nga mga sumbanan sa disenyo uban sa among bag-ong mga Snippet nga mga pananglitan . Naglakip sa mga footer , dropdowns , listahan nga mga grupo , ug modals .
Gikuha ang wala magamit nga mga istilo sa pagpoposisyon gikan sa mga popover ug mga tooltip tungod kay kini gidumala ra sa Popper. $tooltip-marginwala na gamita ug gitakda nullsa proseso.

Gusto ug dugang impormasyon? Basaha ang v5.1.0 blog post.

Hoy diha! Ang mga pagbag-o sa among una nga mayor nga pagpagawas sa Bootstrap 5, v5.0.0, gidokumento sa ubos. Wala nila ipakita ang dugang nga mga pagbag-o nga gipakita sa ibabaw.

Mga pagsalig

Gihulog ang jQuery.
Gi-upgrade gikan sa Popper v1.x ngadto sa Popper v2.x.
Gipulihan ang Libsass sa Dart Sass tungod kay ang among Sass compiler nga gihatag sa Libsass wala na gigamit.
Migrate gikan sa Jekyll ngadto sa Hugo alang sa pagtukod sa among dokumentasyon

Suporta sa browser

Gihulog ang Internet Explorer 10 ug 11
Gihulog ang Microsoft Edge <16 (Legacy Edge)
Gihulog ang Firefox <60
Gihulog ang Safari < 12
Gihulog ang iOS Safari <12
Gihulog ang Chrome <60

Mga pagbag-o sa dokumentasyon

Gidisenyo pag-usab nga homepage, layout sa mga dokumento, ug footer.
Gidugang bag-ong Parcel nga giya .
Gidugang ang bag-ong I-customize nga seksyon , gipuli ang panid sa Theming sa v4 , nga adunay bag-ong mga detalye sa Sass, mga kapilian sa pag-configure sa kalibutan, mga laraw sa kolor, mga variable sa CSS, ug uban pa.
Gi-organisar pag-usab ang tanang dokumentasyon sa porma ngadto sa bag-ong seksyon sa Mga Porma , gibahin ang sulod ngadto sa mas nakapokus nga mga panid.
Sa susama, gi-update ang seksyon sa Layout , aron mas klaro ang sulud sa grid.
Gibag-o ang ngalan nga "Navs" nga panid sa sangkap sa "Navs & Tabs".
Giusab ang ngalan nga "Checks" nga panid ngadto sa "Checks & radios".
Gidisenyo pag-usab ang navbar ug gidugang ang usa ka bag-ong subnav aron mas dali ang paglibot sa among mga site ug mga bersyon sa doc.
Gidugang bag-ong keyboard shortcut para sa search field: Ctrl + /.

Sass

Among gitangtang ang default nga Sass map merges aron mas sayon ang pagtangtang sa mga sobra nga kantidad. Hinumdumi nga kinahanglan nimong ipasabut ang tanan nga mga kantidad sa mga mapa sa Sass sama sa $theme-colors. Tan-awa kung giunsa ang pag-atubang sa mga mapa sa Sass .
NagbuwagGibag -o ang ngalan color-yiq()sa function ug may kalabutan nga mga variable sa color-contrast()ingon nga wala na kini kalambigitan sa YIQ color space. Tan-awa ang #30168.
- $yiq-contrasted-thresholdgiusab ang ngalan sa $min-contrast-ratio.
- $yiq-text-darkug $yiq-text-lightgiilisan ug ngalan sa $color-contrast-darkug $color-contrast-light.
NagbuwagAng mga parameter sa pagsagol sa pangutana sa media nausab para sa mas lohikal nga pamaagi.
- media-breakpoint-down()naggamit sa breakpoint mismo imbes sa sunod nga breakpoint (pananglitan, media-breakpoint-down(lg)imbes nga media-breakpoint-down(md)target ang mga viewport nga mas gamay kay sa lg).
- Sa susama, ang ikaduhang parametro sa media-breakpoint-between()naggamit usab sa breakpoint sa iyang kaugalingon imbes sa sunod nga breakpoint (pananglitan, media-between(sm, lg)imbes nga media-breakpoint-between(sm, md)target viewports tali sa smug lg).
NagbuwagGikuha ang mga estilo sa pag-imprinta ug $enable-print-stylesvariable. Ang mga klase sa pagpakita sa pag-imprinta anaa pa. Tan-awa ang #28339 .
NagbuwagGihulog color()ang , theme-color(), ug gray()naglihok pabor sa mga variable. Tan-awa ang #29083 .
NagbuwagGibag -o ang ngalan theme-color-level()sa function color-level()ug karon gidawat ang bisan unsang kolor nga gusto nimo imbis nga mga $theme-colorkolor lamang. Tan-awa ang #29083 Bantayi: color-level() sa ulahi gihulog sa v5.0.0-alpha3.
NagbuwagGiusab ang ngalan $enable-prefers-reduced-motion-media-queryug $enable-pointer-cursor-for-buttonssa $enable-reduced-motionug $enable-button-pointerssa mubo.
NagbuwagGikuha ang bg-gradient-variant()mixin. Gamita ang .bg-gradientklase aron idugang ang mga gradient sa mga elemento imbes sa mga nahimo nga .bg-gradient-*klase.
Nagbuwag Gitangtang ang kaniadto wala na gigamit nga mga mixin:
- hover, hover-focus, plain-hover-focus, ughover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(gihulog usab ang kauban nga klase sa utility, .text-hide)
- visibility()
- form-control-focus()
NagbuwagGibag -o ang ngalan scale-color()nga function aron shift-color()malikayan ang pagbangga sa kaugalingon nga function sa pag-scale sa kolor ni Sass.
box-shadowmixins karon nagtugot sa nullmga bili ug drop nonegikan sa daghang mga argumento. Tan-awa ang #30394 .
Ang border-radius()mixin karon adunay usa ka default nga kantidad.

Sistema sa kolor

Ang sistema sa kolor nga nagtrabaho color-level()ug $theme-color-intervalgitangtang pabor sa usa ka bag-ong sistema sa kolor. Ang tanan lighten()ug darken()mga gimbuhaton sa among codebase gipulihan tint-color()ug shade-color(). Kini nga mga gimbuhaton magsagol sa kolor sa puti o itom imbis nga usbon ang kahayag niini sa usa ka piho nga kantidad. Ang shift-color()mag-tint o mag-shade sa usa ka kolor depende kung positibo o negatibo ang parameter sa gibug-aton niini. Tan-awa ang #30622 para sa dugang nga mga detalye.
Gidugang ang bag-ong mga tints ug shades alang sa matag kolor, naghatag siyam ka separado nga mga kolor sa matag base nga kolor, isip bag-ong Sass variables.
Gipauswag nga kalainan sa kolor. Gibunggo ang contrast ratio sa kolor gikan sa 3:1 ngadto sa 4.5:1 ug gi-update ang blue, green, cyan, ug pink nga mga kolor aron maseguro ang WCAG 2.1 AA contrast. Giusab usab ang among kolor nga contrast color gikan $gray-900sa $black.
Aron masuportahan ang among sistema sa kolor, gidugang namo ang bag-ong kostumbre tint-color()ug shade-color()mga gimbuhaton aron isagol ang among mga kolor sa hustong paagi.

Mga update sa grid

Bag-ong breakpoint! Gidugang bag-ong xxlbreakpoint para 1400pxug pataas. Walay mga pagbag-o sa tanan nga uban pang mga breakpoint.
Gipaayo nga mga kanal. Ang mga kanal gipahimutang na karon sa rem, ug mas hiktin kay sa v4 ( 1.5rem, o mga 24px, paubos gikan sa 30px). Gipahiangay niini ang mga gutter sa among grid system sa among mga spacing utilities.
- Gidugang ang bag-ong klase sa gutter ( .g-*, .gx-*, ug .gy-*) aron makontrol ang horizontal/vertical gutters, horizontal gutters, ug vertical gutters.
- NagbuwagGibag -o ang ngalan .no-gutterssa .g-0aron ipares ang bag-ong mga gamit sa gutter.
Wala na position: relativemagamit ang mga kolum, mao nga kinahanglan nimong idugang .position-relativeang pipila ka mga elemento aron mapasig-uli kana nga pamatasan.
NagbuwagGihulog ang daghang mga .order-*klase nga kanunay wala magamit. Naghatag lang kami karon .order-1sa .order-5gawas sa kahon.
NagbuwagGihulog ang .mediasangkap tungod kay kini dali nga makopya sa mga gamit. Tan-awa ang #28265 ug ang flex utilities nga panid alang sa usa ka pananglitan .
Nagbuwag bootstrap-grid.csskaron magamit lamang box-sizing: border-boxsa kolum imbis nga i-reset ang global box-sizing. Niining paagiha, ang among mga istilo sa grid mahimong magamit sa daghang mga lugar nga wala’y pagpanghilabot.
$enable-grid-classesdili na disable ang henerasyon sa mga klase sa sudlanan. Tan-awa ang #29146.
Gi-update ang make-colmixin sa default sa parehas nga mga kolum nga wala’y piho nga gidak-on.

Content, Reboot, ug uban pa

Ang RFS gipalihok na pinaagi sa default. Ang mga ulohan nga naggamit safont-size()mixin awtomatik nga mag-adjust sa ilangfont-sizegidak-on sa viewport. Kini nga bahin kaniadto nag-opt-in sa v4.
NagbuwagGi-overhaul ang among gipakita nga typography aron mapulihan ang among $display-*mga variable ug sa usa ka $display-font-sizesmapa sa Sass. Gikuha usab ang indibidwal nga mga $display-*-weightvariable alang sa usa $display-font-weightug gibag-o font-sizenga s.
Gidugang ang duha ka bag-ong .display-*gidak-on sa ulohan, .display-5ug .display-6.
Ang mga link gilinya pinaagi sa default (dili lang sa hover), gawas kung kini bahin sa piho nga mga sangkap.
Gidisenyo pag-usab nga mga lamesa aron i-refresh ang ilang mga istilo ug tukuron kini pag-usab gamit ang mga variable sa CSS alang sa dugang nga pagkontrol sa pag-istilo.
NagbuwagAng mga nested table dili na makapanunod sa mga estilo.
Nagbuwag .thead-lightug .thead-darkgihulog pabor sa lain- .table-*laing klase nga mahimong gamiton alang sa tanang elemento sa lamesa ( thead, tbody, tfoot, tr, thug td).
NagbuwagAng table-row-variant()mixin gipangalan table-variant()ug gidawat lamang ang 2 nga mga parameter: $color(ngalan sa kolor) ug $value(kode sa kolor). Ang kolor sa utlanan ug mga kolor sa accent awtomatik nga kalkulado base sa mga variable sa table factor.
Bahina ang mga variable sa table cell padding ngadto sa -yug -x.
NagbuwagNahulog .pre-scrollableang klase. Tan-awa ang #29135
Nagbuwag .text-*Ang mga utilities dili na makadugang sa hover ug focus nga mga estado sa mga link. .link-*Ang mga klase sa katabang mahimong magamit sa baylo. Tan-awa ang #29267
NagbuwagNahulog .text-justifyang klase. Tan-awa ang #29793
Nagbuwag <hr>gigamit karon ang mga elemento heightimbis borderaron mas masuportahan ang sizehiyas. Gitugotan usab niini ang paggamit sa mga kagamitan sa padding aron makahimo og mas baga nga mga divider (pananglitan, <hr class="py-1">).
I- reset ang default pinahigda padding-leftsa <ul>ug ang <ol>mga elemento gikan sa default sa browser 40pxngadto sa 2rem.
Gidugang $enable-smooth-scroll, nga magamit scroll-behavior: smoothsa tibuok kalibutan-gawas sa mga tiggamit nga nangayo og pagkunhod sa paglihok pinaagi prefers-reduced-motionsa pangutana sa media. Tan-awa ang #31877

RTL

Ang pinahigda nga direksyon espesipikong mga baryable, mga utilities, ug mga mixin ang tanan giilisan sa ngalan sa paggamit sa lohikal nga mga kabtangan sama niadtong makita sa flexbox layouts—eg, startug endpuli sa leftug right.

Mga porma

Gidugang bag-ong naglutaw nga mga porma! Gi-promote namo ang mga Floating label nga pananglitan sa hingpit nga suportadong mga sangkap sa porma. Tan-awa ang bag-ong Floating labels nga panid.
Nagbuwag Nahiusa nga lumad ug naandan nga mga elemento sa porma. Ang mga checkbox, radyo, pinili, ug uban pang mga input nga adunay lumad ug naandan nga mga klase sa v4 gihiusa. Karon halos tanan namong mga elemento sa porma kay bug-os nga naandan, kadaghanan wala magkinahanglan og custom HTML.
- .custom-control.custom-checkboxkaron .form-check.
- .custom-control.custom-custom-radiokaron .form-check.
- .custom-control.custom-switchkaron .form-check.form-switch.
- .custom-selectkaron .form-select.
- .custom-fileug .form-filegipulihan sa naandang mga estilo sa ibabaw sa .form-control.
- .custom-rangekaron .form-range.
- Nahulog nga lumad .form-control-fileug .form-control-range.
NagbuwagNahulog .input-group-appendug .input-group-prepend. Mahimo nimong idugang ang mga buton ug .input-group-textingon direkta nga mga bata sa mga grupo sa input.
Ang dugay na nga Nawala nga border radius sa input nga grupo nga adunay validation feedback bug sa katapusan naayo pinaagi sa pagdugang usa ka dugang .has-validationnga klase sa input nga mga grupo nga adunay validation.
Nagbuwag Gihulog ang mga klase sa layout nga espesipiko sa porma para sa among grid system. Gamita ang among grid ug mga utilities imbes nga .form-group, .form-row, o .form-inline.
NagbuwagAng mga label sa porma karon nanginahanglan .form-label.
Nagbuwag .form-textno longer sets display, nagtugot kanimo sa paghimo og inline o pag-block sa tabang nga teksto sumala sa imong gusto pinaagi lang sa pag-usab sa HTML nga elemento.
Ang mga kontrol sa porma wala na gigamit nga naayo heightkung mahimo, imbis nga maglangan min-heightaron mapauswag ang pag-customize ug pagkaangay sa ubang mga sangkap.
Ang mga icon sa validation wala na magamit sa <select>s nga adunay multiple.
Gihan-ay pag-usab ang tinubdan Sass nga mga file ubos sa scss/forms/, lakip ang mga estilo sa grupo sa input.

Mga sangkap

Nahiusa paddingnga mga kantidad alang sa mga alerto, breadcrumb, kard, dropdown, lista nga mga grupo, modals, popover, ug tooltip nga ibase sa among $spacervariable. Tan-awa ang #30564 .

Akordyon

Gidugang bag-ong sangkap sa accordion .

Mga alerto

Ang mga alerto karon adunay mga pananglitan nga adunay mga icon .
Gitangtang ang mga kostumbre nga istilo para <hr>sa s sa matag alerto tungod kay gigamit na nila ang currentColor.

Mga badge

NagbuwagGihulog ang tanan .badge-*nga mga klase sa kolor alang sa mga gamit sa background (pananglitan, gamita .bg-primaryimbes nga .badge-primary).
NagbuwagNahulog .badge-pill— gamita hinuon ang .rounded-pillutility.
NagbuwagGitangtang ang hover ug focus nga mga estilo para <a>ug <button>mga elemento.
Gidugangan nga default padding alang sa mga badge gikan sa .25em/ .5emngadto sa .35em/ .65em.

Mga mumho sa pan

Gipasimple ang default nga hitsura sa mga breadcrumb pinaagi sa pagtangtang sa padding, background-color, ug border-radius.
Gidugang ang bag-ong CSS custom property --bs-breadcrumb-divideralang sa sayon nga pag-customize nga dili kinahanglan nga i-recompile ang CSS.

Mga butones

Nagbuwag I- toggle ang mga buton , nga adunay mga checkbox o radyo, wala na magkinahanglan og JavaScript ug adunay bag-ong markup. Wala na kami magkinahanglan og elemento sa pagputos, idugang.btn-checksa<input>, ug ipares kini sa bisan unsang.btnmga klase sa<label>. Tan-awa ang #30650 . Ang mga docs para niini mibalhin gikan sa among Buttons page ngadto sa bag-ong Forms section.
Nagbuwag Gihulog .btn-blockalang sa mga utilities. Imbis nga gamiton .btn-blockang .btn, iputos ang imong mga butones .d-gridug usa ka .gap-*gamit aron ibutang kini kung gikinahanglan. Pagbalhin ngadto sa mga responsive nga mga klase alang sa dugang nga pagkontrol niini. Basaha ang mga doc alang sa pipila ka mga pananglitan.
Gi-update ang among button-variant()ug button-outline-variant()mixins aron suportahan ang dugang nga mga parameter.
Gi-update nga mga buton aron masiguro ang dugang nga kalainan sa hover ug aktibo nga mga estado.
Ang mga disabled nga buton karon adunay pointer-events: none;.

Kard

NagbuwagGihulog .card-deckpabor sa among grid. I-wrap ang imong mga kard sa mga klase sa kolum ug idugang ang usa ka .row-cols-*sudlanan sa ginikanan aron mabuhat pag-usab ang mga deck sa kard (apan adunay dugang nga kontrol sa pagtubag sa pag-align).
NagbuwagGihulog .card-columnspabor sa Masonry. Tan-awa ang #28922 .
NagbuwagGipulihan ang .cardgibase nga akordyon sa usa ka bag-ong sangkap sa Accordion .

Carousel

Gidugang bag-ong .carousel-darkvariant para sa mangitngit nga teksto, mga kontrol, ug mga indikasyon (maayo alang sa mas gaan nga mga background).
Gipulihan ang mga icon nga chevron alang sa mga kontrol sa carousel nga adunay bag-ong mga SVG gikan sa Mga Icon sa Bootstrap .

Close button

NagbuwagGiilisan ang ngalan .closesa .btn-closepara sa dili kaayo generic nga ngalan.
Ang mga close button karon naggamit ug usa ka background-image(naka-embed nga SVG) imbes nga usa ×sa HTML, nga nagtugot sa mas sayon nga pag-customize nga dili kinahanglan nga mohikap sa imong markup.
Gidugang ang bag-ong .btn-close-whitevariant nga gigamit filter: invert(1)aron mahimo ang mas taas nga kalainan sa pagtangtang sa mga icon batok sa mas itom nga mga background.

Nahugno

Gikuha ang scroll anchoring para sa mga akordyon.

Mga dropdown

Gidugang ang bag-ong .dropdown-menu-darkvariant ug kaubang mga variable para sa on-demand nga dark dropdowns.
Gidugang bag-ong variable para sa $dropdown-padding-x.
Gipangitngit ang dropdown divider para sa mas maayo nga contrast.
NagbuwagAng tanan nga mga panghitabo alang sa dropdown karon na-trigger sa dropdown toggle button ug dayon gibuak ngadto sa ginikanan nga elemento.
Ang dropdown nga mga menu aduna nay data-bs-popper="static"set nga attribute kung ang positioning sa dropdown static, o dropdown naa sa navbar. Gidugang kini sa among JavaScript ug nagtabang kanamo sa paggamit sa naandan nga mga istilo sa posisyon nga dili makabalda sa pagposisyon sa Popper.
NagbuwagNahulog flipnga kapilian alang sa dropdown plugin pabor sa lumad nga Popper configuration. Mahimo nimong i-disable ang flipping behavior pinaagi sa pagpasa sa usa ka walay sulod nga array para sa fallbackPlacementsopsyon sa flip modifier.
Ang mga dropdown nga menu mahimo nang ma-click nga adunay bag-ong autoClosekapilian sa pagdumala sa auto close nga kinaiya . Mahimo nimong gamiton kini nga kapilian aron dawaton ang pag-klik sa sulod o sa gawas sa dropdown menu aron mahimo kini nga interactive.
Ang mga dropdown karon nagsuporta .dropdown-itemsa mga giputos sa <li>s.

Jumbotron

NagbuwagGihulog ang jumbotron component kay mahimo kini nga makopya sa mga utilities. Tan-awa ang among bag-ong pananglitan sa Jumbotron alang sa usa ka demo.

Ilista ang grupo

Gidugang bag-ong .list-group-numberedmodifier sa paglista sa mga grupo.

Navs ug tabs

Gidugang bag-ong nullmga variable para sa font-size, font-weight, color, ug :hover colorsa .nav-linkklase.

Mga Navbar

NagbuwagNanginahanglan na ang mga Navbar og sudlanan sa sulod (aron mapasayon ang mga kinahanglanon sa spacing ug gikinahanglan ang CSS).
NagbuwagAng .activeklase dili na magamit sa .nav-items, kini kinahanglan nga direkta nga magamit sa .nav-links.

Offcanvas

Gidugang ang bag-ong bahin sa offcanvas .

Pagination

Ang mga link sa pagination karon aduna nay customizable margin-leftnga dinamikong rounded sa tanang suok kung magbulag sa usag usa.
Gidugang transitions sa mga link sa pagination.

Mga Popover

NagbuwagGiusab .arrowang ngalan .popover-arrowsa among default nga template sa popover.
Giusab ang ngalan whiteListnga opsyon sa allowList.

Mga spinner

Ang mga spinner karon nagpasidungog prefers-reduced-motion: reducepinaagi sa pagpahinay sa mga animation. Tan-awa ang #31882 .
Gipalambo nga spinner vertical alignment.

Mga toast

Ang mga toast mahimo nang ibutang sa usa .toast-containersa tabang sa mga kagamitan sa pagpoposisyon .
Giusab ang default nga gidugayon sa toast ngadto sa 5 segundos.
Gikuha overflow: hiddengikan sa mga toast ug gipulihan sa tukma nga border-radiuss nga adunay calc()mga gimbuhaton.

Mga tooltip

NagbuwagGiusab .arrowang ngalan .tooltip-arrowsa among default tooltip template.
NagbuwagAng default nga bili alang sa fallbackPlacementsgiusab ngadto ['top', 'right', 'bottom', 'left']sa mas maayo nga pagbutang sa mga elemento sa popper.
NagbuwagGiusab ang ngalan whiteListnga opsyon sa allowList.

Mga gamit

NagbuwagGibag-o ang ngalan sa daghang mga utilities aron magamit ang mga ngalan sa lohikal nga kabtangan imbes nga mga ngalan sa direksyon nga adunay pagdugang sa suporta sa RTL:
- Giusab ang ngalan .left-*ug .right-*sa .start-*ug .end-*.
- Giusab ang ngalan .float-leftug .float-rightsa .float-startug .float-end.
- Giusab ang ngalan .border-leftug .border-rightsa .border-startug .border-end.
- Giusab ang ngalan .rounded-leftug .rounded-rightsa .rounded-startug .rounded-end.
- Giusab ang ngalan .ml-*ug .mr-*sa .ms-*ug .me-*.
- Giusab ang ngalan .pl-*ug .pr-*sa .ps-*ug .pe-*.
- Giusab ang ngalan .text-leftug .text-rightsa .text-startug .text-end.
NagbuwagGi-disable ang negatibo nga mga margin pinaagi sa default.
Gidugang bag-ong .bg-bodyklase alang sa dali nga pagbutang sa <body>background sa dugang nga mga elemento.
Gidugang bag-ong mga gamit sa posisyon para sa top, right, bottom, ug left. Ang mga bili naglakip sa 0, 50%, ug 100%alang sa matag kabtangan.
Gidugang bag-o .translate-middle-x& .translate-middle-ymga utilities sa horizontally o vertically center absolute/fixed positioned elements.
Gidugang bag-ong border-widthmga utilities .
NagbuwagGiusab ang ngalan .text-monospacesa .font-monospace.
NagbuwagGitangtang .text-hidetungod kay kini usa ka karaan nga pamaagi sa pagtago sa teksto nga dili na kinahanglan gamiton.
Gidugang .fs-*nga mga utilities para sa mga font-sizeutilities (nga adunay RFS enabled). Gigamit niini ang parehas nga sukod sa default nga mga ulohan sa HTML (1-6, dako hangtod gamay), ug mahimong usbon pinaagi sa mapa sa Sass.
NagbuwagGibag-o ang ngalan .font-weight-*sa mga utilities sama .fw-*sa kadali ug pagkamakanunayon.
NagbuwagGibag-o ang ngalan .font-style-*sa mga utilities sama .fst-*sa kadali ug pagkamakanunayon.
Gidugang .d-gridaron ipakita ang mga utilities ug bag-ong mga gaputilities ( .gap) para sa CSS Grid ug flexbox nga mga layout.
NagbuwagGikuha .rounded-smug rounded-lg, ug gipaila ang bag-ong sukdanan sa mga klase, .rounded-0ngadto sa .rounded-3. Tan-awa ang #31687 .
Gidugang bag-ong line-heightmga utilities: .lh-1, .lh-sm, .lh-baseug .lh-lg. Tan-awa dinhi .
Gibalhin ang .d-noneutility sa among CSS aron mahatagan kini og dugang gibug-aton kaysa ubang mga gamit sa pagpakita.
Gipalapad ang .visually-hidden-focusablekatabang sa pagtrabaho usab sa mga sudlanan, gamit ang :focus-within.

Mga katabang

Nagbuwag Ang mga responsive embed nga mga katabang giilisan og ngalan ngadto sa ratio nga mga katabang nga adunay bag-ong mga ngalan sa klase ug gipaayo nga pamatasan, ingon man usa ka makatabang nga variable sa CSS.
- Ang mga klase giilisan og ngalan aron mausab byngadto xsa aspect ratio. Pananglitan, .ratio-16by9karon .ratio-16x9.
- Among gihulog ang .embed-responsive-itemug element group selector pabor sa mas simple .ratio > *nga selector. Wala nay klase ang gikinahanglan, ug ang ratio helper karon nagtrabaho sa bisan unsang HTML nga elemento.
- Ang $embed-responsive-aspect-ratiosmapa sa Sass giilisan $aspect-ratiosug ngalan ug ang mga bili niini gipasayon aron maapil ang ngalan sa klase ug ang porsyento isip key: valuepares.
- Ang mga variable sa CSS nahimo na karon ug gilakip alang sa matag kantidad sa mapa sa Sass. Usba ang --bs-aspect-ratiobaryable sa .ratioaron makamugna og bisan unsang custom aspect ratio .
Nagbuwag Ang mga klase sa “Screen reader” kay “biswal nga tinago” nga mga klase .
- Giusab ang Sass file gikan scss/helpers/_screenreaders.scsssa ngadto sascss/helpers/_visually-hidden.scss
- Giusab ang ngalan .sr-onlyug .sr-only-focusablesa .visually-hiddenug.visually-hidden-focusable
- Giusab ang ngalan sr-only()ug sr-only-focusable()mixins sa visually-hidden()ug visually-hidden-focusable().
bootstrap-utilities.csskaron naglakip usab sa atong mga katabang. Ang mga katabang dili na kinahanglan nga i-import sa mga naandan nga pagtukod.

JavaScript

Gihulog ang pagsalig sa jQuery ug gi-rewrote ang mga plugins nga naa sa regular nga JavaScript.
NagbuwagAng mga attribute sa data para sa tanang JavaScript plugins kay namespaced na aron makatabang sa pag-ila sa Bootstrap functionality gikan sa third party ug sa imong kaugalingong code. Pananglitan, atong gamiton data-bs-toggleimbes nga data-toggle.
Ang tanan nga mga plugins mahimo nang modawat sa usa ka CSS selector isip unang argumento. Mahimo nimong ipasa ang usa ka elemento sa DOM o bisan unsang balido nga tigpili sa CSS aron makahimo usa ka bag-ong pananglitan sa plugin:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigmahimong ipasa isip function nga modawat sa default Popper config sa Bootstrap isip argumento, aron imong mahiusa kining default configuration sa imong paagi. Magamit sa mga dropdown, popover, ug tooltip.
Ang default nga bili alang sa fallbackPlacementsgiusab ngadto ['top', 'right', 'bottom', 'left']sa mas maayo nga pagbutang sa mga elemento sa Popper. Magamit sa mga dropdown, popover, ug tooltip.
Gikuha ang underscore gikan sa publiko nga static nga mga pamaagi sama sa _getInstance()→ getInstance().