Ruka hadi kwa yaliyomo kuu Ruka hadi kwenye urambazaji wa hati
Check
in English

Kuhamia kwa v5

Fuatilia na ukague mabadiliko kwenye faili chanzo cha Bootstrap, uhifadhi wa nyaraka, na vijenzi ili kukusaidia kuhama kutoka v4 hadi v5.

Katika ukurasa huu

v5.2.0

Muundo ulioonyeshwa upya

Bootstrap v5.2.0 ina sasisho fiche la muundo kwa vipengee vichache na sifa katika mradi wote, haswa kupitia viwango vilivyoboreshwa kwenye border-radiusvitufe na vidhibiti vya fomu . Hati zetu pia zimesasishwa kwa ukurasa mpya wa nyumbani, mpangilio rahisi wa hati ambao haukunji tena sehemu za utepe, na mifano maarufu zaidi ya Aikoni za Bootstrap .

Vigezo zaidi vya CSS

Tumesasisha vipengee vyetu vyote ili kutumia vigeu vya CSS. Ingawa Sass bado inashikilia kila kitu, kila kijenzi kimesasishwa ili kujumuisha viambajengo vya CSS kwenye madarasa ya msingi ya vijenzi (km, .btn), kuruhusu ubinafsishaji zaidi wa wakati halisi wa Bootstrap. Katika matoleo yajayo, tutaendelea kupanua matumizi yetu ya vigeu vya CSS katika mpangilio, fomu, visaidizi na huduma zetu. Soma zaidi kuhusu anuwai za CSS katika kila sehemu kwenye kurasa zao za hati.

Matumizi yetu ya mabadiliko ya CSS yatakuwa hayajakamilika kwa kiasi fulani hadi Bootstrap 6. Ingawa tungependa kutekeleza haya kikamilifu kote kwenye bodi, yana hatari ya kusababisha mabadiliko makubwa. Kwa mfano, kuweka $alert-border-width: var(--bs-border-width)katika msimbo wetu wa chanzo huvunja uwezo wa Sass katika msimbo wako ikiwa ulikuwa ukifanya $alert-border-width * 2kwa sababu fulani.

Kwa hivyo, inapowezekana, tutaendelea kuelekeza kwenye vigeu zaidi vya CSS, lakini tafadhali tambua utekelezaji wetu unaweza kuwa na kikomo kidogo katika v5.

Mpya_maps.scss

Bootstrap v5.2.0 ilianzisha faili mpya ya Sass na _maps.scss. Hutoa ramani kadhaa za Sass kutoka _variables.scssili kurekebisha suala ambapo masasisho kwa ramani asili hayakutumika kwa ramani za upili zinazozipanua. Kwa mfano, masasisho kwa $theme-colorshayakuwa yakitumika kwa ramani zingine za mandhari ambazo zilitegemea $theme-colors, kuvunja utiririshaji wa kazi muhimu wa ubinafsishaji. Kwa kifupi, Sass ina kizuizi ambapo mara kigezo chaguomsingi au ramani imetumika , haiwezi kusasishwa. Kuna upungufu sawa na vigeu vya CSS wakati vinatumiwa kutunga vigeu vingine vya CSS.

Hii ndiyo sababu ubinafsishaji tofauti katika Bootstrap lazima ufuate @import "functions", lakini kabla @import "variables"na nyinginezo za mrundikano wetu wa kuagiza. Hali hiyo hiyo inatumika kwa ramani za Sass—lazima ubatilize chaguo-msingi kabla ya kutumika. Ramani zifuatazo zimehamishwa hadi mpya _maps.scss:

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

Miundo yako maalum ya Bootstrap CSS inapaswa sasa kuonekana kama hii na uletaji tofauti wa ramani.

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

Huduma mpya

