Անցեք հիմնական բովանդակությանը Բաց թողնել փաստաթղթերի նավարկություն
in English

Միգրացիա դեպի v5

Հետևեք և վերանայեք Bootstrap-ի սկզբնաղբյուր ֆայլերի, փաստաթղթերի և բաղադրիչների փոփոխությունները, որոնք կօգնեն ձեզ տեղափոխել v4-ից v5:

Այս էջում

Կախվածություններ

  • Ջնջվել է jQuery-ն:
  • Թարմացվել է Popper v1.x-ից դեպի Popper v2.x:
  • Libsass-ը փոխարինվեց Dart Sass-ով, քանի որ մեր Sass կոմպիլյատորը, որը տրված էր Libsass-ին, հնացել էր:
  • Մեր փաստաթղթերը ստեղծելու համար Ջեքիլից գաղթել ենք Հյուգո

Բրաուզերի աջակցություն

  • Հեռացվել է Internet Explorer 10-ը և 11-ը
  • Հրաժարվել է Microsoft Edge < 16 (Legacy Edge)
  • Հրաժարվեց Firefox < 60
  • Անցած Safari < 12
  • Անցավ iOS Safari < 12
  • Հրաժարվել է Chrome-ից < 60

Փաստաթղթային փոփոխություններ

  • Վերանախագծված գլխավոր էջը, փաստաթղթերի դասավորությունը և էջատակը:
  • Ավելացվեց ծանրոցների նոր ուղեցույց :
  • Ավելացվեց նոր Անհատականացնել բաժինը ՝ փոխարինելով v4-ի Theming էջը , Sass-ի նոր մանրամասներով, գլոբալ կազմաձևման ընտրանքներով, գունային սխեմաներով, CSS փոփոխականներով և այլն:
  • Վերակազմավորեց բոլոր ձևերի փաստաթղթերը նոր ձևերի բաժնում ՝ բովանդակությունը բաժանելով ավելի կենտրոնացված էջերի:
  • Նմանապես, թարմացվեց Layout բաժինը , ցանցի բովանդակությունը ավելի հստակ ձևակերպելու համար:
  • «Navs» բաղադրիչի էջը վերանվանվել է «Navs & Tabs»:
  • «Չեկեր» էջը վերանվանվել է «Չեկեր և ռադիոներ»:
  • Վերանախագծել է navbar-ը և ավելացրել է նոր ենթանավ՝ մեր կայքերն ու փաստաթղթերի տարբերակներն ավելի դյուրին դարձնելու համար:
  • Ավելացվեց ստեղնաշարի նոր դյուրանցում որոնման դաշտի համար Ctrl + /.

