Migrasyon nan v5

Swiv epi revize chanjman ki fèt nan dosye sous Bootstrap yo, dokimantasyon, ak konpozan pou ede w imigre soti nan v4 a v5.

Nan paj sa a

v5.2.0

Konsepsyon rafrechi

Bootstrap v5.2.0 prezante yon aktyalizasyon konsepsyon sibtil pou yon ti ponyen eleman ak pwopriyete atravè pwojè a, sitou atravè border-radiusvalè rafine sou bouton ak kontwòl fòm . Dokiman nou yo te mete ajou tou ak yon nouvo paj dakèy, fòm dokiman ki pi senp ki pa efondre ankò seksyon nan ankadre a, ak egzanp pi enpòtan nan ikon Bootstrap .

Plis varyab CSS

Nou te mete ajou tout eleman nou yo pou itilize varyab CSS. Pandan ke Sass toujou fonde tout bagay, yo te mete chak eleman mete ajou varyab CSS sou klas de baz eleman yo (egzanp, .btn), sa ki pèmèt pou plis personnalisation an tan reyèl nan Bootstrap. Nan degaje ki vin apre yo, nou pral kontinye elaji itilizasyon varyab CSS nou yo nan layout nou an, fòm, moun k ap ede nou, ak sèvis piblik yo. Li plis sou varyab CSS nan chak eleman nan paj dokiman respektif yo.

Itilizasyon varyab CSS nou an pral yon ti jan enkonplè jiskaske Bootstrap 6. Pandan ke nou ta renmen konplètman aplike sa yo atravè tablo a, yo kouri risk pou yo lakòz chanjman kraze. Pou egzanp, mete $alert-border-width: var(--bs-border-width)nan kòd sous nou an kraze potansyèl Sass nan pwòp kòd ou si ou te fè $alert-border-width * 2pou kèk rezon.

Kòm sa yo, nenpòt kote sa posib, nou pral kontinye pouse nan direksyon pou plis varyab CSS, men tanpri rekonèt aplikasyon nou an ka yon ti kras limite nan v5.

Nouvo`_maps.scss`

Bootstrap v5.2.0 prezante yon nouvo dosye Sass ak _maps.scss. Li rale plizyè kat Sass _variables.scsspou ranje yon pwoblèm kote mizajou nan yon kat orijinal pa te aplike nan kat segondè ki pwolonje yo. Pou egzanp, mizajou nan $theme-colorsyo pa t ap aplike nan lòt kat tèm ki te konte sou $theme-colors, kraze flux travay pèsonalizasyon kle. Nan ti bout tan, Sass gen yon limit kote yon fwa yo te itilize yon varyab default oswa kat jeyografik , li pa ka mete ajou. Gen yon enpèfeksyon ki sanble ak varyab CSS lè yo ap itilize yo konpoze lòt varyab CSS.

Se poutèt sa pèsonalizasyon varyab nan Bootstrap dwe vini apre @import "functions", men anvan @import "variables"ak rès la nan pile enpòte nou an. Menm bagay la tou aplike nan kat Sass—ou dwe pase sou plas default yo anvan yo itilize yo. Kat sa yo te deplase nan nouvo a _maps.scss:

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

Konstriksyon Bootstrap CSS koutim ou yo ta dwe kounye a gade yon bagay tankou sa a ak yon enpòte kat separe.

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

Nouvo sèvis piblik

Elaji font-weightsèvis piblik yo enkli .fw-semiboldpou polis semibold.
border-radiusSèvis piblik elaji pou genyen de nouvo gwosè, .rounded-4ak .rounded-5, pou plis opsyon.

Chanjman adisyonèl

