in English

Migrazzjoni lejn v5

Issegwi u rrevedi l-bidliet fil-fajls tas-sors tal-Bootstrap, id-dokumentazzjoni u l-komponenti biex jgħinuk temigra minn v4 għal v5.

Fuq din il-paġna

v5.2.0

Disinn aggornat

Bootstrap v5.2.0 jinkludi aġġornament tad-disinn sottili għal numru żgħir ta 'komponenti u proprjetajiet madwar il-proġett, l-aktar permezz ta' border-radiusvaluri raffinati fuq buttuni u kontrolli tal-formoli . Id-dokumentazzjoni tagħna ġiet aġġornata wkoll b'paġna ewlenija ġdida, tqassim aktar sempliċi tad-dokumenti li ma jibqax jikkrolla sezzjonijiet tal-istrixxa tal-ġenb, u eżempji aktar prominenti ta' Ikoni Bootstrap .

Aktar varjabbli CSS

Aġġornajna l-komponenti kollha tagħna biex nużaw varjabbli CSS. Filwaqt li Sass għadu jirfed kollox, kull komponent ġie aġġornat biex jinkludi varjabbli CSS fuq il-klassijiet bażi tal-komponenti (eż, .btn), li jippermetti aktar customization f'ħin reali ta 'Bootstrap. Fir-rilaxxi sussegwenti, aħna ser inkomplu nespandu l-użu tagħna tal-varjabbli CSS fit-tqassim, il-formoli, l-helpers u l-utilitajiet tagħna. Aqra aktar dwar il-varjabbli CSS f'kull komponent fuq il-paġni tad-dokumentazzjoni rispettivi tagħhom.

L-użu tal-varjabbli tas-CSS tagħna se jkun kemmxejn inkomplet sal-Bootstrap 6. Filwaqt li nixtiequ nimplimentawhom b'mod sħiħ madwar il-bord, huma għandhom ir-riskju li jikkawżaw bidliet ta 'ksur. Pereżempju, l-issettjar $alert-border-width: var(--bs-border-width)fil-kodiċi tas-sors tagħna jkisser Sass potenzjali fil-kodiċi tiegħek jekk kont qed tagħmel $alert-border-width * 2għal xi raġuni.

Bħala tali, kull fejn ikun possibbli, aħna se nkomplu nimbuttaw lejn aktar varjabbli CSS, iżda jekk jogħġbok rrikonoxxi li l-implimentazzjoni tagħna tista 'tkun kemmxejn limitata f'v5.

Ġdid`_maps.scss`

Bootstrap v5.2.0 introduċa fajl Sass ġdid b' _maps.scss. Jiġbed diversi mapep Sass minn _variables.scssbiex jirranġa kwistjoni fejn aġġornamenti għal mappa oriġinali ma ġewx applikati għal mapep sekondarji li jestenduhom. Pereżempju, aġġornamenti għal $theme-colorsma kinux qed jiġu applikati għal mapep tematiċi oħra li kienu jiddependu fuq $theme-colors, li jiksru flussi tax-xogħol ta 'personalizzazzjoni ewlenin. Fil-qosor, Sass għandu limitazzjoni fejn ladarba varjabbli jew mappa default tkun intużat , ma tistax tiġi aġġornata. Hemm nuqqas simili mal-varjabbli CSS meta jintużaw biex jikkomponu varjabbli CSS oħra.

Dan huwa għaliex customizations varjabbli f'Bootstrap għandhom jiġu wara @import "functions", iżda qabel @import "variables"u l-bqija tal-munzell ta 'importazzjoni tagħna. L-istess japplika għall-mapep Sass — trid tegħleb il-inadempjenzi qabel ma jintużaw. Il-mapep li ġejjin ġew imċaqalqa għall-ġdid _maps.scss:

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

Il-bini personali tiegħek tal-Bootstrap CSS issa għandu jidher xi ħaġa bħal din b'importazzjoni ta' mapep separata.

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

Utilitajiet ġodda

font-weightUtilitajiet estiżi biex jinkludu .fw-semiboldgħal fonts semibold.
border-radiusUtilitajiet estiżi biex jinkludu żewġ daqsijiet ġodda, .rounded-4u .rounded-5, għal aktar għażliet.

Bidliet addizzjonali