Mabadiliko ya ziada

  • Ilianzisha $enable-container-classeschaguo mpya. - Sasa unapojijumuisha katika mpangilio wa majaribio wa Gridi ya CSS, .container-*madarasa bado yatakusanywa, isipokuwa kama chaguo hili liwekwe false. Vyombo pia sasa huhifadhi maadili yao ya gutter.

  • Sehemu ya Offcanvas sasa ina tofauti zinazoitikia . Darasa asili .offcanvasbado halijabadilika-linaficha maudhui kwenye tovuti zote za kutazama. Ili kuifanya iitikie, badilisha darasa hilo liwe .offcanvasdarasa lolote .offcanvas-{sm|md|lg|xl|xxl}.

  • Vigawanyiko vya jedwali nene sasa vimejijumuisha. — Tumeondoa unene na mgumu zaidi kubatilisha mpaka kati ya vikundi vya jedwali na kuuhamishia kwenye darasa la hiari unayoweza kutumia, .table-group-divider. Tazama hati za jedwali kwa mfano.

  • Scrollspy imeandikwa upya ili kutumia Intersection Observer API , ambayo ina maana kwamba huhitaji tena vifungashio vya wazazi vya jamaa, huondoaoffsetusanidi, na zaidi. Tafuta utekelezaji wako wa Scrollspy kuwa sahihi zaidi na thabiti katika uangaziaji wao wa nav.

  • Popovers na vidokezo vya zana sasa vinatumia vigeu vya CSS. Vigezo vingine vya CSS vimesasishwa kutoka kwa wenzao wa Sass ili kupunguza idadi ya vigeu. Kwa hivyo, vigeu vitatu vimeacha kutumika katika toleo hili: $popover-arrow-color, $popover-arrow-outer-color, na $tooltip-arrow-color.

  • Imeongeza .text-bg-{color}wasaidizi wapya. Badala ya kuweka mtu binafsi .text-*na .bg-*huduma, sasa unaweza kutumia wasaidizi .text-bg-*kuweka na background-colortofauti ya mbele color.

  • Kirekebishaji .form-check-reversekimeongezwa ili kubadilisha mpangilio wa lebo na visanduku vya kuteua/redio zinazohusiana.

  • Imeongeza usaidizi wa safu wima zenye mistari kwenye jedwali kupitia .table-striped-columnsdarasa jipya.

Kwa orodha kamili ya mabadiliko, angalia mradi wa v5.2.0 kwenye GitHub .

v5.1.0

  • Imeongeza usaidizi wa majaribio kwa mpangilio wa Gridi ya CSS . — Hii ni kazi inayoendelea, na bado haiko tayari kwa matumizi ya uzalishaji, lakini unaweza kujijumuisha kwenye kipengele kipya kupitia Sass. Ili kuiwasha, zima gridi chaguo-msingi, kwa kuweka $enable-grid-classes: falsena kuwezesha Gridi ya CSS kwa kuweka $enable-cssgrid: true.

  • Upau wa urambazaji uliosasishwa ili kusaidia offcanvas. - Ongeza droo za nje ya turubai kwenye upau wa urambazaji na madarasa ya kuitikia .navbar-expand-*na alama za nje za turubai.

  • Imeongeza sehemu mpya ya kishika nafasi . — Kipengele chetu kipya zaidi, njia ya kutoa vizuizi vya muda badala ya maudhui halisi ili kusaidia kuonyesha kuwa kuna kitu bado kinapakiwa kwenye tovuti au programu yako.

  • Kunja programu-jalizi sasa inaauni kukunja kwa mlalo . - Ongeza .collapse-horizontalkwenye yako .collapseili kukunja . widthbadala ya height. Epuka kupaka rangi kwenye kivinjari kwa kuweka min-heightau height.

  • Imeongeza rafu mpya na visaidizi vya kanuni wima. - Tumia kwa haraka sifa nyingi za flexbox ili kuunda kwa haraka miundo maalum na rafu . Chagua kutoka kwa safu mlalo ( .hstack) na wima ( .vstack). Ongeza vigawanyaji wima sawa na <hr>vipengee na visaidizi vipya.vr .

  • Aliongeza :rootvigezo vipya vya kimataifa vya CSS. - Imeongeza anuwai kadhaa mpya za CSS kwenye :rootkiwango cha kudhibiti <body>mitindo. Zaidi ziko kwenye kazi, ikijumuisha huduma na vipengele vyetu vyote, lakini kwa sasa soma vigeu vya CSS katika sehemu ya Geuza kukufaa .

  • Umebadilisha rangi na huduma za mandharinyuma ili kutumia vigeu vya CSS, na kuongeza uwekaji mwangaza mpya wa maandishi na huduma za upenyezaji wa mandharinyuma . - .text-* na .bg-*huduma sasa zimeundwa kwa vigeu vya CSS na rgba()thamani za rangi, kukuruhusu kubinafsisha huduma yoyote kwa urahisi na huduma mpya za uwazi.

  • Imeongeza mifano mipya ya vijisehemu kulingana na kuonyesha jinsi ya kubinafsisha vipengele vyetu. — Vuta tayari kutumia vipengee vilivyobinafsishwa na miundo mingine ya kawaida ya muundo na mifano yetu mpya ya Vijisehemu . Inajumuisha vijachini , menyu kunjuzi , vikundi vya orodha , na miundo .

  • Mitindo ya uwekaji nafasi ambayo haijatumiwa kutoka kwa vidude na vidokezo vya zana kwani hii inashughulikiwa na Popper pekee. $tooltip-marginimeacha kutumika na imewekwa nullkatika mchakato.

Unataka maelezo zaidi? Soma chapisho la blogu la v5.1.0.