Entwodwi nouvo $enable-container-classesopsyon. — Koulye a, lè w ap patisipe nan Layout Grid CSS eksperimantal la, .container-*klas yo ap toujou konpile, sof si opsyon sa a mete sou false. Kontenè yo tou kounye a kenbe valè goutyè yo.
Eleman Offcanvas kounye a gen varyasyon reponn . Klas orijinal .offcanvasla pa chanje—li kache kontni atravè tout fenèt yo. Pou rann li reponn, chanje .offcanvasklas sa a nan nenpòt .offcanvas-{sm|md|lg|xl|xxl}klas.
Separe tab ki pi epè yo kounye a patisipe nan. — Nou te retire fwontyè ki pi epè ak pi difisil pou pase ant gwoup tab yo epi nou deplase li nan yon klas si ou ka aplike, .table-group-divider. Gade dokiman tablo yo pou yon egzanp.
Scrollspy te reekri pou sèvi ak Intersection Observer API , ki vle di ou pa bezwen ankouraj paran relatif, deprecateoffsetkonfigirasyon, ak plis ankò. Chèche aplikasyon Scrollspy ou yo pou yo pi egzak ak konsistan nan mete aksan sou nav yo.
Popovers ak konsèy sou zouti kounye a itilize varyab CSS. Gen kèk varyab CSS yo te mete ajou soti nan tokay Sass yo pou diminye kantite varyab yo. Kòm yon rezilta, twa varyab yo te obsève nan lage sa a: $popover-arrow-color, $popover-arrow-outer-color, ak $tooltip-arrow-color.
Te ajoute nouvo .text-bg-{color}èd. Olye pou yo mete moun .text-*ak .bg-*sèvis piblik yo, ou kapab kounye a itilize moun k ap .text-bg-*ede yo pou mete yon background-colorpremye plan ki diferan color.
Te ajoute .form-check-reversemodifye pou ranvèse lòd etikèt yo ak kaz/radyo ki asosye yo.
Te ajoute sipò kolòn trase nan tab atravè nouvo .table-striped-columnsklas la.

Pou yon lis konplè chanjman, gade pwojè v5.2.0 sou GitHub .

v5.1.0

Te ajoute sipò eksperimantal pou layout Grid CSS . — Sa a se yon travay nan pwogrè, epi li poko pare pou itilizasyon pwodiksyon, men ou ka patisipe nan nouvo karakteristik nan atravè Sass. Pou pèmèt li, enfim kadriyaj default la, pa mete $enable-grid-classes: falseak pèmèt Grid CSS la lè w mete $enable-cssgrid: true.
Mizajou navbars pou sipòte offcanvas. — Ajoute tiwa offcanvas nan nenpòt navbar ak .navbar-expand-*klas yo reponn ak kèk mak offcanvas.
Te ajoute yon nouvo konpozan anplasman . — Dernye eleman nou an, yon fason pou bay blòk tanporè olye de kontni reyèl pou ede endike ke yon bagay ap toujou chaje nan sit ou oswa aplikasyon w lan.
Plugin tonbe kounye a sipòte efondreman orizontal . — Ajoute .collapse-horizontalou .collapsepou tonbe a widtholye de height. Evite repenn navigatè a lè w mete yon min-heightoswa height.
Te ajoute nouvo chemine ak èd règ vètikal. — Byen vit aplike plizyè pwopriyete flexbox pou kreye byen vit layout koutim ak pil . Chwazi nan pil orizontal ( .hstack) ak vètikal ( ). .vstackAjoute divizyon vètikal menm jan ak <hr>eleman ak nouvo .vrasistan yo .
Te ajoute nouvo :rootvaryab global CSS. — Te ajoute plizyè nouvo varyab CSS nan :rootnivo pou kontwole <body>estil. Gen plis nan travay yo, ki gen ladan atravè sèvis piblik nou yo ak konpozan, men pou kounye a li moute CSS varyab nan seksyon an Customize .
Revize sèvis piblik koulè ak background pou itilize varyab CSS, epi ajoute nouvo opakite tèks ak sèvis piblik opakite background . — .text-* ak .bg-*sèvis piblik yo kounye a bati ak varyab CSS ak rgba()valè koulè, sa ki pèmèt ou fasilman Customize nenpòt sèvis piblik ak nouvo sèvis piblik opakite.
Te ajoute nouvo egzanp snippet ki baze pou montre kijan pou personnaliser konpozan nou yo. — Rale pare pou itilize konpozan Customized ak lòt modèl konsepsyon komen ak nouvo egzanp Fragments nou yo . Gen ladann pye de pye , deroulans , gwoup lis , ak modal .
Retire estil pwezante ki pa itilize nan popovers ak konsèy sou zouti paske Popper sèlman jere sa yo. $tooltip-marginte obsolète epi mete nullnan pwosesis la.