Introduċiet $enable-container-classesgħażla ġdida. — Issa meta tagħżel it-tqassim sperimentali tal-Grid CSS, il- .container-*klassijiet xorta se jiġu kkompilati, sakemm din l-għażla ma tkunx issettjata għal false. Il-kontenituri wkoll issa jżommu l-valuri tal-kanal tagħhom.
Il-komponent Offcanvas issa għandu varjazzjonijiet li jirrispondu . Il-klassi oriġinali .offcanvastibqa' mhux mibdula—taħbi l-kontenut fil-wiri kollha. Biex tagħmilha tirrispondi, ibdel dik il .offcanvas-klassi għal kwalunkwe .offcanvas-{sm|md|lg|xl|xxl}klassi.
Diviżuri tal-mejda eħxen issa huma opt-in. — Neħħejna l-bord eħxen u aktar diffiċli biex jinqabżu bejn il-gruppi tal-mejda u ċċaqlaqna għal klassi fakultattiva li tista' tapplika, .table-group-divider. Ara d-dokumenti tat-tabella għal eżempju.
Scrollspy inkiteb mill-ġdid biex juża l-API tal-Osservatur tal-Intersezzjoni , li jfisser li m'għadx għandek bżonn tgeżwir tal-ġenituri relattivi,offsetkonfigurazzjoni deprecates, u aktar. Fittex għall-implimentazzjonijiet Scrollspy tiegħek biex ikunu aktar preċiżi u konsistenti fl-enfasi tan-nav tagħhom.
Popovers u tooltips issa jużaw varjabbli CSS. Xi varjabbli CSS ġew aġġornati mill-kontropartijiet Sass tagħhom biex jitnaqqas in-numru ta 'varjabbli. Bħala riżultat, tliet varjabbli ġew deprecati f'dan ir-rilaxx: $popover-arrow-color, $popover-arrow-outer-color, u $tooltip-arrow-color.
Żieda .text-bg-{color}helpers ġodda. Minflok ma tistabbilixxi individwali .text-*u .bg-*utilitajiet, issa tista 'tuża l- .text-bg-*helpers biex tissettja background-colortagħrif miksub kontrastanti color.
Miżjud .form-check-reversemodifikatur biex taqleb l-ordni tat-tikketti u kaxxi/radju assoċjati.
Miżjud appoġġ għall -kolonni strixxi għat-tabelli permezz tal- .table-striped-columnsklassi l-ġdida.

Għal lista sħiħa ta 'bidliet, ara l-proġett v5.2.0 fuq GitHub .

v5.1.0

Miżjud appoġġ sperimentali għat -tqassim tal-Grid CSS . — Dan huwa xogħol li qed isir, u għadu mhux lest għall-użu fil-produzzjoni, iżda tista 'tagħżel il-karatteristika l-ġdida permezz ta' Sass. Biex tippermettiha, iddiżattiva l-grilja default, billi tissettja $enable-grid-classes: falseu ppermettiet is-CSS Grid billi tissettja $enable-cssgrid: true.
Navbars aġġornati biex jappoġġjaw offcanvas. — Żid kxaxen offcanvas fi kwalunkwe navbar bil- .navbar-expand-*klassijiet li jirrispondu u xi markup offcanvas.
Miżjud komponent ġdid ta' placeholder . — Il-komponent l-aktar ġdid tagħna, mod kif tipprovdi blokki temporanji minflok kontenut reali biex tgħin tindika li xi ħaġa għadha qed titgħabba fis-sit jew l-app tiegħek.
Il-plugin tal-kollass issa jappoġġja l -kollass orizzontali . — Żid .collapse-horizontalmal tiegħek .collapsebiex tikkollassa l- widthminflok il- height. Evita żebgħa mill-ġdid tal-browser billi tistabbilixxi min-heightjew height.
Miżjud munzell ġdid u helpers tar-regoli vertikali. — Applika malajr proprjetajiet multipli tal-flexbox biex toħloq malajr layouts personalizzati b'munzelli . Agħżel minn munzelli orizzontali ( .hstack) u vertikali ( ). .vstackŻid diviżuri vertikali simili għal <hr>elementi mal- helpers ġodda.vr .
:rootMiżjud varjabbli CSS globali ġodda . — Żieda diversi CSS varjabbli ġodda fil- :rootlivell għall-kontroll ta ' <body>stili. Hemm aktar xogħol, inkluż fl-utilitajiet u l-komponenti tagħna, iżda għalissa aqra l -varjabbli CSS fit-taqsima Ippersonalizza .
Kulur u utilitajiet fl-isfond ġew riveduti biex tuża varjabbli CSS, u miżjuda opaċità tat- test ġdid u utilitajiet ta 'opaċità fl-isfond . — .text-* u l- .bg-*utilitajiet issa huma mibnija b'varjabbli CSS u rgba()valuri tal-kulur, li jippermettulek tippersonalizza faċilment kwalunkwe utilità b'utilitajiet ġodda ta 'opaċità.
Żiedu eżempji ta’ snippet ġodda bbażati biex juru kif nippersonalizzaw il-komponenti tagħna. — Iġbed lesti biex tuża komponenti personalizzati u mudelli oħra tad-disinn komuni bl- eżempji Snippets ġodda tagħna . Jinkludi footers , dropdowns , gruppi ta ' lista , u modals .
Neħħew stili ta' pożizzjonament mhux użati minn popovers u tooltips peress li dawn huma mmaniġġjati biss minn Popper. $tooltip-marginġie deprecated u stabbilit nullfil-proċess.