Սաս

  • Մենք հրաժարվել ենք կանխադրված Sass քարտեզի միաձուլումներից՝ ավելորդ արժեքների հեռացումը հեշտացնելու համար: Հիշեք, որ այժմ պետք է սահմանեք բոլոր արժեքները Sass քարտեզներում, ինչպիսիք են $theme-colors. Ստուգեք, թե ինչպես վարվել Sass քարտեզների հետ :

  • ԿոտրումՎերանվանվել color-yiq()է ֆունկցիան և հարակից փոփոխականները, color-contrast()քանի որ այն այլևս կապված չէ YIQ գունային տարածության հետ: Տես #30168:

    • $yiq-contrasted-thresholdվերանվանվում է $min-contrast-ratio.
    • $yiq-text-darkև $yiq-text-lightհամապատասխանաբար վերանվանվում են $color-contrast-darkև $color-contrast-light.

  • ԿոտրումMedia query mixins-ի պարամետրերը փոխվել են ավելի տրամաբանական մոտեցման համար:

    • media-breakpoint-down()օգտագործում է ինքնին ընդմիջման կետը հաջորդ ընդմիջման կետի փոխարեն (օրինակ՝ թիրախների media-breakpoint-down(lg)փոխարեն media-breakpoint-down(md)փոքր դիտակետեր lg):
    • Նմանապես, երկրորդ պարամետրը media-breakpoint-between()նաև օգտագործում է ինքնին ընդմիջման կետը հաջորդ բեկման կետի փոխարեն (օրինակ՝ թիրախների տեսադաշտերի media-between(sm, lg)փոխարեն և ).media-breakpoint-between(sm, md)smlg

  • ԿոտրումՏպման ոճերը և $enable-print-stylesփոփոխականը հեռացվել են: Տպման ցուցադրման դասերը դեռ շուրջ են: Տես #28339 :

  • ԿոտրումԱնջատված color(), theme-color(), և gray()գործում է հօգուտ փոփոխականների: Տես #29083 :

  • ԿոտրումՎերանվանվել theme-color-level()է ֆունկցիան color-level()և այժմ ընդունում է ձեր ուզած ցանկացած գույն՝ միայն $theme-colorգույների փոխարեն: Տես #29083 Զգույշ եղիր. color-level() ավելի ուշ թողարկվեց v5.0.0-alpha3:

  • ԿոտրումՎերանվանվել է $enable-prefers-reduced-motion-media-queryև $enable-pointer-cursor-for-buttonsդեպի $enable-reduced-motionև $enable-button-pointersհակիրճության համար:

  • ԿոտրումՄիքսինը bg-gradient-variant()հանեց։ Օգտագործեք դասը՝ ստեղծված դասերի .bg-gradientփոխարեն տարրերին գրադիենտներ ավելացնելու համար :.bg-gradient-*

  • Կոտրում Հեռացվել են նախկինում հնացած միքսները.

    • hover, hover-focus, plain-hover-focus, եւhover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(նաև հանվել է համապատասխան օգտակար դասը, .text-hide)
    • visibility()
    • form-control-focus()

  • Կոտրումscale-color()Գործառույթը վերանվանվել shift-color()է Sass-ի սեփական գունային մասշտաբավորման ֆունկցիայի հետ բախումից խուսափելու համար:

  • box-shadowmixins-ն այժմ թույլ է տալիս nullարժեքներ և բաց թողնում noneբազմաթիվ արգումենտներից: Տես #30394 :

  • Միքսինն border-radius()այժմ ունի լռելյայն արժեք:

Գունավոր համակարգ

  • Գունային համակարգը, որն աշխատում էր color-level()և $theme-color-intervalհեռացվեց՝ հօգուտ նոր գունային համակարգի: Բոլորը lighten()և darken()գործառույթները մեր կոդերի բազայում փոխարինվում են tint-color()և shade-color(). Այս գործառույթները գույնը կխառնեն կամ սպիտակի կամ սևի հետ՝ դրա թեթևությունը որոշակի քանակությամբ փոխելու փոխարեն: Կախված shift-color()նրանից, թե դրա քաշի պարամետրը դրական է, թե բացասական, գույնը կա՛մ երանգավորում է, կա՛մ երանգավորում: Լրացուցիչ մանրամասների համար տես #30622 :

  • Ավելացվեց նոր երանգ և երանգներ յուրաքանչյուր գույնի համար՝ ապահովելով ինը առանձին գույն յուրաքանչյուր հիմնական գույնի համար՝ որպես նոր Sass փոփոխականներ:

  • Բարելավված գունային հակադրություն: Գույնի հակադրության հարաբերակցությունը 3:1-ից մինչև 4,5:1 և թարմացված կապույտ, կանաչ, կապույտ և վարդագույն գույներ՝ WCAG 2.1 AA կոնտրաստ ապահովելու համար: Նաև փոխեց մեր գունային հակադրության $gray-900գույնը $black:

  • Մեր գունային համակարգին աջակցելու համար մենք ավելացրել ենք նոր սովորույթ tint-color()և shade-color()գործառույթներ՝ մեր գույները պատշաճ կերպով խառնելու համար:

Ցանցի թարմացումներ

  • Նոր ընդմիջման կետ: Ավելացվեց նոր xxlընդմիջման կետ 1400pxև վերև: Մյուս բոլոր բեկման կետերում փոփոխություններ չկան:

  • Բարելավված ջրհեղեղներ. Հեղեղատարները այժմ դրված են rems-ով և ավելի նեղ են, քան v4-ը ( 1.5rem, կամ մոտ 24px, սկսած ից ներքև 30px): Սա մեր ցանցային համակարգի ջրհեղեղները հավասարեցնում է մեր միջակայքի կոմունալ ծառայությունների հետ:

    • Հորիզոնական/ուղղահայաց ջրհեղեղները, հորիզոնական ջրհեղեղները և ուղղահայաց ջրհեղեղները կառավարելու համար ավելացվել է ջրահեռացման նոր դաս ( .g-*, .gx-*, և ):.gy-*
    • ԿոտրումՎերանվանվել .no-guttersէ .g-0նոր ջրահեռացման կոմունալ ծառայություններին համապատասխանելու համար:

  • Սյունակներն այլևս չեն position: relativeկիրառվել, այնպես որ դուք կարող եք ավելացնել .position-relativeորոշ տարրեր՝ այդ վարքը վերականգնելու համար:

  • ԿոտրումԲաց թողեց մի քանի .order-*դասեր, որոնք հաճախ մնում էին չօգտագործված: Այժմ մենք տրամադրում .order-1ենք միայն .order-5տուփից դուրս:

  • ԿոտրումԲաղադրիչը հանվել է, .mediaքանի որ այն հեշտությամբ կարելի է կրկնօրինակել կոմունալ ծառայություններով: Օրինակի համար տե՛ս #28265 և flex utilities էջը :

  • Կոտրում bootstrap-grid.cssայժմ կիրառվում box-sizing: border-boxէ միայն սյունակի վրա՝ գլոբալ տուփի չափերը վերականգնելու փոխարեն: Այս կերպ մեր ցանցային ոճերը կարող են օգտագործվել ավելի շատ վայրերում՝ առանց միջամտության:

  • $enable-grid-classesայլևս չի անջատում կոնտեյներների դասերի ստեղծումը: Տես #29146:

  • Միքսինը լռելյայն թարմացվել make-colէ հավասար սյունակների՝ առանց նշված չափի:

Բովանդակություն, Reboot և այլն

  • RFS- ն այժմ միացված է լռելյայն: Միքսին օգտագործող վերնագրերնfont-size()ինքնաբերաբար կկարգավորեն իրենցfont-sizeմասշտաբները դիտակետով: Այս հատկությունը նախկինում միացված էր v4-ով:

  • ԿոտրումՎերանորոգվել է մեր ցուցադրման տպագրությունը՝ փոխարինելու մեր $display-*փոփոխականները և $display-font-sizesSass քարտեզով: Նաև հեռացվեց առանձին $display-*-weightփոփոխականները մեկ $display-font-weightև ճշգրտված font-sizes-ի համար:

  • Ավելացվեց .display-*վերնագրի երկու նոր չափ .display-5և .display-6.

  • Հղումները լռելյայն ընդգծված են (ոչ միայն սավառնելիս), եթե դրանք կոնկրետ բաղադրիչների մաս չեն:

  • Վերանախագծված աղյուսակները ՝ թարմացնելու իրենց ոճերը և վերակառուցելու դրանք CSS փոփոխականներով՝ ոճավորման նկատմամբ ավելի մեծ վերահսկողության համար:

  • ԿոտրումՆերդրված աղյուսակներն այլևս չեն ժառանգում ոճերը:

  • Կոտրում .thead-lightև .thead-darkհանվում են հօգուտ .table-*տարբերակային դասերի, որոնք կարող են օգտագործվել աղյուսակի բոլոր տարրերի համար ( thead, tbody, tfoot, tr, thև td):

  • ԿոտրումՄիքսինը table-row-variant()վերանվանվել է table-variant()և ընդունում է միայն 2 պարամետր՝ $color(գույնի անվանումը) և $value(գույնի կոդը): Եզրագծի գույնը և շեշտադրման գույները ավտոմատ կերպով հաշվարկվում են աղյուսակի գործոնի փոփոխականների հիման վրա:

  • Սեղանի բջիջների լցոնման փոփոխականները բաժանեք -yև -x.

  • ԿոտրումԲաց թողնված .pre-scrollableդասը. Տես #29135

  • Կոտրում .text-*կոմունալ ծառայություններն այլևս չեն ավելացնում սավառնող և կենտրոնացված վիճակներ հղումներին: .link-*Փոխարենը կարող են օգտագործվել օգնական դասեր: Տես #29267

  • ԿոտրումԲաց թողնված .text-justifyդասը. Տես #29793

  • Վերականգնել կանխադրված հորիզոնականը padding-leftև տարրերը դիտարկիչի լռելյայնից <ul>դեպի :<ol>40px2rem

  • Ավելացված $enable-smooth-scrollէ, որը կիրառվում scroll-behavior: smoothէ ամբողջ աշխարհում, բացառությամբ այն օգտատերերի, ովքեր խնդրում են նվազեցնել շարժումը prefers-reduced-motionլրատվամիջոցների հարցումների միջոցով: Տես #31877