Vle plis enfòmasyon? Li pòs blog v5.1.0 la.

Hey la! Chanjman nan premye pi gwo lage Bootstrap 5, v5.0.0, dokimante anba a. Yo pa reflete chanjman adisyonèl yo montre pi wo a.

Depandans

Depoze jQuery.
Amelyore soti nan Popper v1.x nan Popper v2.x.
Ranplase Libsass ak Dart Sass kòm konpilatè Sass nou an bay Libsass te obsolèt.
Migre soti nan Jekyll nan Hugo pou bati dokiman nou an

Sipò navigatè

Depoze Internet Explorer 10 ak 11
Drop Microsoft Edge < 16 (Legacy Edge)
Depoze Firefox <60
Depoze Safari < 12
Depoze iOS Safari < 12
Depoze Chrome <60

Dokimantasyon chanjman

Redesigning paj dakèy, docs layout, ak footer.
Te ajoute nouvo gid Pasèl .
Te ajoute nouvo seksyon Customize , ranplase paj Theming v4 a , ak nouvo detay sou Sass, opsyon konfigirasyon mondyal, plan koulè, varyab CSS, ak plis ankò.
Reòganize tout dokiman fòm yo nan nouvo seksyon Fòm yo , separe kontni an nan paj ki pi konsantre.
Menm jan an tou, mete ajou seksyon Layout la , pou mete kontni kadriyaj la pi klè.
Chanje non paj eleman "Navs" nan "Navs & Tabs".
Chanje non paj "Tchèk" nan "Tchèk ak radyo".
Navbar la reamenaje epi ajoute yon nouvo subnav pou rann li pi fasil pou jwenn sit nou yo ak vèsyon dokiman yo.
Te ajoute nouvo rakoursi klavye pou jaden rechèch la: Ctrl + /.

Sass

Nou te abandone fusions kat Sass default yo pou rann li pi fasil pou retire valè redondants yo. Kenbe nan tèt ou kounye a ou dwe defini tout valè nan kat Sass yo tankou $theme-colors. Tcheke ki jan fè fas ak kat Sass .
KrazeChanje non color-yiq()fonksyon ak varyab ki gen rapò ak color-contrast()kòm li pa gen rapò ak espas koulè YIQ ankò. Gade #30168.
- $yiq-contrasted-thresholdyo chanje non an $min-contrast-ratio.
- $yiq-text-darkepi $yiq-text-lightyo respektivman chanje non $color-contrast-darkak $color-contrast-light.
KrazeParamèt mixins rechèch medya yo te chanje pou yon apwòch ki pi lojik.
- media-breakpoint-down()sèvi ak breakpoint nan tèt li olye pou pwochen breakpoint la (egzanp, media-breakpoint-down(lg)olye pou media-breakpoint-down(md)yo vize viewports ki pi piti pase lg).
- Menm jan an tou, dezyèm paramèt nan media-breakpoint-between()tou itilize breakpoint nan tèt li olye pou yo breakpoint kap vini an (egzanp, media-between(sm, lg)olye pou media-breakpoint-between(sm, md)yo vize viewports ant smak lg).
KrazeRetire estil enprime ak $enable-print-stylesvaryab. Klas ekspozisyon enprime yo toujou alantou. Gade #28339 .
KrazeDrop color(), theme-color(), ak gray()fonksyon an favè varyab. Gade #29083 .
KrazeChanje non theme-color-level()fonksyon color-level()ak kounye a aksepte nenpòt koulè ou vle olye pou $theme-coloryo koulè sèlman. Gade #29083 Atansyon: color-level() li te lage pita nan v5.0.0-alpha3.
KrazeChanje non $enable-prefers-reduced-motion-media-queryak $enable-pointer-cursor-for-buttonspou $enable-reduced-motionak $enable-button-pointerspou konsizyon.
KrazeRetire bg-gradient-variant()mixin la. Sèvi ak .bg-gradientklas la pou ajoute gradyan nan eleman olye pou yo klas pwodwi .bg-gradient-*yo.
Kraze Retire mixin ki te dekonekte deja:
- hover, hover-focus, plain-hover-focus, akhover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(tou te tonbe klas sèvis piblik ki asosye, .text-hide)
- visibility()
- form-control-focus()
KrazeChanje non scale-color()fonksyon pou shift-color()evite kolizyon ak pwòp fonksyon koulè Sass dekale.
box-shadowmixins kounye a pèmèt nullvalè ak gout nonesoti nan agiman miltip. Gade #30394 .
Mixin nan border-radius()kounye a gen yon valè default.

