in English

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

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

Այս էջում

v5.2.0

Թարմացված դիզայն

Bootstrap v5.2.0-ն առաջարկում է դիզայնի նուրբ թարմացում նախագծում մի քանի բաղադրիչների և հատկությունների համար, հատկապես border-radiusկոճակների և ձևի վերահսկման ճշգրտված արժեքների միջոցով : Մեր փաստաթղթերը նաև թարմացվել են նոր գլխավոր էջով, փաստաթղթերի ավելի պարզ դասավորությամբ, որն այլևս չի քանդում կողագոտի հատվածները և Bootstrap Icon- ների ավելի ակնառու օրինակներ :

Ավելի շատ CSS փոփոխականներ

Մենք թարմացրել ենք մեր բոլոր բաղադրիչները՝ CSS փոփոխականներ օգտագործելու համար: Թեև Sass-ը դեռևս ամեն ինչի հիմքն է, յուրաքանչյուր բաղադրիչ թարմացվել է՝ ներառելու CSS փոփոխականները բաղադրիչի բազային դասերի վրա (օրինակ՝ .btn), ինչը թույլ է տալիս իրական ժամանակում ավելի շատ հարմարեցնել Bootstrap-ը: Հետագա թողարկումներում մենք կշարունակենք ընդլայնել CSS փոփոխականների մեր օգտագործումը մեր դասավորության, ձևերի, օգնականների և կոմունալ ծառայությունների մեջ: Կարդացեք ավելին CSS փոփոխականների մասին յուրաքանչյուր բաղադրիչի համապատասխան փաստաթղթերի էջերում:

Մեր CSS փոփոխականների օգտագործումը որոշ չափով թերի կլինի մինչև Bootstrap 6: Թեև մենք կցանկանայինք դրանք ամբողջությամբ իրականացնել ամբողջ տախտակում, դրանք վտանգված են կոտրել փոփոխություններ առաջացնելու համար: Օրինակ, $alert-border-width: var(--bs-border-width)մեր սկզբնական կոդում տեղադրումը խախտում է պոտենցիալ Sass-ը ձեր սեփական կոդը, եթե ինչ- $alert-border-width * 2ինչ պատճառներով դա անում էիք:

Որպես այդպիսին, որտեղ հնարավոր է, մենք կշարունակենք ձգտել դեպի ավելի շատ CSS փոփոխականներ, բայց խնդրում ենք գիտակցել, որ մեր իրականացումը կարող է մի փոքր սահմանափակվել v5-ում:

Նոր`_maps.scss`

Bootstrap v5.2.0-ը ներկայացրել է նոր Sass ֆայլ _maps.scss. Այն դուրս է հանում Sass-ի մի քանի քարտեզներ՝ _variables.scssշտկելու այն խնդիրը, երբ բնօրինակ քարտեզի թարմացումները չեն կիրառվել դրանք ընդլայնող երկրորդական քարտեզների վրա: Օրինակ, թարմացումները $theme-colorsչեն կիրառվել այլ թեմաների քարտեզների վրա, որոնց վրա հիմնված է եղել $theme-colors, ինչը խախտում է հիմնական անհատականացման աշխատանքային հոսքերը: Մի խոսքով, Sass-ն ունի սահմանափակում, երբ լռելյայն փոփոխական կամ քարտեզ օգտագործելուց հետո այն չի կարող թարմացվել: Նմանատիպ թերություն կա CSS փոփոխականների դեպքում, երբ դրանք օգտագործվում են այլ CSS փոփոխականներ կազմելու համար:

Ահա թե ինչու փոփոխական հարմարեցումները Bootstrap-ում պետք է գան հետո @import "functions", բայց առաջ @import "variables"և մեր ներմուծման փաթեթի մնացած մասը: Նույնը վերաբերում է Sass քարտեզներին. նախքան դրանք օգտագործելը, դուք պետք է անտեսեք կանխադրվածները: Հետևյալ քարտեզները տեղափոխվել են նոր _maps.scss.

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

Ձեր հարմարեցված Bootstrap CSS կառուցումները այժմ պետք է նման տեսք ունենան առանձին քարտեզների ներմուծմամբ:

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

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

Ընդլայնված font-weightկոմունալ ծառայություններ ՝ ներառելու .fw-semiboldկիսատառ տառատեսակներ:
Ընդլայնված border-radiusկոմունալ ծառայությունները ՝ ներառելու երկու նոր չափսեր .rounded-4և .rounded-5, ավելի շատ տարբերակների համար:

Լրացուցիչ փոփոխություններ