Hujambo! Mabadiliko kwenye toleo letu kuu la kwanza la Bootstrap 5, v5.0.0, yameandikwa hapa chini. Haziakisi mabadiliko ya ziada yaliyoonyeshwa hapo juu.

Vitegemezi

  • Imeshuka jQuery.
  • Imeboreshwa kutoka Popper v1.x hadi Popper v2.x.
  • Ilibadilisha Libsass na Dart Sass kwani kikusanyaji chetu cha Sass kilichopewa Libsass kiliacha kutumika.
  • Imehama kutoka Jekyll hadi Hugo kwa ajili ya kutengeneza hati zetu

Usaidizi wa kivinjari

  • Imeshuka Internet Explorer 10 na 11
  • Imeshuka Microsoft Edge <16 (Edge ya Urithi)
  • Imeshuka Firefox <60
  • Safari iliyoshuka <12
  • Imeshuka iOS Safari <12
  • Imeshuka Chrome <60

Mabadiliko ya hati

  • Ukurasa wa nyumbani ulioundwa upya, mpangilio wa hati na kijachini.
  • Mwongozo mpya wa Parcel umeongezwa .
  • Imeongeza sehemu mpya ya Geuza kukufaa , ikichukua nafasi ya ukurasa wa Mandhari wa v4 , na maelezo mapya kuhusu Sass, chaguo za usanidi wa kimataifa, mipangilio ya rangi, vigeu vya CSS, na zaidi.
  • Imepanga upya hati zote za fomu katika sehemu mpya ya Fomu , na kugawanya maudhui katika kurasa zilizoangaziwa zaidi.
  • Vile vile, ilisasisha sehemu ya Mpangilio , ili kufafanua maudhui ya gridi kwa uwazi zaidi.
  • Imebadilisha jina la ukurasa wa sehemu ya "Navs" kuwa "Navs & Tabs".
  • Jina la ukurasa wa "Angalia" likapewa "Cheki na redio".
  • Iliunda upya upau wa urambazaji na kuongeza subnav mpya ili kurahisisha kuzunguka tovuti zetu na matoleo ya hati.
  • Imeongeza njia ya mkato mpya ya kibodi kwa uga wa utafutaji: Ctrl + /.

Sass

  • Tumeacha uunganisho chaguomsingi wa ramani ya Sass ili kurahisisha kuondoa thamani zisizohitajika. Kumbuka sasa unapaswa kufafanua thamani zote katika ramani za Sass kama $theme-colors. Angalia jinsi ya kushughulikia ramani za Sass .

  • KuvunjaChaguo za color-yiq()kukokotoa color-contrast()zilizopewa jina jipya na viambatisho vinavyohusiana kwa vile hahusiani tena na nafasi ya rangi ya YIQ. Angalia #30168.

    • $yiq-contrasted-thresholdimepewa jina la $min-contrast-ratio.
    • $yiq-text-darkna $yiq-text-lightkwa mtiririko huo hubadilishwa jina kuwa $color-contrast-darkna $color-contrast-light.

  • KuvunjaVigezo vya mchanganyiko wa hoja ya media vimebadilika kwa mbinu ya kimantiki zaidi.

    • media-breakpoint-down()hutumia sehemu ya kuzuilia yenyewe badala ya sehemu inayofuata ya kukatiza (kwa mfano, media-breakpoint-down(lg)badala ya maeneo ya media-breakpoint-down(md)kutazama yaliyolengwa ambayo ni ndogo kuliko lg).
    • Vile vile, parameta ya pili katika media-breakpoint-between()pia hutumia sehemu ya kukatika yenyewe badala ya sehemu inayofuata ya kukatika (kwa mfano, media-between(sm, lg)badala ya maeneo ya kutazamwa ya media-breakpoint-between(sm, md)shabaha kati smna lg).

  • KuvunjaMitindo ya uchapishaji imeondolewa na $enable-print-styleskutofautiana. Madarasa ya onyesho la uchapishaji bado yapo. Tazama #28339 .

  • KuvunjaImeshuka color(), theme-color(), na gray()utendakazi kwa kupendelea vibadala. Tazama #29083 .

  • KuvunjaChaguo theme-color-level()la kukokotoa lililopewa jina jipya color-level()na sasa linakubali rangi yoyote unayotaka badala ya $theme-colorrangi pekee. Tazama #29083 Jihadharini: color-level() iliangushwa baadaye v5.0.0-alpha3.

  • KuvunjaImebadilishwa jina $enable-prefers-reduced-motion-media-queryna $enable-pointer-cursor-for-buttonskwa $enable-reduced-motionna $enable-button-pointerskwa ufupi.

  • KuvunjaImeondoa bg-gradient-variant()mchanganyiko. Tumia .bg-gradientdarasa kuongeza gradient kwa vipengele badala ya darasa zinazozalishwa .bg-gradient-*.

  • Kuvunja Imeondoa michanganyiko iliyoacha kutumika hapo awali:

    • hover,,, na hover-focus_plain-hover-focushover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(pia iliacha darasa la matumizi linalohusiana, .text-hide)
    • visibility()
    • form-control-focus()

  • KuvunjaChaguo scale-color()la kukokotoa limebadilishwa jina shift-color()ili kuepuka mgongano na chaguo la kukokotoa la Sass la kuongeza rangi.

  • box-shadowmixins sasa huruhusu nullmaadili na kushuka nonekutoka kwa hoja nyingi. Tazama #30394 .

  • Mchanganyiko border-radius()sasa una thamani chaguo-msingi.