Sistèm koulè

Sistèm koulè ki te travay ak color-level()te $theme-color-intervalretire an favè yon nouvo sistèm koulè. Tout lighten()ak darken()fonksyon nan baz kòd nou an ranplase pa tint-color()ak shade-color(). Fonksyon sa yo pral melanje koulè a ak swa blan oswa nwa olye pou yo chanje légèreté li pa yon kantite lajan fiks. A shift-color()pral swa tente oswa lonbraj yon koulè depann sou si paramèt pwa li yo pozitif oswa negatif. Gade #30622 pou plis detay.
Te ajoute nouvo koulè ak tout koulè pou chak koulè, bay nèf koulè separe pou chak koulè baz, kòm nouvo varyab Sass.
Amelyore kontras koulè. Pwopòsyon kontras koulè a soti nan 3:1 a 4.5:1 ak ajou koulè ble, vèt, cyan, ak woz pou asire kontras WCAG 2.1 AA. Epitou chanje koulè kontras koulè nou an soti $gray-900nan $black.
Pou sipòte sistèm koulè nou an, nou te ajoute nouvo koutim tint-color()ak shade-color()fonksyon pou melanje koulè nou yo kòmsadwa.

Mizajou griyaj

Nouvo breakpoint! Te ajoute nouvo xxlbreakpoint pou 1400pxak moute. Pa gen chanjman nan tout lòt breakpoints.
Goutyè yo amelyore. Goutyè yo kounye a mete an rems, epi yo pi etwat pase v4 ( 1.5rem, oswa apeprè 24px, desann soti nan 30px). Sa a aliman goutyè sistèm kadriyaj nou an ak sèvis piblik espas nou yo.
- Te ajoute nouvo klas goutyè ( .g-*, .gx-*, ak .gy-*) pou kontwole goutyè orizontal/vètikal, goutyè orizontal, ak goutyè vètikal.
- KrazeChanje non .no-guttersan .g-0pou matche ak nouvo sèvis piblik goutyè yo.
Kolòn yo pa position: relativeaplike ankò, kidonk ou ka oblije ajoute .position-relativekèk eleman pou retabli konpòtman sa a.
KrazeDepoze plizyè .order-*klas ki souvan te pa itilize. Nou kounye a sèlman bay .order-1soti .order-5nan bwat la.
KrazeDepoze .mediaeleman an kòm li ka fasil replike ak sèvis piblik. Gade #28265 ak paj sèvis piblik flex pou yon egzanp .
Kraze bootstrap-grid.csskounye a sèlman aplike box-sizing: border-boxnan kolòn nan olye pou yo retabli bwat-gwosè mondyal la. Nan fason sa a, estil kadriyaj nou yo ka itilize nan plis kote san entèferans.
$enable-grid-classespa enfim jenerasyon klas veso yo ankò. Gade #29146.
Mizajou make-colmixin a pou default nan kolòn egal san yon gwosè espesifye.

Kontni, rdemare, elatriye