Trid aktar informazzjoni? Aqra l-post tal-blog v5.1.0.

Ħej hemm! Bidliet għall-ewwel rilaxx ewlieni tagħna ta 'Bootstrap 5, v5.0.0, huma dokumentati hawn taħt. Ma jirriflettux il-bidliet addizzjonali murija hawn fuq.

Dipendenzi

Waqqa jQuery.
Imtejba minn Popper v1.x għal Popper v2.x.
Libsass mibdul b'Dart Sass peress li l-kompilatur tagħna ta' Sass mogħti Libsass kien deprecated.
Emigrajt minn Jekyll għal Hugo għall-bini tad-dokumentazzjoni tagħna

Appoġġ għall-browser

Waqqa l-Internet Explorer 10 u 11
Microsoft Edge twaqqa' < 16 (Legacy Edge)
Waqqa' Firefox < 60
Waqqa' Safari < 12
Waqa' iOS Safari < 12
Chrome waqa' < 60

Bidliet fid-dokumentazzjoni

Homepage, tqassim tad-doks, u footer imfassla mill-ġdid.
Miżjud gwida ġdida tal-Pakketti .
Miżjud taqsima ġdida Customize , li tissostitwixxi l-paġna Theming ta' v4 , b'dettalji ġodda dwar Sass, għażliet ta' konfigurazzjoni globali, skemi ta' kuluri, varjabbli CSS, u aktar.
Riorganizzat id-dokumentazzjoni kollha tal -formoli f'sezzjoni ġdida ta' Formoli , u tkisser il-kontenut f'paġni aktar iffukati.
Bl-istess mod, aġġorna t-taqsima Layout , biex ilaħħam il-kontenut tal-grilja b'mod aktar ċar.
Isimha mill-ġdid il-paġna tal-komponent “Navs” għal “Navs & Tabs”.
Isimha mill-ġdid il-paġna “Verifiki” għal “Verifiki u radjijiet”.
Iddisinja mill-ġdid in-navbar u żied subnav ġdid biex tagħmilha aktar faċli li wieħed imur madwar is-siti u l-verżjonijiet tad-doks tagħna.
Miżjud shortcut ġdid tat-tastiera għall-qasam tat-tfittxija: Ctrl + /.

Sass

Neħħejna l-mappa Sass default biex tagħmilha aktar faċli li jitneħħew valuri żejda. Żomm f'moħħok li issa trid tiddefinixxi l-valuri kollha fil-mapep Sass bħal $theme-colors. Iċċekkja kif tittratta l- mapep Sass .
TkissirFunzjoni b'isem ġdid color-yiq()u varjabbli relatati għal color-contrast()peress li m'għadhiex relatata mal-ispazju tal-kulur YIQ. Ara #30168.
- $yiq-contrasted-thresholdhuwa msemmi mill-ġdid għal $min-contrast-ratio.
- $yiq-text-darku $yiq-text-lighthuma rispettivament isem ġdid għal $color-contrast-darku $color-contrast-light.
TkissirIl-parametri mixins ta' query tal-midja nbidlu għal approċċ aktar loġiku.
- media-breakpoint-down()juża l-breakpoint innifsu minflok il-breakpoint li jmiss (eż., media-breakpoint-down(lg)minflok media-breakpoint-down(md)jimmira viewports iżgħar minn lg).
- Bl-istess mod, it-tieni parametru in media-breakpoint-between()juża wkoll il-breakpoint innifsu minflok il-breakpoint li jmiss (eż., media-between(sm, lg)minflok media-breakpoint-between(sm, md)jimmira viewports bejn smu lg).
TkissirNeħħew stili stampati u $enable-print-stylesvarjabbli. Klassijiet tal-wiri tal-istampar għadhom madwar. Ara #28339 .
TkissirWaqqa color(), theme-color(), u gray()funzjonijiet favur varjabbli. Ara #29083 .
Tkissirtheme-color-level()Funzjoni b'isem ġdid għal color-level()u issa taċċetta kwalunkwe kulur li trid minflok $theme-colorkuluri biss. Ara #29083 Oqgħod attent: color-level() aktar tard twaqqgħet fi v5.0.0-alpha3.
TkissirIsmu mill -ġdid $enable-prefers-reduced-motion-media-queryu $enable-pointer-cursor-for-buttonsgħal $enable-reduced-motionu $enable-button-pointersgħall-qosor.
TkissirNeħħa l- bg-gradient-variant()mixin. Uża l- .bg-gradientklassi biex iżżid gradjenti ma' elementi minflok il- .bg-gradient-*klassijiet iġġenerati.
Tkissir Tneħħew mixins li qabel kienu deprecati:
- hover, hover-focus, plain-hover-focus, uhover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(Waqqa' wkoll il-klassi ta' utilità assoċjata, .text-hide)
- visibility()
- form-control-focus()
Tkissirscale-color()Funzjoni b'isem ġdid biex shift-color()tiġi evitata ħabta mal-funzjoni ta 'skala tal-kulur ta' Sass stess.
box-shadowmixins issa jippermettu nullvaluri u qatra noneminn argumenti multipli. Ara #30394 .
Il- border-radius()mixin issa għandu valur default.