Mfumo wa rangi

  • Mfumo wa rangi ambao ulifanya kazi nao color-level()na $theme-color-intervalkuondolewa kwa ajili ya mfumo mpya wa rangi. Zote lighten()na darken()kazi katika codebase yetu hubadilishwa na tint-color()na shade-color(). Vitendaji hivi vitachanganya rangi na nyeupe au nyeusi badala ya kubadilisha wepesi wake kwa kiwango kisichobadilika. Rangi shift-color()hiyo itatia rangi au kivuli rangi kulingana na ikiwa paramu yake ya uzani ni chanya au hasi. Tazama #30622 kwa maelezo zaidi.

  • Imeongeza rangi mpya na vivuli kwa kila rangi, ikitoa rangi tisa tofauti kwa kila rangi ya msingi, kama vigeu vipya vya Sass.

  • Utofautishaji wa rangi ulioboreshwa. Uwiano wa utofautishaji wa rangi kutoka 3:1 hadi 4.5:1 na rangi zilizosasishwa za buluu, kijani kibichi, samawati na waridi ili kuhakikisha utofautishaji wa WCAG 2.1 AA. Pia ilibadilisha rangi yetu ya utofautishaji wa rangi kutoka $gray-900hadi $black.

  • Ili kutumia mfumo wetu wa rangi, tumeongeza desturi tint-color()na vipengele vipya shade-color()ili kuchanganya rangi zetu ipasavyo.

Masasisho ya gridi

  • Kizuizi kipya! Imeongeza sehemu mpya xxlya kuvunja 1400pxna juu. Hakuna mabadiliko kwa vituo vingine vyote vya kuvunja.

  • Mifereji iliyoboreshwa. Gutters sasa zimewekwa katika rems, na ni nyembamba kuliko v4 ( 1.5rem, au kuhusu 24px, chini kutoka 30px). Hii inalinganisha mifereji ya mfumo wetu wa gridi na huduma zetu za kuweka nafasi.

    • Imeongeza aina mpya ya mifereji ya maji ( .g-*, .gx-*, na .gy-*) ili kudhibiti mifereji ya mifereji ya maji mlalo/wima, mifereji ya maji ya mlalo na mifereji ya maji wima.
    • KuvunjaImebadilishwa jina .no-guttersili kuendana na .g-0huduma mpya za mfereji wa maji.

  • Safu wima hazijatumika tena position: relative, kwa hivyo unaweza kulazimika kuongeza .position-relativekwa baadhi ya vipengele ili kurejesha tabia hiyo.

  • KuvunjaImeacha .order-*madarasa kadhaa ambayo mara nyingi hayatumiki. Sasa tunatoa tu .order-1nje .order-5ya boksi.

  • KuvunjaImetupa .mediakijenzi kwani kinaweza kuigwa kwa urahisi na huduma. Tazama #28265 na ukurasa wa huduma rahisi kwa mfano .

  • Kuvunja bootstrap-grid.csssasa inatumika tu box-sizing: border-boxkwa safu badala ya kuweka upya ukubwa wa kisanduku wa kimataifa. Kwa njia hii, mitindo yetu ya gridi inaweza kutumika katika maeneo mengi bila kuingiliwa.

  • $enable-grid-classeshailemazi tena uzalishaji wa madarasa ya kontena. Angalia #29146.

  • Ilisasisha make-colmchanganyiko kuwa chaguomsingi hadi safu wima sawa bila saizi maalum.