Ներկայացրեց նոր $enable-container-classesտարբերակ. — Այժմ փորձնական CSS Grid դասավորությունից օգտվելիս .container-*դասերը դեռ կկազմվեն, եթե այս տարբերակը սահմանված չէ false: Բեռնարկղերը նույնպես այժմ պահպանում են իրենց ջրահեռացման արժեքները:
Offcanvas բաղադրիչն այժմ ունի արձագանքող տատանումներ : Սկզբնական .offcanvasդասը մնում է անփոփոխ՝ այն թաքցնում է բովանդակությունը բոլոր դիտակետերում: Այն պատասխանատու դարձնելու համար փոխեք այդ .offcanvasդասը ցանկացած .offcanvas-{sm|md|lg|xl|xxl}դասի:
Ավելի հաստ սեղանի բաժանարարներն այժմ միացված են: — Մենք հանել ենք աղյուսակի խմբերի միջև ավելի հաստ և դժվար շրջվող եզրագիծը և այն տեղափոխել ենք ընտրովի դաս, որը կարող եք կիրառել, .table-group-divider. Օրինակի համար տե՛ս աղյուսակի փաստաթղթերը:
Scrollspy-ը վերաշարադրվել է՝ օգտագործելու Intersection Observer API- ը, ինչը նշանակում է, որ դուք այլևս կարիք չունեք հարաբերական մայր փաթաթիչների, հնացածoffsetկոնֆիգուրացիաների և այլնի: Փնտրեք, որ ձեր Scrollspy իրականացումները լինեն ավելի ճշգրիտ և հետևողական իրենց նավարկվող ընդգծման մեջ:
Popover-ներն ու գործիքների հուշումները այժմ օգտագործում են CSS փոփոխականներ: Որոշ CSS փոփոխականներ թարմացվել են իրենց Sass-ի գործընկերներից՝ փոփոխականների թիվը նվազեցնելու համար: Արդյունքում երեք փոփոխականներ հնացել են այս թողարկումում՝ $popover-arrow-color, $popover-arrow-outer-color, և $tooltip-arrow-color:
Ավելացվեցին նոր .text-bg-{color}օգնականներ: .text-*Անհատական և .bg-*կոմունալ ծառայություններ կարգավորելու փոխարեն, այժմ կարող եք օգտագործել .text-bg-*օգնականներըbackground-color ՝ հակադրվող առաջին պլանով պատկերը սահմանելու համար color:
Ավելացվեց .form-check-reverseփոփոխիչ՝ պիտակների և հարակից վանդակների/ռադիոների հերթականությունը շրջելու համար:
Նոր դասի միջոցով աղյուսակներին ավելացվել են գծավոր սյունակներ :.table-striped-columns

Փոփոխությունների ամբողջական ցանկի համար տե՛ս v5.2.0 նախագիծը GitHub-ում :

v5.1.0

Ավելացվեց փորձնական աջակցություն CSS Grid դասավորության համար : — Սա ընթացքի մեջ է և դեռ պատրաստ չէ արտադրության օգտագործման համար, բայց դուք կարող եք միանալ նոր գործառույթին Sass-ի միջոցով: Այն միացնելու համար անջատեք լռելյայն ցանցը՝ կարգավորելով $enable-grid-classes: falseև միացրեք CSS ցանցը՝ սահմանելով $enable-cssgrid: true.
Թարմացված նավագոտիներ՝ offcanvas-ին աջակցելու համար: — Ավելացրեք offcanvas գզրոցներ ցանկացած navbar- ում՝ արձագանքող .navbar-expand-*դասերով և որոշ offcanvas նշումներով:
Ավելացվեց նոր տեղապահ բաղադրիչ : — Մեր նորագույն բաղադրիչը՝ իրական բովանդակության փոխարեն ժամանակավոր բլոկներ տրամադրելու միջոց, որը կօգնի ցույց տալ, որ ինչ-որ բան դեռ բեռնվում է ձեր կայքում կամ հավելվածում:
Collapse plugin-ն այժմ աջակցում է հորիզոնական փլուզմանը : — Ավելացրե՛ք .collapse-horizontalձերը .collapse՝ ի widthփոխարեն կոծկելու համար height: Խուսափեք դիտարկիչի վերաներկումից՝ սահմանելով a min-heightկամ height.
Ավելացվեց նոր կույտի և ուղղահայաց կանոնների օգնականներ: — Արագորեն կիրառեք flexbox-ի բազմաթիվ հատկություններ՝ կույտերով հարմարեցված դասավորություններ արագ ստեղծելու համար : Ընտրեք հորիզոնական ( .hstack) և ուղղահայաց ( .vstack) կույտերից: Նոր օգնականների հետ ավելացրեք ուղղահայաց բաժանարարներ, որոնք նման են <hr>տարրերին :.vr
Ավելացվել են նոր գլոբալ :rootCSS փոփոխականներ: — Ավելացրել է մի քանի նոր CSS փոփոխականներ ոճերի :rootվերահսկման մակարդակին : <body>Ավելի շատ են աշխատում, այդ թվում՝ մեր կոմունալ ծառայություններում և բաղադրիչներում, բայց այժմ կարդացեք CSS փոփոխականները Անհատականացնել բաժնում :
Վերանորոգել է գույնի և ֆոնի կոմունալ ծրագրերը՝ CSS փոփոխականներ օգտագործելու համար, և ավելացրել է նոր տեքստի անթափանցիկության և ֆոնի անթափանցիկության կոմունալ ծառայություններ: — .text-* և .bg-*կոմունալ ծառայություններն այժմ կառուցված են CSS փոփոխականներով և rgba()գունային արժեքներով, ինչը թույլ է տալիս հեշտությամբ հարմարեցնել ցանկացած կոմունալ նոր անթափանցիկ ծրագրերով:
Ավելացվեց հատվածի նոր օրինակներ, որոնք հիմնված են ցույց տալու, թե ինչպես հարմարեցնել մեր բաղադրիչները: — Քաշեք պատրաստ օգտագործելու հարմարեցված բաղադրիչները և դիզայնի այլ ընդհանուր օրինաչափությունները մեր նոր Հատվածների օրինակներով : Ներառում է էջատակներ , բացվող ցանկեր , ցուցակների խմբեր և մոդալներ :
Հեռացվել է չօգտագործված դիրքավորման ոճերը popover-ներից և գործիքների հուշումներից , քանի որ դրանք մշակվում են բացառապես Popper-ի կողմից: $tooltip-marginհնացել է և nullընթացքի մեջ է:

Ցանկանու՞մ եք ավելի շատ տեղեկություններ: Կարդացեք v5.1.0 բլոգի գրառումը:

Ողջույն! Bootstrap 5, v5.0.0-ի մեր առաջին հիմնական թողարկման փոփոխությունները փաստաթղթավորված են ստորև: Դրանք չեն արտացոլում վերը նշված լրացուցիչ փոփոխությունները:

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

Ջնջվել է 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
Կոտրում <hr>տարրերն այժմ օգտագործվում են հատկանիշը ավելի լավ աջակցելու heightփոխարեն : Սա նաև հնարավորություն է տալիս օգտագործել լիցքավորման կոմունալ ծառայություններ՝ ավելի հաստ բաժանիչներ ստեղծելու համար (օրինակ՝ ):bordersize<hr class="py-1">
Վերականգնել կանխադրված հորիզոնականը padding-leftև տարրերը դիտարկիչի լռելյայնից <ul>դեպի :<ol>40px2rem
Ավելացված $enable-smooth-scrollէ, որը կիրառվում scroll-behavior: smoothէ ամբողջ աշխարհում, բացառությամբ այն օգտատերերի, ովքեր խնդրում են նվազեցնել շարժումը prefers-reduced-motionլրատվամիջոցների հարցումների միջոցով: Տես #31877

RTL

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

Ձևաթղթեր

Ավելացվեցին նոր լողացող ձևեր: Մենք խթանել ենք Լողացող պիտակների օրինակը ձևի ամբողջական աջակցվող բաղադրիչներին: Տես Լողացող պիտակների նոր էջը:
Կոտրում Համախմբված բնիկ և հատուկ ձևի տարրեր: Համախմբվել են վանդակները, ռադիոները, ընտրիչները և այլ մուտքեր, որոնք ունեին բնիկ և հատուկ դասեր v4-ում: Այժմ մեր ձևի գրեթե բոլոր տարրերը լիովին հարմարեցված են, մեծ մասը առանց հատուկ HTML-ի անհրաժեշտության:
- .custom-control.custom-checkboxայժմ է .form-check:
- .custom-control.custom-custom-radioայժմ է .form-check:
- .custom-control.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 տարրը:
Ձևերի վերահսկիչները այլևս չեն օգտագործվում height, երբ հնարավոր է, ամրագրված են, փոխարենը հետաձգվում են min-height՝ հարմարեցումը և այլ բաղադրիչների հետ համատեղելիությունը բարելավելու համար:
Վավերացման պատկերակները այլևս չեն կիրառվում <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) ×, ինչը թույլ է տալիս ավելի հեշտ հարմարեցնել առանց ձեր նշագրումը դիպչելու անհրաժեշտության:
Ավելացվեց նոր .btn-close-whiteտարբերակ, որն օգտագործում filter: invert(1)է ավելի բարձր հակադրություն թույլ տալու համար, որով կարելի է հեռացնել պատկերակները ավելի մուգ ֆոնի վրա:

Փլուզվել

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

Բացվող պատուհաններ

Ավելացվեց նոր .dropdown-menu-darkտարբերակ և հարակից փոփոխականներ՝ ըստ պահանջի մուգ բացվող ցանկերի համար:
Ավելացվեց նոր փոփոխական $dropdown-padding-x.
Մթնեց իջնող բաժանարարը՝ բարելավված հակադրության համար:
ԿոտրումԲացվող ցանկի բոլոր իրադարձություններն այժմ գործարկվում են բացվող միացման կոճակի վրա, այնուհետև փուչիկներով տեղափոխվում են դեպի մայր տարր:
Բացվող ընտրացանկերն այժմ ունեն մի data-bs-popper="static"հատկանիշ, երբ բացվող ցանկի դիրքավորումը ստատիկ է, կամ բացվող ցանկը նավագոտում է: Սա ավելացված է մեր JavaScript-ի կողմից և օգնում է մեզ օգտագործել հատուկ դիրքի ոճեր՝ չխանգարելով Պոպերի դիրքավորմանը:
ԿոտրումԱնջատված flipտարբերակ՝ բացվող հավելվածի համար՝ հօգուտ հայրենի Popper կոնֆիգուրացիայի: Այժմ դուք կարող եք անջատել շրջելու վարքագիծը՝ փոխանցելով դատարկ զանգված ՝ շրջելու փոփոխիչի fallbackPlacements տարբերակի համար :
Բացվող ընտրացանկերը այժմ կարող են կտտացվել նոր autoCloseտարբերակով, որը կառավարում է ավտոմատ փակման վարքագիծը : Դուք կարող եք օգտագործել այս տարբերակը՝ բացվող ընտրացանկի ներսում կամ դրսում սեղմումն ընդունելու համար՝ այն ինտերակտիվ դարձնելու համար:
Այժմ բացվող պատուհանները աջակցում .dropdown-itemեն s-ով փաթաթված <li>:

Ջամբոտրոն

ԿոտրումԱզատվեց jumbotron բաղադրիչը, քանի որ այն կարող է կրկնօրինակվել կոմունալ ծառայություններով: Տես մեր նոր Jumbotron օրինակը ցուցադրության համար:

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

Ավելացվեց նոր .list-group-numberedփոփոխիչ ցուցակի խմբերին:

Նավակներ և ներդիրներ

Ավելացվել են նոր nullփոփոխականներ font-size, font-weight, color, և :hover colorդասի .nav-linkհամար:

Navbars

ԿոտրումNavbars-ն այժմ պահանջում է կոնտեյներ ներսում (տարածության պահանջները և CSS-ն էապես պարզեցնելու համար):
ԿոտրումԴասը .activeայլևս չի կարող կիրառվել .nav-items-ի վրա, այն պետք է կիրառվի անմիջապես .nav-links-ի վրա:

Offcanvas

Ավելացվեց նոր offcanvas բաղադրիչը :

Էջավորում

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

Պոպովերներ

ԿոտրումՎերանվանվել .arrowէ .popover-arrowմեր լռելյայն popover ձևանմուշում:
Վերանվանվել whiteListէ տարբերակը allowList:

Սփիներներ

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

Կենացներ

Կենացները այժմ կարող են տեղադրվել a- .toast-containerում դիրքավորման կոմունալ ծառայությունների օգնությամբ :
Տոստի կանխադրված տեւողությունը փոխվեց 5 վայրկյանի:
Հանվել overflow: hiddenէ կենացներից և փոխարինվել է ֆունկցիաներով համապատասխան border-radiuss- calc()ներով:

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

ԿոտրումՎերանվանվել .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 ընտրիչ՝ հավելվածի նոր օրինակ ստեղծելու համար.
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigկարող է փոխանցվել որպես ֆունկցիա, որն ընդունում է Bootstrap-ի լռելյայն Popper կազմաձևը որպես արգումենտ, որպեսզի կարողանաք միաձուլել այս լռելյայն կոնֆիգուրացիան ձեր ձևով: Կիրառվում է բացվող պատուհանների, popover-ների և գործիքների հուշումների վրա:
The-ի լռելյայն արժեքը fallbackPlacementsփոխվել է ['top', 'right', 'bottom', 'left']Popper տարրերի ավելի լավ տեղադրման համար: Կիրառվում է բացվող պատուհանների, popover-ների և գործիքների հուշումների վրա:
Հանրային ստատիկ մեթոդներից հանվել է ընդգծումը, օրինակ՝ _getInstance()→ getInstance():