RFS kounye a aktive pa default. Tit ki sèvi akfont-size()mixin la pral otomatikman ajiste yofont-sizenan echèl ak viewport la. Karakteristik sa a te deja patisipe ak v4.
KrazeRevize tipografi ekspozisyon nou an pou ranplase $display-*varyab nou yo ak yon $display-font-sizeskat Sass. Epitou retire $display-*-weightvaryab endividyèl yo pou yon sèl $display-font-weightak ajiste font-sizes.
Te ajoute de nouvo .display-*gwosè tit, .display-5ak .display-6.
Lyen yo souliye pa default (pa sèlman sou hover), sof si yo fè pati eleman espesifik.
Tablo reamenaje pou rafrechi estil yo epi rekonstwi yo ak varyab CSS pou plis kontwòl sou stil.
KrazeTablo anbrike pa eritye estil ankò.
Kraze .thead-lightepi .thead-darkyo abandone an favè .table-*klas variant yo ki ka itilize pou tout eleman tab yo ( thead, tbody, tfoot, tr, thak td).
KrazeYo table-row-variant()chanje non mixin nan table-variant()epi li aksepte sèlman 2 paramèt: $color(non koulè) ak $value(kod koulè). Koulè fwontyè a ak koulè aksan yo otomatikman kalkile dapre varyab faktè tab yo.
Divize varyab padding selil tab yo nan -yak -x.
KrazeDepoze .pre-scrollableklas la. Gade #29135
Kraze .text-*sèvis piblik yo pa ajoute eta yo hover ak konsantre sou lyen ankò. .link-*Yo ka itilize klas asistan pito. Gade #29267
KrazeDepoze .text-justifyklas la. Gade #29793
Kraze ~~<hr>eleman kounye a itilize heightolye pou borderyo pi byen sipòte sizeatribi a. Sa a pèmèt tou itilize sèvis piblik padding pou kreye divizyon ki pi epè (egzanp, <hr class="py-1">).~~
Reyajiste default orizontal padding-leftsou <ul>ak <ol>eleman nan navigatè default 40pxnan 2rem.
Te ajoute $enable-smooth-scroll, ki aplike scroll-behavior: smoothglobalman—eksepte pou itilizatè ki mande pou redui mouvman atravè prefers-reduced-motiondemann medya yo. Gade #31877

RTL

Direksyon orizontal varyab espesifik, sèvis piblik, ak mixin yo tout te chanje non yo sèvi ak pwopriyete lojik tankou sa yo jwenn nan layouts flexbox—eg, startak endnan plas leftak right.

Fòm

Te ajoute nouvo fòm k ap flote! Nou te ankouraje egzanp Floating Labels nan eleman fòm konplètman sipòte. Gade nouvo paj Etikèt k ap flote.
Kraze Konsolide eleman fòm natif natal ak koutim. Yo te konsolide kaz, radyo, seleksyon, ak lòt antre ki te gen klas natif natal ak koutim nan v4. Koulye a, prèske tout eleman fòm nou yo se antyèman koutim, pifò san yo pa bezwen HTML koutim.
- .custom-control.custom-checkboxse kounye a .form-check.
- .custom-control.custom-custom-radiose kounye a .form-check.
- .custom-control.custom-switchse kounye a .form-check.form-switch.
- .custom-selectse kounye a .form-select.
- .custom-fileepi .form-fileyo te ranplase pa estil koutim sou tèt .form-control.
- .custom-rangese kounye a .form-range.
- Depoze natif natal .form-control-fileak .form-control-range.
KrazeDepoze .input-group-appendak .input-group-prepend. Ou kapab kounye a jis ajoute bouton ak .input-group-textkòm pitit dirèk nan gwoup yo opinyon.
Reyon fwontyè ki manke depi lontan sou gwoup opinyon ak ensèk fidbak validasyon finalman fikse lè yo ajoute yon .has-validationklas adisyonèl nan gwoup antre ak validation.
Kraze Depoze klas layout fòm espesifik pou sistèm kadriyaj nou an. Sèvi ak kadriyaj nou an ak sèvis piblik olye pou yo .form-group, .form-row, oswa .form-inline.
KrazeEtikèt fòm kounye a mande pou .form-label.
Kraze .form-textpa mete ankò display, sa ki pèmèt ou kreye tèks èd aliye oswa bloke jan ou vle jis pa chanje eleman HTML la.
Kontwòl fòm yo pa itilize ankò heightlè sa posib, olye de ranvwaye pou min-heightamelyore personnalisation ak konpatibilite ak lòt konpozan.
Ikon validasyon yo pa aplike ankò nan <select>s ak multiple.
Fichye Sass sous rearanje anba scss/forms/, ki gen ladan estil gwoup opinyon.