Maudhui, Washa upya, n.k

  • RFS sasa imewezeshwa kwa chaguo-msingi. Vichwa vinavyotumiafont-size()mchanganyiko vitarekebisha kiotomatiki vyaofont-sizeili kupima na lango la kutazama. Kipengele hiki hapo awali kilijijumuisha na v4.

  • KuvunjaImebadilisha uchapaji wetu wa onyesho ili kuchukua nafasi ya vigeu vyetu $display-*na kuweka $display-font-sizesramani ya Sass. Pia iliondoa vigeu vya kibinafsi $display-*-weightkwa s moja $display-font-weightna iliyorekebishwa font-size.

  • Imeongeza .display-*saizi mbili mpya za vichwa, .display-5na .display-6.

  • Viungo vimepigiwa mstari kwa chaguo-msingi (sio tu kwa kuelea), isipokuwa kama ni sehemu ya vijenzi maalum.

  • Majedwali yaliyoundwa upya ili kuonyesha upya mitindo yao na kuijenga upya kwa vigeu vya CSS kwa udhibiti zaidi wa mitindo.

  • KuvunjaJedwali zilizowekwa hazirithi mitindo tena.

  • Kuvunja .thead-lightna .thead-darkzimeachwa kwa ajili ya .table-*darasa lahaja ambalo linaweza kutumika kwa vipengele vyote vya jedwali ( thead, tbody, tfoot, tr, thna td).

  • KuvunjaMchanganyiko table-row-variant()umepewa jina table-variant()na kukubali vigezo 2 tu: $color(jina la rangi) na $value(msimbo wa rangi). Rangi ya mpaka na rangi ya lafudhi huhesabiwa kiotomatiki kulingana na vigezo vya jedwali.

  • Gawanya viambatisho vya kisanduku vya jedwali ndani -yna -x.

  • KuvunjaDarasa lililoshuka .pre-scrollable. Angalia #29135

  • Kuvunja .text-*huduma haziongezi majimbo ya kuelea juu na kuzingatia viungo tena. .link-*madarasa ya wasaidizi inaweza kutumika badala yake. Angalia #29267

  • KuvunjaDarasa lililoshuka .text-justify. Angalia #29793

  • Kuvunja <hr>vipengele sasa tumia heightbadala ya borderkuunga mkono vyema sizesifa. Hii pia huwezesha matumizi ya huduma za kuweka pedi kuunda vigawanyiko vizito (kwa mfano, <hr class="py-1">).

  • Weka upya mlalo chaguomsingi kuwasha padding-leftna vipengele kutoka chaguomsingi <ul>ya <ol>kivinjari 40pxhadi 2rem.

  • Imeongezwa $enable-smooth-scroll, ambayo inatumika scroll-behavior: smoothkote ulimwenguni-isipokuwa kwa watumiaji wanaouliza kupunguzwa kwa mwendo kupitia prefers-reduced-motionhoja ya media. Angalia #31877

RTL

  • Vigezo mahususi vya mwelekeo mlalo, huduma, na vichanganyiko vyote vimepewa jina ili kutumia sifa za kimantiki kama zile zinazopatikana katika mipangilio ya kisanduku nyumbufu-km, startna endbadala ya leftna right.

Fomu

  • Imeongeza fomu mpya zinazoelea! Tumekuza mfano wa lebo zinazoelea hadi vipengele vya fomu vinavyotumika kikamilifu. Tazama ukurasa mpya wa lebo zinazoelea.

  • Kuvunja Vipengele vilivyojumuishwa vya asili na vya umbo maalum. Visanduku vya kuteua, redio, teuzi na viingizo vingine ambavyo vilikuwa na madarasa asilia na maalum katika v4 vimeunganishwa. Sasa karibu vipengee vyetu vyote vya umbo ni desturi kabisa, nyingi bila hitaji la HTML maalum.

    • .custom-control.custom-checkboxni sasa .form-check.
    • .custom-control.custom-custom-radioni sasa .form-check.
    • .custom-control.custom-switchni sasa .form-check.form-switch.
    • .custom-selectni sasa .form-select.
    • .custom-filena .form-filezimebadilishwa na mitindo maalum juu ya .form-control.
    • .custom-rangeni sasa .form-range.
    • Imeshuka asili .form-control-filena .form-control-range.

  • KuvunjaImeshuka .input-group-appendna .input-group-prepend. Sasa unaweza kuongeza tu vitufe na .input-group-textkama watoto wa moja kwa moja wa vikundi vya ingizo.

  • Kipenyo cha mpaka ambacho Kimekosekana kwenye kikundi cha ingizo chenye hitilafu ya maoni ya uthibitishaji hatimaye hurekebishwa kwa kuongeza .has-validationdarasa la ziada kwa vikundi vya kuingiza data vilivyo na uthibitishaji.

  • Kuvunja Madarasa ya mpangilio wa fomu mahususi ya mfumo wetu wa gridi ya taifa yameshuka. Tumia gridi ya taifa na huduma zetu badala ya .form-group, .form-row, au .form-inline.

  • KuvunjaLebo za fomu sasa zinahitaji .form-label.

  • Kuvunja .form-textno longer sets display, hukuruhusu kuunda maandishi ya usaidizi ya ndani au kuzuia upendavyo kwa kubadilisha tu kipengele cha HTML.

  • Vidhibiti vya fomu havitumiki tena vilivyobadilika heightinapowezekana, badala yake inaahirisha min-heightkuboresha ubinafsishaji na uoanifu na vipengele vingine.

  • Aikoni za uthibitishaji hazitumiki tena kwa <select>s with multiple.

  • Faili za chanzo zilizopangwa upya za Sass chini ya scss/forms/, ikiwa ni pamoja na mitindo ya vikundi vya kuingiza data.

