Мигрирање на v5

Следете ги и прегледувајте ги промените во изворните датотеки, документацијата и компонентите на Bootstrap за да ви помогнат да мигрирате од v4 на v5.

На оваа страница

v5.2.0

Освежен дизајн

Bootstrap v5.2.0 располага со суптилно ажурирање на дизајнот за неколку компоненти и својства низ целиот проект, особено преку рафинираните border-radiusвредности на копчињата и контролите на формата . Нашата документација, исто така, е ажурирана со нова почетна страница, поедноставен распоред на документи што повеќе не ги собира деловите од страничната лента и поистакнати примери на икони за подигање .

Повеќе 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 да бидат попрецизни и конзистентни во нивното истакнување на навигација.
Поповерите и советите за алатки сега користат 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-expand-*класи и некои offcanvas ознаки.
Додадена е нова компонента на заштитно место . — Нашата најнова компонента, начин да обезбедиме привремени блокови наместо вистинска содржина за да помогнеме да покажеме дека нешто сè уште се вчитува на вашата страница или апликација.
Приклучокот за колапс сега поддржува хоризонтално колапсирање . — Додајте .collapse-horizontalво вашето .collapseза да го соберете widthнаместо height. Избегнувајте пребојување на прелистувачот со поставување на min-heightили height.
Додадени се нови помошници за стек и вертикални правила. — Брзо примени повеќе својства на flexbox за брзо креирање приспособени распореди со стекови . Изберете од хоризонтални ( .hstack) и вертикални ( .vstack) стекови. Додадете вертикални разделувачи слични на <hr>елементите со новите .vrпомошници .
Додадени нови глобални :rootCSS променливи. — Додадени се неколку нови CSS променливи на :rootниво за контролирање на <body>стилови. Повеќе се во тек, вклучително и во нашите услужни програми и компоненти, но засега прочитајте ги променливите CSS во делот Приспособи .
Ги ремонтираше алатките за боја и заднина за да користи CSS променливи и додаде нови алатки за непроѕирност на текст и заднина . — .text-* и .bg-*алатките сега се изградени со CSS променливи и rgba()вредности на боја, што ви овозможува лесно да ја приспособите секоја алатка со нови алатки за непроѕирност.
Додадени се нови примери на фрагменти базирани да покажат како да ги приспособиме нашите компоненти. — Подгответе се да користите приспособени компоненти и други вообичаени модели на дизајн со нашите нови примери на Snippets . Вклучува подножја , паѓачки мени , групи на списоци и модали .
Отстранети се неискористените стилови на позиционирање од поповери и совети за алатки бидејќи со нив ракува исклучиво Попер. $tooltip-marginе застарен и поставен nullво процес.

Сакате повеќе информации? Прочитајте го блогот на v5.1.0.

Здраво! Промените на нашето прво големо издание на Bootstrap 5, v5.0.0, се документирани подолу. Тие не ги одразуваат дополнителните промени прикажани погоре.

Зависности

Исфрлен jQuery.
Надградено од Popper v1.x на Popper v2.x.
Го замени Libsas со Dart Sass бидејќи нашиот компајлер Sass, даден Libsas, беше застарен.
Мигриравме од Џекил во Хуго за изградба на нашата документација

Поддршка на прелистувачот

Исфрлен Internet Explorer 10 и 11
Исфрлен Microsoft Edge < 16 (наследен раб)
Испадна Firefox < 60
Исфрлен Safari < 12
Исфрлен iOS Safari < 12
Исфрлен Chrome < 60

Промени во документацијата

Редизајнирана почетна страница, распоред на документи и подножје.
Додаден е нов водич за парцела .
Додаден е нов дел Приспособување , заменувајќи ја страницата Theming на v4 , со нови детали за Sass, опции за глобална конфигурација, шеми на бои, CSS променливи и многу повеќе.
Ја реорганизираше целата документација за формулари во нов дел Форми , разделувајќи ја содржината на повеќе фокусирани страници.
Слично на тоа, ажуриран е делот Распоред , за појасно да се обнови содржината на мрежата.
Преименувана страницата на компонентата „Navs“ во „Navs & Tabs“.
Страницата „Проверки“ е преименувана во „Проверки и радија“.
Ја редизајнираше лентата за навигација и додаде нова поднавигација за полесно да се движите околу нашите сајтови и верзии на документи.
Додадена е нова кратенка на тастатурата за полето за пребарување: 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-breakpoint-down()ја користи самата точка на прекин наместо следната точка на прекин (на пр., media-breakpoint-down(lg)наместо прикази на media-breakpoint-down(md)цели помали од lg).
- Слично на тоа, вториот параметар во media-breakpoint-between()исто така ја користи самата точка на прекин наместо следната точка на прекин (на пр. media-between(sm, lg)наместо да media-breakpoint-between(sm, md)ги насочува погледите помеѓу smи lg).
КршењеОтстранети стилови на печатење и $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-shadowмиксините сега дозволуваат 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и нагоре. Нема промени на сите други точки на прекин.
Подобрени олуци. Олуците сега се поставени во ремс и се потесни од 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ажурираше стандардно на еднакви колони без одредена големина.

Содржина, рестартирање, итн