Eleman

Valè inifye paddingpou alèt, breadcrumbs, kat, dropdowns, gwoup lis, modal, popovers, ak konsèy sou zouti yo dwe baze sou $spacervaryab nou an. Gade #30564 .

Akòdeyon

Te ajoute nouvo eleman akòdeyon .

Alèt

Alèt kounye a gen egzanp ak ikon .
Retire estil koutim pou <hr>s nan chak alèt paske yo deja itilize currentColor.

Badj

KrazeDepoze tout .badge-*klas koulè pou sèvis piblik background (egzanp, sèvi ak .bg-primaryolye de .badge-primary).
KrazeDropped .badge-pill- sèvi ak .rounded-pillsèvis piblik la pito.
KrazeRetire estil hover ak konsantre pou <a>ak <button>eleman yo.
Ogmante padding default pou badj soti nan .25em/ .5emrive .35em/ .65em.

Ti pen

Senplifye aparans la default nan ti kal pen pa retire padding, background-color, ak border-radius.
Te ajoute nouvo pwopriyete koutim CSS --bs-breadcrumb-dividerpou personnalisation fasil san yo pa bezwen rekonpile CSS.

Bouton

Kraze Bouton baskile , ki gen kaz oswa radyo, pa bezwen JavaScript ankò epi yo gen nouvo mak. Nou pa bezwen yon eleman anbalaj ankò, ajoute.btn-checknan<input>, epi pè li ak nenpòt.btnklas sou<label>. Gade #30650 . Dokiman pou sa a te deplase soti nan paj Bouton nou an nan nouvo seksyon Fòm yo.
Kraze Depoze .btn-blockpou sèvis piblik. Olye pou yo itilize .btn-blocksou .btn, vlope bouton ou yo ak .d-gridyon .gap-*sèvis piblik pou espas yo jan sa nesesè. Chanje nan klas ki reponn pou plis kontwòl sou yo. Li dokiman yo pou kèk egzanp.
Mete ajou nou button-variant()ak button-outline-variant()mixins pou sipòte paramèt adisyonèl.
Mizajou bouton pou asire plis kontras sou eta aktif ak plan.
Bouton andikape kounye a gen pointer-events: none;.

Kat

KrazeDepoze .card-deckan favè griy nou an. Anvlope kat ou yo nan klas kolòn epi ajoute yon .row-cols-*veso paran pou rkree kat kat (men ak plis kontwòl sou aliyman reponn).
KrazeDepoze .card-columnsan favè masonry. Gade #28922 .
KrazeRanplase .cardakòdeyon ki baze a ak yon nouvo eleman akòdeyon .

Carousel

Te ajoute nouvo .carousel-darkvariant pou tèks nwa, kontwòl, ak endikatè (bon anpil pou orijin pi lejè).
Ranplase ikon chevron pou kontwòl Carousel ak nouvo SVG ki soti nan Bootstrap Icons .

Bouton fèmen

KrazeChanje non .closean .btn-closepou yon non mwens jenerik.
Bouton fèmen kounye a sèvi ak yon background-image(SVG entegre) olye pou yo yon ×nan HTML a, ki pèmèt pou personnalisation pi fasil san yo pa bezwen manyen maketing ou a.
Te ajoute nouvo .btn-close-whitevariant ki itilize filter: invert(1)pou pèmèt pi wo kontras ranvwaye ikon kont orijin ki pi fonse.

Tonbe

Retire ancrage woulo liv pou akòdeyon.

Dropdowns