RTL

  • Հորիզոնական ուղղության հատուկ փոփոխականները, կոմունալ ծառայությունները և միքսները բոլորը վերանվանվել են՝ օգտագործելու տրամաբանական հատկություններ, ինչպիսիք են flexbox դասավորություններում հայտնաբերվածները, օրինակ՝ startև endփոխարեն leftև right.

Ձևաթղթեր

  • Ավելացվեցին նոր լողացող ձևեր: Մենք խթանել ենք Լողացող պիտակների օրինակը ձևի ամբողջական աջակցվող բաղադրիչներին: Տես Լողացող պիտակների նոր էջը:

  • Կոտրում Համախմբված բնիկ և հատուկ ձևի տարրեր: Համախմբվել են վանդակները, ռադիոները, ընտրիչները և այլ մուտքեր, որոնք ունեին բնիկ և հատուկ դասեր v4-ում: Այժմ մեր ձևի գրեթե բոլոր տարրերը լիովին հարմարեցված են, մեծ մասը առանց հատուկ HTML-ի անհրաժեշտության:

    • .custom-checkայժմ է .form-check:
    • .custom-check.custom-switchայժմ է .form-check.form-switch:
    • .custom-selectայժմ է .form-select:
    • .custom-fileև .form-fileփոխարինվել են հատուկ ոճերով .form-control.
    • .custom-rangeայժմ է .form-range:
    • իջել է հայրենի .form-control-fileեւ .form-control-range.

  • Կոտրումիջել .input-group-appendև .input-group-prepend. Այժմ կարող եք պարզապես կոճակներ ավելացնել և .input-group-textորպես մուտքային խմբերի անմիջական երեխաներ:

  • Վավերացման հետադարձ կապի վրիպակ ունեցող մուտքային խմբում վաղուց բացակայող եզրագծի շառավիղը.has-validation վերջապես շտկվում է ՝ վավերացում ունեցող մուտքային խմբերին լրացուցիչ դաս ավելացնելով :

  • Կոտրում Մեր ցանցային համակարգի համար հանվել են դասավորության դասավորության դասերը: Օգտագործեք մեր ցանցը և կոմունալ ծառայությունները .form-group, .form-row, կամ -ի փոխարեն .form-inline:

  • ԿոտրումՁևերի պիտակներն այժմ պահանջում են .form-label:

  • Կոտրում .form-textայլևս չի սահմանվում display, ինչը թույլ է տալիս ստեղծել կամ արգելափակել օգնության տեքստը, ինչպես ցանկանում եք՝ պարզապես փոխելով HTML տարրը:

  • Վավերացման պատկերակները այլևս չեն կիրառվում <select>s-ի վրա multiple:

  • Վերադասավորվել է Sass-ի աղբյուրի ֆայլերը scss/forms/՝ ներառյալ մուտքային խմբի ոճերը:

Բաղադրիչներ

  • Մեր փոփոխականի paddingվրա հիմնված ազդանշանների, հացաթխման, քարտերի, բացվող ցուցակների, ցուցակների խմբերի, մոդալների, պոպովերի և գործիքների հուշումների միասնական արժեքներ: Տես #30564 :$spacer

Ակորդեոն

Ահազանգեր

  • Ահազանգումներն այժմ ունեն պատկերակներով օրինակներ :

  • Հեռացվել են հատուկ ոճերը <hr>s-ի համար յուրաքանչյուր ահազանգում, քանի որ դրանք արդեն օգտագործում են currentColor:

Պիտակներ

  • ԿոտրումԱնջատվել են բոլոր .badge-*գունային դասերը ֆոնային կոմունալ ծրագրերի համար (օրինակ՝ օգտագործել .bg-primaryփոխարենը .badge-primary):

  • ԿոտրումԱնցավ — փոխարենը .badge-pillօգտագործեք .rounded-pillկոմունալը:

  • ԿոտրումՀեռացվել են սավառնող և ֆոկուսի ոճերը <a>և <button>տարրերը:

  • Բարձրացրել է լռելյայն լիցքավորումը .25em/ .5em-ից .35em// կրծքանշանների համար .65em:

  • Պարզեցրեց հացի փշրանքների լռելյայն տեսքը՝ հեռացնելով padding, background-color, և border-radius.

  • Ավելացվեց նոր CSS մաքսային հատկություն --bs-breadcrumb-divider՝ հեշտ հարմարեցման համար՝ առանց CSS-ի վերակազմավորման անհրաժեշտության:

Կոճակներ

  • Կոտրում Փոխարկիչի կոճակները , վանդակներով կամ ռադիոյով, այլևս չեն պահանջում JavaScript և ունեն նոր նշում: Մենք այլևս չենք պահանջում փաթաթման տարր, ավելացնել.btn-checkայն<input>և զուգակցել այն որևէ.btnդասի հետ<label>: Տես #30650 : Սրա համար նախատեսված փաստաթղթերը մեր Կոճակների էջից տեղափոխվել են նոր Ձևաթղթեր բաժին:

  • Կոտրում Ազատվել .btn-blockէ կոմունալ ծառայությունների համար: Օգտագործման փոխարեն .btn-block, .btnփաթաթեք ձեր կոճակները .d-gridև .gap-*անհրաժեշտության դեպքում դրանք բաց թողնեք օգտակար գործիքով: Անցեք արձագանքող դասերի՝ դրանց նկատմամբ ավելի մեծ վերահսկողության համար: Կարդացեք փաստաթղթերը որոշ օրինակների համար:

  • Թարմացվել է մեր button-variant()և button-outline-variant()միքսները՝ լրացուցիչ պարամետրերին աջակցելու համար:

  • Թարմացված կոճակներ՝ սավառնող և ակտիվ վիճակների ավելի մեծ հակադրություն ապահովելու համար:

  • Անջատված կոճակներն այժմ ունեն pointer-events: none;:

Քարտ

  • ԿոտրումԱնցավ .card-deckմեր ցանցի օգտին: Փաթեթավորեք ձեր քարտերը սյունակային դասերի մեջ և ավելացրեք ծնողական .row-cols-*կոնտեյներ՝ քարտերի տախտակամածները վերստեղծելու համար (բայց ավելի մեծ վերահսկողությամբ արձագանքող դասավորվածության վրա):

  • ԿոտրումՀրաժարվել .card-columnsէ հօգուտ մասոնության: Տես #28922 :

  • Կոտրում.cardՀիմնված ակորդեոնը փոխարինվել է նոր ակորդեոնի բաղադրիչով :

  • Ավելացվեց նոր .carousel-darkտարբերակ մուգ տեքստի, հսկիչների և ցուցիչների համար (հիանալի է ավելի բաց ֆոնի համար):

  • Կարուսելի կառավարման շևրոն պատկերակները փոխարինվեցին Bootstrap Icons-ի նոր SVG-ներով :