RFS сега е стандардно овозможен. Насловите што користатfont-size()миксин автоматски ќе ги приспособатfont-sizeна скала со приказот. Оваа функција претходно беше вклучена со v4.
КршењеЈа ремонтиравме нашата типографија на екранот за да ги замени нашите $display-*променливи и со $display-font-sizesкарта Sass. Исто така, се отстранети поединечните $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наместо borderза подобра поддршка на sizeатрибутот. Ова исто така овозможува користење на алатки за полнење за да се создадат подебели разделувачи (на пр., <hr class="py-1">).
Ресетирајте го стандардното хоризонтално padding-leftвклучено <ul>и <ol>елементите од стандардниот прелистувач 40pxна 2rem.
Додадено $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вредности за предупредувања, трошки од леб, картички, паѓачки мени, групи на списоци, модали, поповери и совети за алатки кои треба да се засноваат на нашата $spacerпроменлива. Видете #30564 .

Хармоника

Додадена е нова компонента за хармоника .

Известувања

Предупредувањата сега имаат примери со икони .
Отстранети сопствени стилови за <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варијанта за темен текст, контроли и индикатори (одлична за полесни позадини).
Заменети се иконите на шевронот за контролите на рингишпил со нови SVG од Bootstrap Icons .

Копче за затворање

КршењеПреименувано .closeво .btn-closeза помалку генеричко име.
Копчињата за затворање сега користат background-image(вграден SVG) наместо a ×во HTML, што овозможува полесно прилагодување без потреба да се допира вашата ознака.
Додадена е нова .btn-close-whiteваријанта што користи filter: invert(1)за овозможување на икони за отфрлање повисок контраст против потемна позадина.

Колапс

Отстрането закотвување на свитокот за хармоника.

Паѓања

Додадена е нова .dropdown-menu-darkваријанта и придружни променливи за темни спуштања по барање.
Додадена е нова променлива за $dropdown-padding-x.
Го затемни паѓачкиот делител за подобрен контраст.
КршењеСите настани за паѓачкото мени сега се активираат на паѓачкото копче за вклучување, а потоа се додаваат до родителскиот елемент.
Паѓачките менија сега имаат поставено data-bs-popper="static"атрибути кога позиционирањето на паѓачкото мени е статично или паѓачкото мени е во лентата за навигација. Ова е додадено од нашиот JavaScript и ни помага да користиме сопствени стилови на позиција без да се мешаме во позиционирањето на Попер.
КршењеИспуштена flipопција за паѓачки приклучок во корист на домашната конфигурација на Popper. Сега можете да го оневозможите однесувањето на превртување со предавање на празна низа за fallbackPlacementsопција во модификаторот за превртување .
Паѓачките менија сега може да се кликнат со нова autoCloseопција за справување со однесувањето на автоматско затворање . Можете да ја користите оваа опција за да го прифатите кликнувањето внатре или надвор од паѓачкото мени за да го направите интерактивно.
Паѓањата сега поддржуваат .dropdown-items завиткани во <li>s.

Џамботрон

КршењеЈа исфрли џамботронската компонента бидејќи може да се реплицира со комуналните услуги. Погледнете го нашиот нов пример на Jumbotron за демо.

Листа група

Додаден нов .list-group-numberedмодификатор во групите на списоци.

Navs и јазичиња

Додадени се нови nullпроменливи за font-size, font-weight, colorи :hover colorво .nav-linkкласата.

Navbars

КршењеНа Navbars сега е потребен контејнер внатре (за драстично да се поедностават барањата за растојание и потребно е CSS).
КршењеКласата .activeповеќе не може да се примени на .nav-items, мора да се примени директно на .nav-links.

Offcanvas

Додадена е новата компонента offcanvas .

Пагинација

Врските за пагинација сега имаат можност за приспособување margin-leftкои се динамично заоблени на сите агли кога се одделени еден од друг.
Додадени transitions на врски за страници.

Поповери

КршењеПреименувано .arrowво .popover-arrowво нашиот стандарден поповер шаблон.
Преименувана whiteListопција во allowList.

Спинери

Спинерите сега почестуваат prefers-reduced-motion: reduceсо забавување на анимациите. Видете #31882 .
Подобрено вертикално порамнување на центрифугата.

Тостови

Тостовите сега можат да се позиционираат во а .toast-containerсо помош на алатки за позиционирање .
Го промени стандардното времетраење на тост на 5 секунди.
Отстранет overflow: hiddenод тостови и заменет со соодветни border-radiuss со calc()функции.

Совети за алатки

КршењеПреименувано .arrowво .tooltip-arrowво нашиот стандарден шаблон за совети за алатки.
КршењеСтандардната вредност за the fallbackPlacementsсе менува во ['top', 'right', 'bottom', 'left']за подобро поставување на попер елементи.
КршењеПреименувана 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за приказ на алатки и нови gapалатки ( .gap) за распореди на CSS Grid и flexbox.
КршењеОтстранети .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да креирате каков било прилагоден сооднос .
Кршење Класите „Screen Reader“ сега се „визуелно скриени“ класи .
- Ја смени датотеката 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може да се пренесе како функција која ја прифаќа стандардната Popper конфигурација на Bootstrap како аргумент, за да можете да ја споите оваа стандардна конфигурација на ваш начин. Важи за паѓачки склопки, поповери и совети за алатки.
Стандардната вредност за the fallbackPlacementsсе менува во ['top', 'right', 'bottom', 'left']за подобро поставување на Popper елементите. Важи за паѓачки склопки, поповери и совети за алатки.
Отстрането подвлекување од јавни статични методи како _getInstance()→ getInstance().