Te ajoute nouvo .dropdown-menu-darkvariant ak varyab ki asosye pou deroulan nwa sou demann.
Te ajoute nouvo varyab pou $dropdown-padding-x.
Fè nwa divizyon dropdown pou amelyore kontras.
KrazeTout evènman yo pou deroule a yo kounye a deklanche sou bouton an aktive dropdown ak Lè sa a, bulle jiska eleman paran an.
Meni dropdown kounye a gen yon data-bs-popper="static"atribi mete lè pwezante nan dropdown la estatik, oswa dropdown nan navbar la. Sa a se ajoute pa JavaScript nou an epi li ede nou itilize estil pozisyon koutim san yo pa entèfere ak pwezante Popper a.
KrazeDepoze flipopsyon pou Plugin dropdown an favè konfigirasyon Popper natif natal. Ou kapab kounye a enfim konpòtman an ranvèrsan lè w pase yon etalaj vid pou fallbackPlacementsopsyon nan modifye baskile .
Meni déroulant kapab kounye a klike ak yon nouvo autoCloseopsyon pou okipe konpòtman fèmen oto . Ou ka itilize opsyon sa a pou aksepte klike sou andedan oswa deyò meni deroule a pou fè li entèaktif.
Dropdowns kounye a sipòte .dropdown-items ki vlope nan <li>s.

Jumbotron

KrazeDepoze eleman jumbotron kòm li ka repwodui ak sèvis piblik. Gade nouvo egzanp Jumbotron nou an pou yon demonstrasyon.

Lis gwoup

Te ajoute nouvo .list-group-numberedmodifye nan gwoup lis yo.

Nav ak onglets

Te ajoute nouvo nullvaryab pou font-size, font-weight, color, ak :hover colornan .nav-linkklas la.

Navbars

KrazeNavbars kounye a mande pou yon veso nan (pou byen senplifye kondisyon espas ak CSS obligatwa).
KrazeKlas .activela pa ka aplike nan .nav-items ankò, li dwe aplike dirèkteman sou .nav-links.

Offcanvas

Te ajoute nouvo eleman offcanvas la .

Papyaj

Lyen pajyon kounye a gen personnalisable margin-leftki dinamik awondi sou tout kwen lè yo separe youn ak lòt.
Te ajoute transitions nan lyen pagination.

Popovers

KrazeChanje non .arrowan .popover-arrownan modèl popover default nou an.
Chanje non whiteListopsyon a allowList.

Spinners

Spinners kounye a onore prefers-reduced-motion: reducepa ralanti animasyon yo. Gade #31882 .
Amelyore spinner aliyman vètikal.

Toasts

Toasts kapab kounye a pozisyone nan yon .toast-containerak èd pwezante sèvis piblik yo .
Chanje dire defo pen griye a 5 segonn.
Retire overflow: hiddennan toasts ak ranplase ak bon border-radiuss ak calc()fonksyon.

Konsèy zouti

KrazeChanje non .arrowan .tooltip-arrownan modèl defo tooltip nou an.
KrazeValè default la fallbackPlacementschanje an ['top', 'right', 'bottom', 'left']pou pi bon plasman eleman popper yo.
KrazeChanje non whiteListopsyon a allowList.

Itilite yo

KrazeChanje non plizyè sèvis piblik pou itilize non pwopriyete ki lojik olye pou yo non direksyon ak adisyon sipò RTL:
- Chanje non .left-*ak .right-*pou .start-*ak .end-*.
- Chanje non .float-leftak .float-rightpou .float-startak .float-end.
- Chanje non .border-leftak .border-rightpou .border-startak .border-end.
- Chanje non .rounded-leftak .rounded-rightpou .rounded-startak .rounded-end.
- Chanje non .ml-*ak .mr-*pou .ms-*ak .me-*.
- Chanje non .pl-*ak .pr-*pou .ps-*ak .pe-*.
- Chanje non .text-leftak .text-rightpou .text-startak .text-end.
KrazeEnfim maj negatif pa default.
Te ajoute nouvo .bg-bodyklas pou byen vit mete <body>background nan nan eleman adisyonèl.
Te ajoute sèvis piblik nouvo pozisyon pou top, right, bottom, ak left. Valè yo enkli 0, 50%, ak 100%pou chak pwopriyete.
Te ajoute nouvo .translate-middle-xak .translate-middle-ysèvis piblik nan orizontal oswa vètikal sant eleman absoli / fiks pozisyone.
Te ajoute nouvo border-widthsèvis piblik .
KrazeChanje non .text-monospacean .font-monospace.
KrazeRetire .text-hidekòm li se yon metòd demode pou kache tèks ki pa ta dwe itilize ankò.
Te ajoute .fs-*sèvis piblik pou font-sizesèvis piblik (ak RFS aktive). Sa yo itilize menm echèl la ak tit default HTML yo (1-6, gwo ak piti), epi yo ka modifye atravè kat Sass.
KrazeChanje non .font-weight-*sèvis piblik yo kòm .fw-*pou konsizyon ak konsistans.
KrazeChanje non .font-style-*sèvis piblik yo kòm .fst-*pou konsizyon ak konsistans.
Te ajoute .d-gridnan ekspozisyon sèvis piblik ak nouvo gapsèvis piblik ( .gap) pou CSS Grid ak layouts flexbox.
KrazeRetire .rounded-smak rounded-lg, epi prezante yon nouvo echèl klas, .rounded-0nan .rounded-3. Gade #31687 .
Te ajoute nouvo line-heightsèvis piblik: .lh-1, .lh-sm, .lh-baseak .lh-lg. Gade isit la .
Deplase .d-nonesèvis piblik la nan CSS nou an pou bay li plis pwa sou lòt sèvis piblik ekspozisyon.
Pwolonje .visually-hidden-focusableèd la pou travay tou sou resipyan, lè l sèvi avèk :focus-within.

