Aqbeż għall-kontenut prinċipali Aqbeż għan-navigazzjoni tad-dokumenti
Check
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.

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

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

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.

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

  • 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 &times;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.
  • 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

Lista tal-grupp

  • Miżjud nullvarjabbli ġodda għal font-size, font-weight, color, u :hover colormal- .nav-linkklassi.
  • 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

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().