Փակել կոճակը

  • ԿոտրումՎերանվանվել .closeէ .btn-closeավելի քիչ ընդհանուր անվան համար:

  • Փակման կոճակներն այժմ HTML-ում background-imagea-ի փոխարեն օգտագործում են a (ներկառուցված SVG) &times;, ինչը թույլ է տալիս ավելի հեշտ հարմարեցնել առանց ձեր նշագրումը դիպչելու անհրաժեշտության:

  • Ավելացվեց նոր .btn-close-whiteտարբերակ, որն օգտագործում filter: invert(1)է ավելի բարձր հակադրություն թույլ տալու համար, որով կարելի է հեռացնել պատկերակները ավելի մուգ ֆոնի վրա:

Փլուզվել

  • Հեռացված ոլորման խարիսխը ակորդեոնների համար:

  • Ավելացվեց նոր .dropdown-menu-darkտարբերակ և հարակից փոփոխականներ՝ ըստ պահանջի մուգ բացվող ցանկերի համար:

  • Ավելացվեց նոր փոփոխական $dropdown-padding-x.

  • Մթնեց իջնող բաժանարարը՝ բարելավված հակադրության համար:

  • ԿոտրումԲացվող ցանկի բոլոր իրադարձություններն այժմ գործարկվում են բացվող միացման կոճակի վրա, այնուհետև փուչիկներով տեղափոխվում են դեպի մայր տարր:

  • Բացվող ընտրացանկերն այժմ ունեն մի data-bs-popper="static"հատկանիշ, երբ բացվող ցանկի դիրքը ստատիկ է, և data-bs-popper="none"երբ բացվող ցանկը գտնվում է նավագոտում: Սա ավելացված է մեր JavaScript-ի կողմից և օգնում է մեզ օգտագործել հատուկ դիրքի ոճեր՝ չխանգարելով Պոպերի դիրքավորմանը:

  • ԿոտրումԱնջատված flipտարբերակ՝ բացվող հավելվածի համար՝ հօգուտ հայրենի Popper կոնֆիգուրացիայի: Այժմ դուք կարող եք անջատել շրջելու վարքագիծը՝ փոխանցելով դատարկ զանգված ՝ շրջելու փոփոխիչիfallbackPlacements տարբերակի համար :

  • Բացվող ընտրացանկերը այժմ կարող են կտտացվել նոր autoCloseտարբերակով, որը կառավարում է ավտոմատ փակման վարքագիծը : Դուք կարող եք օգտագործել այս տարբերակը՝ բացվող ընտրացանկի ներսում կամ դրսում սեղմումն ընդունելու համար՝ այն ինտերակտիվ դարձնելու համար:

  • Այժմ բացվող պատուհանները աջակցում .dropdown-itemեն s-ով փաթաթված <li>:

Ջամբոտրոն

Ցուցակի խումբ

  • Ավելացվել են նոր nullփոփոխականներ font-size, font-weight, color, և :hover colorդասի .nav-linkհամար:
  • ԿոտրումNavbars-ն այժմ պահանջում է կոնտեյներ ներսում (տարածության պահանջները և CSS-ն էապես պարզեցնելու համար):

Offcanvas

Էջավորում

  • Էջավորման հղումներն այժմ հարմարեցված margin-leftեն, որոնք դինամիկ կերպով կլորացվում են բոլոր անկյուններում, երբ բաժանվում են միմյանցից:

  • Ավելացվել transitionէ s էջադրման հղումներին:

Պոպովերներ

  • ԿոտրումՎերանվանվել .arrowէ .popover-arrowմեր լռելյայն popover ձևանմուշում:

  • Վերանվանվել whiteListէ տարբերակը allowList:

Սփիներներ

  • Սփիներներն այժմ հարգում prefers-reduced-motion: reduceեն՝ դանդաղեցնելով անիմացիաները: Տես #31882 :

  • Բարելավված պտտվող ուղղահայաց հավասարեցում:

Կենացներ

Գործիքների հուշումներ

  • ԿոտրումՎերանվանվել .arrowէ .tooltip-arrowմեր կանխադրված գործիքի հուշման ձևանմուշում:

  • Կոտրում-ի լռելյայն արժեքը fallbackPlacementsփոխվել է ['top', 'right', 'bottom', 'left']popper տարրերի ավելի լավ տեղադրման համար:

  • ԿոտրումՎերանվանվել whiteListէ տարբերակը allowList:

Կոմունալ ծառայություններ

  • ԿոտրումՎերանվանվել է մի քանի կոմունալ ծառայություններ՝ ուղղորդված անունների փոխարեն օգտագործելու տրամաբանական գույքի անունները՝ RTL աջակցության ավելացմամբ.

    • Վերանվանվել է .left-*և .right-*դեպի .start-*և .end-*.
    • Վերանվանվել է .float-leftև .float-rightդեպի .float-startև .float-end.
    • Վերանվանվել է .border-leftև .border-rightդեպի .border-startև .border-end.
    • Վերանվանվել է .rounded-leftև .rounded-rightդեպի .rounded-startև .rounded-end.
    • Վերանվանվել է .ml-*և .mr-*դեպի .ms-*և .me-*.
    • Վերանվանվել է .pl-*և .pr-*դեպի .ps-*և .pe-*.
    • Վերանվանվել է .text-leftև .text-rightդեպի .text-startև .text-end.

  • ԿոտրումԼռելյայն անջատված է բացասական լուսանցքները:

  • Ավելացվեց նոր դաս՝ ֆոնը լրացուցիչ տարրերին .bg-bodyարագ դնելու համար :<body>

  • Ավելացվեց նոր դիրքի կոմունալ ծառայություններ , top, right, bottomև left. Արժեքները ներառում են 0, 50%և 100%յուրաքանչյուր սեփականության համար:

  • Հորիզոնական կամ ուղղահայաց կենտրոնի բացարձակ/ֆիքսված դիրքավորված տարրերին ավելացվել են նոր .translate-middle-xև օգտակար ծառայություններ:.translate-middle-y

  • Ավելացվեց նոր border-widthկոմունալ ծառայություններ :

  • ԿոտրումՎերանվանվել .text-monospaceէ .font-monospace.

  • ԿոտրումՀեռացվել .text-hideէ, քանի որ դա տեքստը թաքցնելու հնացած մեթոդ է, որն այլևս չպետք է օգտագործվի:

  • Ավելացվել .fs-*են կոմունալ font-sizeծառայություններ (RFS-ն միացված է): Դրանք օգտագործում են նույն սանդղակը, ինչ HTML-ի լռելյայն վերնագրերը (1-6, մեծից փոքր) և կարող են փոփոխվել Sass քարտեզի միջոցով:

  • ԿոտրումՀամառոտության և հետևողականության համար վերանվանվել .font-weight-*են կոմունալ ծառայություններ :.fw-*

  • ԿոտրումՀամառոտության և հետևողականության համար վերանվանվել .font-style-*են կոմունալ ծառայություններ :.fst-*

  • Ավելացվել է կոմունալ և նոր կոմունալ ծառայություններ ( ) .d-gridցուցադրելու համար CSS Grid-ի և flexbox դասավորությունների համար:gap.gap

  • ԿոտրումՀեռացվեց .rounded-smև rounded-lg, և ներկայացրեց դասերի նոր սանդղակ, .rounded-0դեպի .rounded-3. Տես #31687 :

  • Ավելացվել են նոր line-heightկոմունալ ծառայություններ՝ .lh-1, .lh-sm, .lh-baseև .lh-lg. Տես այստեղ .

  • Տեղափոխել է .d-noneօգտակար ծրագիրը մեր CSS-ում, որպեսզի այն ավելի մեծ կշիռ տա ցուցադրման այլ կոմունալ ծրագրերի նկատմամբ:

  • Օգնականը .visually-hidden-focusableընդլայնել է նաև տարաների վրա աշխատելու համար՝ օգտագործելով :focus-within.