Vipengele

  • paddingThamani zilizounganishwa za arifa, mkate, kadi, menyu kunjuzi, vikundi vya orodha, muundo, poppovers na vidokezo vya zana kulingana na utofauti wetu $spacer. Tazama #30564 .

Accordion

Tahadhari

  • Tahadhari sasa zina mifano na ikoni .

  • Imeondoa mitindo maalum ya <hr>s katika kila arifa kwa kuwa tayari wanaitumia currentColor.

Beji

  • KuvunjaImeacha .badge-*madarasa yote ya rangi kwa huduma za usuli (kwa mfano, tumia .bg-primarybadala ya .badge-primary).

  • KuvunjaImeshuka .badge-pill- tumia .rounded-pillmatumizi badala yake.

  • KuvunjaImeondoa mitindo ya kuelea juu na kuzingatia <a>na <button>vipengele.

  • Kuongezeka kwa pedi chaguo-msingi kwa beji kutoka .25em/ .5emhadi .35em/ .65em.

  • Imerahisisha mwonekano chaguomsingi wa mkate kwa kuondoa padding, background-color, na border-radius.

  • Imeongeza kipengele kipya maalum cha CSS --bs-breadcrumb-dividerkwa ubinafsishaji rahisi bila kuhitaji kukusanya tena CSS.

Vifungo

  • Kuvunja Vifungo vya kugeuza , vilivyo na visanduku vya kuteua au redio, havihitaji tena JavaScript na kuwa na lebo mpya. Hatuhitaji tena kipengee cha kufunga, ongeza.btn-checkkwenye<input>, na uioanishe na.btnmadarasa yoyote kwenye<label>. Tazama #30650 . Hati za hili zimehama kutoka ukurasa wetu wa Vifungo hadi sehemu mpya ya Fomu.

  • Kuvunja Imeshuka .btn-blockkwa huduma. Badala ya kutumia .btn-blockkwenye .btn, funga vitufe vyako .d-gridna .gap-*matumizi ili kuviweka nafasi inavyohitajika. Badili hadi madarasa sikivu kwa udhibiti zaidi juu yao. Soma hati kwa baadhi ya mifano.

  • Ilisasisha yetu button-variant()na button-outline-variant()mchanganyiko ili kusaidia vigezo vya ziada.

  • Vifungo vilivyosasishwa ili kuhakikisha utofautishaji ulioongezeka kwenye hali ya kuelea na inayotumika.

  • Vifungo vilivyozimwa sasa vina pointer-events: none;.

Kadi

  • KuvunjaImeshuka .card-deckkwa niaba ya gridi yetu. Funga kadi zako katika madarasa ya safu wima na uongeze .row-cols-*kontena kuu ili kuunda upya safu za kadi (lakini kwa udhibiti zaidi wa upangaji wa msikivu).

  • KuvunjaImeshuka .card-columnskwa niaba ya Uashi. Tazama #28922 .

  • KuvunjaIlibadilisha .cardaccordion msingi na sehemu mpya ya Accordion .

  • Imeongeza .carousel-darklahaja mpya kwa maandishi meusi, vidhibiti na viashirio (vizuri kwa mandharinyuma nyepesi).

  • Aikoni za chevron zilibadilishwa kwa vidhibiti vya jukwa na SVG mpya kutoka kwa Aikoni za Bootstrap .

Kitufe cha kufunga

  • KuvunjaImepewa jina jipya .closekwa jina .btn-closela kawaida kidogo.

  • Vifungo vya kufunga sasa vinatumia background-image(SVG iliyopachikwa) badala ya &times;katika HTML, ikiruhusu ubinafsishaji rahisi bila hitaji la kugusa lebo yako.

  • Imeongeza .btn-close-whitekibadala kipya kinachotumia filter: invert(1)kuwezesha utofautishaji wa hali ya juu aikoni dhidi ya mandharinyuma meusi.