Sistema tal-kulur

Is-sistema tal-kulur li ħadmet color-level()u $theme-color-intervaltneħħiet favur sistema ġdida tal-kulur. Kollha lighten()u l- darken()funzjonijiet fil-codebase tagħna huma sostitwiti minn tint-color()u shade-color(). Dawn il-funzjonijiet se jħalltu l-kulur jew bl-abjad jew bl-iswed minflok ma jibdlu l-ħeffa tiegħu b'ammont fiss. Il shift-color()-lewn jew sfumatura ta 'kulur skond jekk il-parametru tal-piż tiegħu huwiex pożittiv jew negattiv. Ara #30622 għal aktar dettalji.
Żiedu sfumaturi u sfumaturi ġodda għal kull kulur, li jipprovdu disa 'kuluri separati għal kull kulur bażi, bħala varjabbli Sass ġodda.
Kuntrast tal-kulur imtejjeb. Proporzjon ta 'kuntrast tal-kulur imtaffi minn 3:1 sa 4.5:1 u kuluri aġġornati blu, aħdar, cyan, u roża biex jiżguraw kuntrast WCAG 2.1 AA. Bidla wkoll il-kulur tal-kuntrast tal-kulur tagħna minn $gray-900għal $black.
Biex nappoġġjaw is-sistema tal-kulur tagħna, żidna użanza tint-color()u shade-color()funzjonijiet ġodda biex inħalltu l-kuluri tagħna b'mod xieraq.

Aġġornamenti tal-grilja

Breakpoint ġdid! Miżjud xxlbreakpoint ġdid għal 1400pxu up. L-ebda tibdil fil-breakpoints l-oħra kollha.
Canali mtejba. Il-kanali issa huma stabbiliti f'rems, u huma idjaq minn v4 ( 1.5rem, jew madwar 24px, 'l isfel minn 30px). Dan jallinja l-kanali tas-sistema tal-grilja tagħna mal-utilitajiet tal-ispazjar tagħna.
- Miżjud klassi ġdida tal-kanal ( .g-*, .gx-*, u .gy-*) biex tikkontrolla kanali orizzontali/vertikali, kanali orizzontali, u kanali vertikali.
- TkissirIsmu mill -ġdid .no-guttersbiex .g-0jaqbel ma' utilitajiet ġodda tal-kanal.
Il-kolonni m'għadhomx position: relativeapplikaw, għalhekk jista' jkun li jkollok iżżid .position-relativema' xi elementi biex tirrestawra dik l-imġieba.
TkissirWaqqa 'diversi .order-*klassijiet li ħafna drabi ma ntużawx. Aħna issa nipprovdu biss .order-1lil .order-5barra mill-kaxxa.
TkissirWaqqa 'l- .mediakomponent peress li jista' jiġi replikat faċilment b'utilitajiet. Ara #28265 u l- paġna tal-utilitajiet flex għal eżempju .
Tkissir bootstrap-grid.cssissa japplika biss box-sizing: border-boxgħall-kolonna minflok ma jerġa 'jissettja l-kaxxa tad-daqs globali. Dan il-mod, l-istili tal-grilja tagħna jistgħu jintużaw f'aktar postijiet mingħajr interferenza.
$enable-grid-classesma jibqax jiskonnettja l-ġenerazzjoni tal-klassijiet tal-kontejners aktar. Ara #29146.
Aġġorna l- make-colmixin għal default għal kolonni ugwali mingħajr daqs speċifikat.

Kontenut, Reboot, eċċ