Èd yo

Kraze Yo te chanje non moun k ap ede entègrasyon ki reponn yo an asistan rapò ak nouvo non klas ak konpòtman amelyore, ansanm ak yon varyab CSS itil.
- Yo te chanje non klas yo pou chanje bynan xrapò aspè yo. Pou egzanp, .ratio-16by9se kounye a .ratio-16x9.
- Nou te lage .embed-responsive-itemseleksyon an ak gwoup eleman an favè yon .ratio > *seleksyon ki pi senp. Pa gen plis klas ki nesesè, ak asistan rapò a kounye a ap travay ak nenpòt eleman HTML.
- Yo $embed-responsive-aspect-ratioste chanje non kat Sass la $aspect-ratiosak valè li yo te senplifye pou enkli non klas la ak pousantaj la kòm key: valuepè a.
- Varyab CSS yo kounye a pwodwi epi yo enkli pou chak valè nan kat Sass la. Modifye --bs-aspect-ratiovaryab la .ratiopou kreye nenpòt rapò aspè koutim .
Kraze Kounye a, klas “Lektè ekran” yo se klas “vizyèlman kache” .
- Chanje dosye Sass la soti scss/helpers/_screenreaders.scssnanscss/helpers/_visually-hidden.scss
- Chanje non .sr-onlyak .sr-only-focusablepou .visually-hiddenak.visually-hidden-focusable
- Chanje non sr-only()ak sr-only-focusable()melanje visually-hidden()ak visually-hidden-focusable().
bootstrap-utilities.csskounye a gen ladan tou moun k ap ede nou yo. Èd yo pa bezwen enpòte nan bati koutim ankò.

JavaScript

Depoze depandans jQuery ak reekri grefon yo dwe nan JavaScript regilye.
KrazeDone atribi pou tout grefon JavaScript yo kounye a gen espas non yo ede distenge fonksyonalite Bootstrap de twazyèm pati ak pwòp kòd ou. Pa egzanp, nou itilize data-bs-toggleolye de data-toggle.
Tout grefon kapab kounye a aksepte yon seleksyon CSS kòm premye agiman an. Ou ka swa pase yon eleman DOM oswa nenpòt seleksyon CSS valab pou kreye yon nouvo egzanp Plugin la:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigka pase kòm yon fonksyon ki aksepte Bootstrap a default Popper konfigirasyon kòm yon agiman, pou ke ou ka rantre konfigirasyon default sa a nan fason ou. Aplike nan dropdowns, popovers, ak konsèy sou zouti.
Valè defo pou yo fallbackPlacementschanje an ['top', 'right', 'bottom', 'left']pou pi bon plasman eleman Popper yo. Aplike nan dropdowns, popovers, ak konsèy sou zouti.
Retire souliye nan metòd piblik estatik tankou _getInstance()→ getInstance().