Kunja

  • Imeondoa nanga ya kusongesha kwa accordions.

  • Imeongeza .dropdown-menu-darklahaja mpya na vigeu vinavyohusiana vya menyu kunjuzi za giza unapohitaji.

  • Imeongeza kigezo kipya cha $dropdown-padding-x.

  • Imetia giza kigawanyaji kunjuzi kwa utofautishaji ulioboreshwa.

  • KuvunjaMatukio yote ya menyu kunjuzi sasa yameanzishwa kwenye kitufe cha kugeuza kunjuzi na kisha kuwekewa viputo hadi kipengee kikuu.

  • Menyu kunjuzi sasa zina data-bs-popper="static"seti ya sifa wakati uwekaji wa menyu kunjuzi umetulia, au menyu kunjuzi iko kwenye upau wa urambazaji. Hii inaongezwa na JavaScript yetu na hutusaidia kutumia mitindo maalum ya nafasi bila kuingiliana na nafasi ya Popper.

  • KuvunjaImeacha flipchaguo la programu-jalizi kunjuzi kwa ajili ya usanidi wa asili wa Popper. Sasa unaweza kulemaza tabia ya kugeuza kwa kupitisha safu tupu ya fallbackPlacementschaguo katika kirekebishaji cha kugeuza .

  • Menyu kunjuzi sasa zinaweza kubofya kwa autoClosechaguo jipya kushughulikia tabia ya kufunga kiotomatiki . Unaweza kutumia chaguo hili kukubali kubofya ndani au nje ya menyu kunjuzi ili kuifanya ishirikiane.

  • Njia kunjuzi sasa zinaauni .dropdown-itemzimefungwa kwa <li>s.

Jumbotron

Kundi la orodha

  • Imeongeza vigeu vipya nullvya font-size, font-weight, color, na :hover colorkwa .nav-linkdarasa.
  • KuvunjaNavbar sasa zinahitaji kontena ndani (ili kurahisisha kwa kiasi kikubwa mahitaji ya nafasi na CSS inahitajika).
  • KuvunjaDarasa .activehaliwezi kutumika tena kwa .nav-items, lazima litumike moja kwa moja kwenye .nav-links.

Nje ya turubai

Pagination

  • Viungo vya kurasa sasa vinaweza kubinafsishwa margin-leftambavyo vimezungushwa kwa kila pembe vinapotenganishwa.

  • Aliongeza transitions kwa pagination viungo.

Popovers

  • KuvunjaImepewa jina jipya .arrowkatika .popover-arrowkiolezo chetu chaguo-msingi cha popover.

  • whiteListChaguo lililopewa jina jipya kuwa allowList.

Spinners

  • Spinners sasa huheshimu prefers-reduced-motion: reducekwa kupunguza kasi ya uhuishaji. Tazama #31882 .

  • Upangaji wa wima wa spinner ulioboreshwa.

Toasts

  • Toasts sasa zinaweza kuwekwa katika a .toast-containerkwa usaidizi wa kuweka huduma .

  • Alibadilisha muda chaguo-msingi wa toast kuwa sekunde 5.

  • Imetolewa overflow: hiddenkutoka kwa toasts na kubadilishwa na border-radiuss sahihi na calc()vitendaji.

Vidokezo vya zana

  • KuvunjaImepewa jina jipya .arrowkatika .tooltip-arrowkiolezo chetu cha vidokezo chaguomsingi.

  • KuvunjaThamani chaguo-msingi ya the fallbackPlacementsinabadilishwa hadi ['top', 'right', 'bottom', 'left']kwa uwekaji bora wa vipengee vya popper.

  • KuvunjawhiteListChaguo lililopewa jina jipya kuwa allowList.

Huduma

  • KuvunjaImebadilisha huduma kadhaa kutumia majina ya mali ya kimantiki badala ya majina ya mwelekeo na nyongeza ya usaidizi wa RTL:

    • Imebadilishwa jina .left-*na .right-*kwa .start-*na .end-*.
    • Imebadilishwa jina .float-leftna .float-rightkwa .float-startna .float-end.
    • Imebadilishwa jina .border-leftna .border-rightkwa .border-startna .border-end.
    • Imebadilishwa jina .rounded-leftna .rounded-rightkwa .rounded-startna .rounded-end.
    • Imebadilishwa jina .ml-*na .mr-*kwa .ms-*na .me-*.
    • Imebadilishwa jina .pl-*na .pr-*kwa .ps-*na .pe-*.
    • Imebadilishwa jina .text-leftna .text-rightkwa .text-startna .text-end.

  • KuvunjaPambizo hasi zimezimwa kwa chaguo-msingi.

  • Imeongeza .bg-bodydarasa jipya kwa kuweka <body>usuli kwa haraka kwa vipengele vya ziada.

  • Imeongeza huduma mpya za nafasi kwa top, right, bottom, na left. Thamani ni pamoja na 0, 50%, na 100%kwa kila mali.

  • Imeongeza huduma mpya kwa usawa au wima katikati .translate-middle-xya .translate-middle-yvipengele vilivyowekwa vyema/vilivyowekwa.

  • Imeongeza border-widthhuduma mpya .

  • KuvunjaImepewa jina .text-monospacejipya .font-monospace.

  • KuvunjaImeondolewa .text-hidekwa kuwa ni mbinu ya zamani ya kuficha maandishi ambayo hayafai kutumika tena.

  • Huduma zilizoongezwa .fs-*kwa font-sizehuduma (na RFS imewezeshwa). Hizi hutumia kipimo sawa na vichwa chaguo-msingi vya HTML (1-6, kubwa hadi ndogo), na vinaweza kurekebishwa kupitia ramani ya Sass.

  • KuvunjaHuduma zilizopewa jina .font-weight-*kama .fw-*kwa ufupi na uthabiti.

  • KuvunjaHuduma zilizopewa jina .font-style-*kama .fst-*kwa ufupi na uthabiti.

  • Imeongezwa .d-gridili kuonyesha huduma na gaphuduma mpya ( .gap) kwa Gridi ya CSS na miundo ya kisanduku chenye kubadilika.

  • KuvunjaImeondolewa .rounded-smna rounded-lg, na kuanzisha kiwango kipya cha madarasa, .rounded-0kwa .rounded-3. Tazama #31687 .

  • Imeongeza line-heighthuduma mpya: .lh-1, .lh-sm, .lh-basena .lh-lg. Tazama hapa .

  • Umehamisha .d-nonematumizi katika CSS yetu ili kuipa uzito zaidi ya huduma zingine za kuonyesha.

  • Iliongeza .visually-hidden-focusablemsaidizi pia kufanya kazi kwenye vyombo, kwa kutumia :focus-within.