L- RFS issa hija attivata awtomatikament. L-intestaturi li jużaw il-font-size()mixin awtomatikament jaġġustawhomfont-sizegħall-iskala mal-viewport. Din il-karatteristika qabel kienet opt-in ma v4.
TkissirImmodifikat it-tipografija tal-wiri tagħna biex tissostitwixxi l- $display-*varjabbli tagħna u $display-font-sizesb'mappa Sass. Neħħew ukoll il- $display-*-weightvarjabbli individwali għal s wieħed $display-font-weightu aġġustat font-size.
Żiedu żewġ .display-*daqsijiet ġodda ta' intestatura, .display-5u .display-6.
Il-links huma ssottolinjati awtomatikament (mhux biss meta jduru), sakemm ma jkunux parti minn komponenti speċifiċi.
Tabelli ddisinjati mill-ġdid biex jġedded l-istili tagħhom u jibnuhom mill-ġdid b'varjabbli CSS għal aktar kontroll fuq l-istil.
TkissirTabelli nested ma jirtux aktar stili.
Tkissir .thead-lightu .thead-darkjitneħħew favur il- .table-*klassijiet varjanti li jistgħu jintużaw għall-elementi kollha tat-tabella ( thead, tbody, tfoot, tr, thu td).
TkissirIl- table-row-variant()mixin jingħata isem ġdid għal table-variant()u jaċċetta biss 2 parametri: $color(isem tal-kulur) u $value(kodiċi tal-kulur). Il-kulur tal-fruntiera u l-kuluri tal-aċċent huma kkalkulati awtomatikament abbażi tal-varjabbli tal-fattur tat-tabella.
Qasam il-varjabbli tal-ikkuttunar taċ-ċelluli tal-mejda fi -yu -x.
Tkissir.pre-scrollableKlassi waqgħet . Ara #29135
Tkissir .text-*l-utilitajiet ma jżidux aktar stati hover u jiffokaw għal links. .link-*klassijiet helper jistgħu jintużaw minflok. Ara #29267
Tkissir.text-justifyKlassi waqgħet . Ara #29793
Tkissir <hr>elementi issa jużaw heightminflok borderbiex jappoġġjaw aħjar l- sizeattribut. Dan jippermetti wkoll l-użu ta 'utilitajiet tal-ikkuttunar biex jinħolqu diviżuri eħxen (eż, <hr class="py-1">).
Irrisettja default orizzontali padding-leftfuq <ul>u <ol>elementi mill-browser default 40pxgħal 2rem.
Miżjud $enable-smooth-scroll, li japplika scroll-behavior: smoothglobalment—ħlief għall-utenti li jitolbu moviment imnaqqas permezz ta prefers-reduced-motion' query tal-midja. Ara #31877

RTL

Varjabbli speċifiċi tad-direzzjoni orizzontali, utilitajiet, u mixins kollha ngħataw isem ġdid biex jużaw proprjetajiet loġiċi bħal dawk misjuba fit-tqassim tal-flexbox—eż, startu endminflok leftu right.

Formoli

Miżjud forom galleġġjanti ġodda! Aħna promossejna l-eżempju tat-tikketti li jżommu f'wiċċ l-ilma għal komponenti tal-forma appoġġjati bis-sħiħ. Ara l-paġna l-ġdida tat-tikketti f'wiċċ l-ilma.
Tkissir Elementi konsolidati tal-forma nattiva u tad-dwana. Kaxxi ta' kontroll, radjijiet, selezzjonijiet, u inputs oħra li kellhom klassijiet indiġeni u personalizzati f'v4 ġew ikkonsolidati. Issa kważi l-elementi kollha tal-forma tagħna huma kompletament personalizzati, l-aktar mingħajr il-ħtieġa għal HTML personalizzat.
- .custom-control.custom-checkboxhuwa issa .form-check.
- .custom-control.custom-custom-radiohuwa issa .form-check.
- .custom-control.custom-switchhuwa issa .form-check.form-switch.
- .custom-selecthuwa issa .form-select.
- .custom-fileu .form-fileġew sostitwiti bi stili tad-dwana fuq .form-control.
- .custom-rangehuwa issa .form-range.
- Niżel indiġeni .form-control-fileu .form-control-range.
TkissirWaqqa .input-group-appendu .input-group-prepend. Issa tista 'żżid biss buttuni u .input-group-textbħala tfal diretti tal-gruppi ta' input.
Ir-raġġ tal-fruntiera neqsin għal żmien twil fuq il-grupp ta 'input b'bug ta' feedback ta 'validazzjoni huwa finalment iffissat billi żżid .has-validationklassi addizzjonali għal gruppi ta' input b'validazzjoni.
Tkissir Waqqa 'klassijiet ta' tqassim speċifiċi għall-forma għas-sistema tal-grilja tagħna. Uża l-grilja u l-utilitajiet tagħna minflok .form-group, .form-row, jew .form-inline.
TkissirIt-tikketti tal-formola issa jeħtieġu .form-label.
Tkissir .form-textm'għadux jistabbilixxi display, li jippermettilek toħloq test ta' għajnuna inline jew jimblokka kif tixtieq sempliċement billi tibdel l-element HTML.
Kontrolli tal-formola m'għadhomx jintużaw fissi heightmeta possibbli, minflok jiddeferixxu min-heightbiex itejbu l-adattament u l-kompatibilità ma 'komponenti oħra.
L-ikoni tal-validazzjoni m'għadhomx applikati għal <select>s bi multiple.
Sors rranġati mill-ġdid Fajls Sass taħt scss/forms/, inklużi stili ta' grupp ta' input.