Օգնողներ

  • Կոտրում Արձագանքող ներդրման օգնականները վերանվանվել են հարաբերակցության օգնականների նոր դասերի անուններով և բարելավված վարքագծով, ինչպես նաև օգտակար CSS փոփոխականով:

    • Դասերը վերանվանվել են՝ փոխելու byհամար xկողմերի հարաբերակցության: Օրինակ, .ratio-16by9հիմա է .ratio-16x9.
    • Մենք հանել ենք .embed-responsive-itemև տարրերի խմբի ընտրիչը՝ հօգուտ ավելի պարզ .ratio > *ընտրիչի: Այլևս դասի կարիք չկա, և հարաբերակցության օգնականն այժմ աշխատում է ցանկացած HTML տարրի հետ:
    • $embed-responsive-aspect-ratiosSass քարտեզը վերանվանվել է և $aspect-ratiosդրա արժեքները պարզեցվել են՝ որպես key: valueզույգ ներառելու դասի անվանումը և տոկոսը:
    • CSS փոփոխականներն այժմ ստեղծվում և ներառվում են Sass քարտեզի յուրաքանչյուր արժեքի համար: Փոփոխեք --bs-aspect-ratioփոփոխականը փոփոխականի վրա՝ .ratioստեղծելու ցանկացած հարմարեցված կողմի հարաբերակցություն :

  • Կոտրում «Էկրանի ընթերցող» դասերն այժմ «տեսողականորեն թաքնված» դասեր են :

    • Sass ֆայլը փոխել scss/helpers/_screenreaders.scssէscss/helpers/_visually-hidden.scss
    • Վերանվանվել է .sr-onlyև .sr-only-focusableդեպի .visually-hiddenև.visually-hidden-focusable
    • Վերանվանվել է sr-only()և sr-only-focusable()խառնվում է visually-hidden()և visually-hidden-focusable().

  • bootstrap-utilities.cssայժմ ներառում է նաև մեր օգնականները: Օգնողներն այլևս կարիք չունեն ներմուծման մաքսային ձևավորումներում:

JavaScript

  • Անջատեց jQuery-ի կախվածությունը և վերագրեց հավելումները՝ սովորական JavaScript-ում լինելու համար:

  • ԿոտրումԲոլոր JavaScript պլագինների տվյալների ատրիբուտներն այժմ անվանատարածված են՝ օգնելու տարբերակել Bootstrap-ի ֆունկցիոնալությունը երրորդ կողմերից և ձեր սեփական կոդը: Օրինակ, մենք օգտագործում data-bs-toggleենք data-toggle.

  • Բոլոր պլագիններն այժմ կարող են ընդունել CSS ընտրիչը որպես առաջին փաստարկ: Դուք կարող եք կամ փոխանցել DOM տարր կամ որևէ վավեր CSS ընտրիչ՝ հավելվածի նոր օրինակ ստեղծելու համար.

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

  • popperConfigկարող է փոխանցվել որպես ֆունկցիա, որն ընդունում է Bootstrap-ի լռելյայն Popper կազմաձևը որպես արգումենտ, որպեսզի կարողանաք միաձուլել այս լռելյայն կոնֆիգուրացիան ձեր ձևով: Կիրառվում է բացվող պատուհանների, popover-ների և գործիքների հուշումների վրա:

  • The-ի լռելյայն արժեքը fallbackPlacementsփոխվել է ['top', 'right', 'bottom', 'left']Popper տարրերի ավելի լավ տեղադրման համար: Կիրառվում է բացվող պատուհանների, popover-ների և գործիքների հուշումների վրա:

  • Հանրային ստատիկ մեթոդներից հանվել է ընդգծումը, օրինակ՝ _getInstance()→ getInstance():