Wasaidizi

  • Kuvunja Visaidizi vya upachikaji vinavyojibu vimepewa jina jipya la visaidizi vya uwiano vilivyo na majina mapya ya darasa na tabia zilizoboreshwa, pamoja na kigezo muhimu cha CSS.

    • Madarasa yamebadilishwa jina ili kubadilika bykuwa xkatika uwiano wa kipengele. Kwa mfano, .ratio-16by9sasa .ratio-16x9.
    • Tumeangusha kiteuzi .embed-responsive-itemna kikundi cha vipengele ili kuchagua kiteuzi rahisi .ratio > *zaidi. Hakuna darasa zaidi linalohitajika, na msaidizi wa uwiano sasa anafanya kazi na kipengele chochote cha HTML.
    • Ramani ya $embed-responsive-aspect-ratiosSass imepewa jina jipya $aspect-ratiosna thamani zake zimerahisishwa ili kujumuisha jina la darasa na asilimia kama key: valuejozi.
    • Vigezo vya CSS sasa vinatolewa na kujumuishwa kwa kila thamani kwenye ramani ya Sass. Rekebisha utofautishaji --bs-aspect-ratioili .ratiokuunda uwiano wowote maalum .

  • Kuvunja Madarasa ya "Kisoma skrini" sasa "yamefichwa" .

    • Alibadilisha faili ya Sass kutoka scss/helpers/_screenreaders.scsshadiscss/helpers/_visually-hidden.scss
    • Imebadilishwa jina .sr-onlyna .sr-only-focusablekwa .visually-hiddenna.visually-hidden-focusable
    • Imebadilishwa jina sr-only()na sr-only-focusable()mchanganyiko kwa visually-hidden()na visually-hidden-focusable().

  • bootstrap-utilities.csssasa pia inajumuisha wasaidizi wetu. Wasaidizi hawahitaji tena kuingizwa katika miundo maalum.

JavaScript

  • Imepunguza utegemezi wa jQuery na kuandika upya programu-jalizi ili ziwe katika JavaScript ya kawaida.

  • KuvunjaSifa za data za programu jalizi zote za JavaScript sasa zimewekwa kwa majina ili kusaidia kutofautisha utendakazi wa Bootstrap kutoka kwa wahusika wengine na msimbo wako mwenyewe. Kwa mfano, tunatumia data-bs-togglebadala ya data-toggle.

  • Programu-jalizi zote sasa zinaweza kukubali kiteuzi cha CSS kama hoja ya kwanza. Unaweza kupitisha kipengele cha DOM au kiteuzi chochote halali cha CSS ili kuunda mfano mpya wa programu-jalizi:

    const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

  • popperConfiginaweza kupitishwa kama kitendakazi kinachokubali usanidi chaguo-msingi wa Bootstrap wa Popper kama hoja, ili uweze kuunganisha usanidi huu chaguo-msingi kwa njia yako. Inatumika kwa menyu kunjuzi, popover na vidokezo vya zana.

  • Thamani chaguo-msingi ya the fallbackPlacementsinabadilishwa hadi ['top', 'right', 'bottom', 'left']kwa uwekaji bora wa vipengele vya Popper. Inatumika kwa menyu kunjuzi, popover na vidokezo vya zana.

  • Imeondolewa chini kutoka kwa njia za tuli za umma kama _getInstance()→ getInstance().