Komponenti

Valuri unifikati paddinggħal twissijiet, frak tal-ħobż, karti, dropdowns, gruppi ta' lista, modals, popovers, u tooltips li għandhom ikunu bbażati fuq il- $spacervarjabbli tagħna. Ara #30564 .

Akkordju

Miżjud komponent ġdid tal-accordion .

Twissijiet

It-twissijiet issa għandhom eżempji b'ikoni .
Neħħew stili tad-dwana għal <hr>s f'kull twissija peress li diġà jużaw currentColor.

Badges

TkissirWaqqa 'l .badge-*-klassijiet kollha tal-kulur għall-utilitajiet fl-isfond (eż., uża .bg-primaryminflok .badge-primary).
TkissirWaqqa .badge-pill— uża l- .rounded-pillutilità minflok.
TkissirTneħħew l-istili ta' hover u fokus għal <a>u <button>elementi.
Żieda fil-kuttunar default għall-badges minn .25em/ .5emsa .35em/ .65em.

Frak tal-ħobż

Issimplifika d-dehra default tal-frak tal-ħobż billi neħħiet padding, background-color, u border-radius.
Miżjud proprjetà ġdida tad-dwana tas-CSS --bs-breadcrumb-dividergħal customization faċli mingħajr il-ħtieġa li terġa 'tikkompila CSS.

Buttuni

Tkissir Il- buttuni taqleb , b'kaxxi ta' kontroll jew radjijiet, m'għadhomx jeħtieġu JavaScript u għandhom marka ġdida. M'għadniex neħtieġu element tat-tgeżwir, żid.btn-checkmal-<input>, u għaqqadha ma' kwalunkwe.btnklassi fuq il-<label>. Ara #30650 . Id-dokumenti għal dan ċċaqalqu mill-paġna Buttuni tagħna għat-taqsima l-ġdida tal-Formoli.
Tkissir Niżel .btn-blockgħall-utilitajiet. Minflok tuża .btn-blockfuq il- .btn, wrap buttuni tiegħek bi .d-gridu .gap-*utilità biex tispazjawhom kif meħtieġ. Aqleb għal klassijiet li jirrispondu għal aktar kontroll fuqhom. Aqra d-dokumenti għal xi eżempji.
Aġġornata tagħna button-variant()u button-outline-variant()mixins biex jappoġġjaw parametri addizzjonali.
Buttuni aġġornati biex jiġi żgurat kuntrast akbar fuq l-istati attivi u ta' l-over.
Buttuni b'diżabilità issa għandhom pointer-events: none;.

Card

TkissirNiżel .card-deckfavur il-grid tagħna. Kebbeb il-karti tiegħek fi klassijiet tal-kolonni u żid .row-cols-*kontenitur ġenitur biex toħloq mill-ġdid il-gverti tal-karti (iżda b'aktar kontroll fuq l-allinjament reattiv).
TkissirWaqqa .card-columns' favur il-Masonry. Ara #28922 .
TkissirInbidel l- .cardaccordion ibbażat b'komponent Accordion ġdid .

Karużell

Miżjud .carousel-darkvarjant ġdid għal test skur, kontrolli, u indikaturi (kbir għal sfondi eħfef).
Ikoni chevron mibdula għall-kontrolli tal-karużell b'SVGs ġodda minn Bootstrap Icons .

Agħlaq buttuna

TkissirIsmu mill -ġdid .closegħal .btn-closegħal isem inqas ġeneriku.
Buttuni Agħlaq issa jużaw background-image(SVG inkorporat) minflok a ×fl-HTML, li jippermetti customization aktar faċli mingħajr il-ħtieġa li tmiss il-markup tiegħek.
Miżjud .btn-close-whitevarjant ġdid li juża filter: invert(1)biex jippermetti kuntrast ogħla iwarrab ikoni fuq sfondi aktar skuri.

Kollass

Imneħħi l-ankraġġ tal-iscroll għall-accordions.

Dropdowns

Miżjud .dropdown-menu-darkvarjant ġdid u varjabbli assoċjati għal dropdowns skuri fuq talba.
Miżjud varjabbli ġdid għal $dropdown-padding-x.
Skura d-diviżur dropdown għal kuntrast imtejjeb.
TkissirL-avvenimenti kollha għall-dropdown issa huma attivati fuq il-buttuna ta 'toggle dropdown u mbagħad bżieżaq sa l-element ġenitur.
Il-menus dropdown issa għandhom data-bs-popper="static"attribut stabbilit meta l-pożizzjonament tal-dropdown ikun statiku, jew dropdown huwa fin-navbar. Dan huwa miżjud bil-JavaScript tagħna u jgħinna nużaw stili ta 'pożizzjoni tad-dwana mingħajr ma jinterferixxu mal-pożizzjonament ta' Popper.
TkissirGħażla mwaqqfa flipgħall-plugin dropdown favur il-konfigurazzjoni indiġena ta 'Popper. Issa tista 'tiddiżattiva l-imġieba tal-flipping billi tgħaddi firxa vojta għall fallbackPlacements-għażla fil - modifikatur tal-qlib.
Il-menus dropdown issa jistgħu jiġu kklikkjati autoCloseb'għażla ġdida biex timmaniġġja l -imġieba tal-għeluq awtomatiku . Tista' tuża din l-għażla biex taċċetta l-ikklikkja ġewwa jew barra l-menu dropdown biex tagħmilha interattiva.
Dropdowns issa jappoġġjaw .dropdown-items imgeżwer f <li>'s.

Jumbotron

TkissirWaqqa 'l-komponent jumbotron peress li jista' jiġi replikat b'utilitajiet. Ara l-eżempju ġdid tagħna ta' Jumbotron għal demo.

Lista tal-grupp

Miżjud .list-group-numberedmodifikatur ġdid għall-gruppi tal-lista.

Navs u tabs

Miżjud nullvarjabbli ġodda għal font-size, font-weight, color, u :hover colormal- .nav-linkklassi.

Navbars

TkissirNavbars issa jeħtieġu kontenitur ġewwa (biex jissimplifikaw b'mod drastiku r-rekwiżiti ta 'spazjar u CSS meħtieġa).
TkissirIl- .activeklassi ma tistax tiġi applikata aktar għal .nav-items, għandha tiġi applikata direttament fuq .nav-links.

Offcanvas

Żid il-komponent ġdid offcanvas .

Paġnar

Ir-rabtiet tal-paġnar issa għandhom customizable margin-leftli huma ttundjati b'mod dinamiku fil-kantunieri kollha meta jkunu separati minn xulxin.
Miżjud transitions mal-links tal-paġnar.

Popovers

Tkissir.arrowIsmu mill -ġdid fil-mudell popover .popover-arrowdefault tagħna.
whiteListGħażla b'isem ġdid għal allowList.

Spinners

Spinners issa jonoraw prefers-reduced-motion: reducebilli jnaqqsu l-animazzjonijiet. Ara #31882 .
Allinjament vertikali tal-ispinner imtejjeb.

Toasts

Toasts issa jistgħu jiġu pożizzjonati fi .toast-containerbl-għajnuna ta ' pożizzjonament utilitajiet .
Inbidel it-tul tat-toast default għal 5 sekondi.
Imneħħija overflow: hiddenminn toasts u mibdula b border-radius's xierqa calc()b'funzjonijiet.

Tooltips

TkissirIsmu mill -ġdid .arrowgħal .tooltip-arrowfil-mudell default tooltip tagħna.
TkissirIl-valur default għall- fallbackPlacementshuwa mibdul għal ['top', 'right', 'bottom', 'left']għal tqegħid aħjar ta 'elementi popper.
TkissirwhiteListGħażla b'isem ġdid għal allowList.

Utilitajiet

TkissirIsimha mill-ġdid diversi utilitajiet biex tuża ismijiet ta 'proprjetà loġika minflok ismijiet direzzjonali biż-żieda ta' appoġġ RTL:
- Ismu mill -ġdid .left-*u .right-*lil .start-*u .end-*.
- Ismu mill -ġdid .float-leftu .float-rightlil .float-startu .float-end.
- Ismu mill -ġdid .border-leftu .border-rightlil .border-startu .border-end.
- Ismu mill -ġdid .rounded-leftu .rounded-rightlil .rounded-startu .rounded-end.
- Ismu mill -ġdid .ml-*u .mr-*lil .ms-*u .me-*.
- Ismu mill -ġdid .pl-*u .pr-*lil .ps-*u .pe-*.
- Ismu mill -ġdid .text-leftu .text-rightlil .text-startu .text-end.
TkissirMarġini negattivi b'diżabilità awtomatikament.
Miżjud .bg-bodyklassi ġdida biex issettja malajr l- <body>isfond tal-'s għal elementi addizzjonali.
Miżjuda utilitajiet ta 'pożizzjoni ġodda għal top, right, bottom, u left. Valuri jinkludu 0, 50%, u 100%għal kull proprjetà.
Miżjud ġodda .translate-middle-xu .translate-middle-yutilitajiet biex iċċentra orizzontalment jew vertikalment elementi pożizzjonati assoluti/fissi.
border-widthUtilitajiet ġodda miżjuda .
TkissirIsmu mill -ġdid .text-monospacegħal .font-monospace.
TkissirImneħħija .text-hideperess li huwa metodu antikwat biex jinħeba test li m'għandux jintuża aktar.
Utilitajiet miżjuda .fs-*għall- font-sizeutilitajiet (bil-RFS attivat). Dawn jużaw l-istess skala bħall-intestaturi default tal-HTML (1-6, kbar għal żgħar), u jistgħu jiġu modifikati permezz tal-mappa Sass.
Tkissir.font-weight-*Utilitajiet isem ġdid .fw-*għall-qosor u l-konsistenza.
Tkissir.font-style-*Utilitajiet isem ġdid .fst-*għall-qosor u l-konsistenza.
Miżjud .d-gridbiex juru utilitajiet u utilitajiet ġodda gap( .gap) għal CSS Grid u layouts flexbox.
TkissirNeħħa .rounded-smu rounded-lg, u introduċiet skala ġdida ta 'klassijiet, .rounded-0biex .rounded-3. Ara #31687 .
line-heightUtilitajiet ġodda miżjuda : .lh-1, .lh-sm, .lh-baseu .lh-lg. Ara hawn .
Ċaqlaq l- .d-noneutilità fis-CSS tagħna biex tagħtiha aktar piż fuq utilitajiet oħra tal-wiri.
Estiża l- .visually-hidden-focusablehelper biex jaħdem ukoll fuq kontenituri, bl-użu :focus-within.

Helpers

Tkissir L-helpers tal-inkorporazzjoni responsivi ngħataw isem ġdid għal helpers tal-proporzjon b'ismijiet ta 'klassi ġodda u imġieba mtejba, kif ukoll varjabbli CSS ta' għajnuna.
- Il-klassijiet ingħataw isem ġdid biex jinbidlu bygħal xfil-proporzjon tal-aspett. Per eżempju, .ratio-16by9issa .ratio-16x9.
- Imxejna niżel is- .embed-responsive-itemselettur tal-grupp u l-elementi favur .ratio > *selettur aktar sempliċi. M'hemmx bżonn aktar klassi, u l-helper tal-proporzjon issa jaħdem bi kwalunkwe element HTML.
- Il- $embed-responsive-aspect-ratiosmappa Sass ingħatat isem ġdid għal $aspect-ratiosu l-valuri tagħha ġew issimplifikati biex jinkludu l-isem tal-klassi u l-perċentwal bħala l- key: valuepar.
- Il-varjabbli CSS issa huma ġġenerati u inklużi għal kull valur fil-mappa Sass. Immodifika l- --bs-aspect-ratiovarjabbli fuq il- .ratiobiex toħloq kwalunkwe proporzjon tal-aspett tad-dwana .
Tkissir Il-klassijiet ta’ “Screen reader” issa huma klassijiet “viżwalment moħbija” .
- Bidla l-fajl Sass minn scss/helpers/_screenreaders.scssgħalscss/helpers/_visually-hidden.scss
- Ismu mill -ġdid .sr-onlyu .sr-only-focusablelil .visually-hiddenu.visually-hidden-focusable
- sr-only()Ismu mill-ġdid u mixins sr-only-focusable()lil visually-hidden()u visually-hidden-focusable().
bootstrap-utilities.cssissa jinkludi wkoll lill-helpers tagħna. Il-helpers m'għandhomx għalfejn jiġu importati f'bini tad-dwana aktar.

JavaScript

Waqqgħet id-dipendenza jQuery u l-plugins miktuba mill-ġdid biex ikunu f'JavaScript regolari.
TkissirL-attributi tad-dejta għall-plugins JavaScript kollha issa huma spazjati għall-ismijiet biex jgħinu jiddistingwu l-funzjonalità tal-Bootstrap minn partijiet terzi u l-kodiċi tiegħek stess. Pereżempju, nużaw data-bs-toggleminflok data-toggle.
Il-plugins kollha issa jistgħu jaċċettaw selettur CSS bħala l-ewwel argument. Tista' jew tgħaddi element DOM jew kwalunkwe selettur CSS validu biex toħloq istanza ġdida tal-plugin:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigtista' tiġi mgħoddija bħala funzjoni li taċċetta l-konfigurazzjoni tal-Popper default tal-Bootstrap bħala argument, sabiex tkun tista' tgħaqqad din il-konfigurazzjoni default bil-mod tiegħek. Japplika għal dropdowns, popovers, u tooltips.
Il-valur default għall- fallbackPlacementshuwa mibdul għal ['top', 'right', 'bottom', 'left']għal tqegħid aħjar tal-elementi Popper. Japplika għal dropdowns, popovers, u tooltips.
Tneħħa underscore minn metodi statiċi pubbliċi bħal _getInstance()→ getInstance().