Мигриране към v5

Проследявайте и преглеждайте промените в изходните файлове, документацията и компонентите на Bootstrap, за да ви помогне да мигрирате от v4 към v5.

На тази страница

v5.2.0

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

Bootstrap v5.2.0 включва фина актуализация на дизайна за шепа компоненти и свойства в целия проект, най-вече чрез прецизирани border-radiusстойности на бутони и контроли на формуляри . Нашата документация също беше актуализирана с нова начална страница, по-опростено оформление на документи, което вече не свива секции от страничната лента, и по-забележителни примери за икони на Bootstrap .

Още 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 е пренаписан , за да използва API на Intersection Observer , което означава, че вече нямате нужда от относителни родителски обвивки, оттеглена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-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()цветови стойности, което ви позволява лесно да персонализирате всяка помощна програма с нови помощни програми за непрозрачност.
Добавени са нови примери за фрагменти, които показват как да персонализираме нашите компоненти. — Изтеглете готови за използване персонализирани компоненти и други често срещани модели на проектиране с нашите нови примери за фрагменти . Включва долни колонтитули , падащи менюта , списъчни групи и модални елементи .
Премахнати са неизползваните стилове на позициониране от изскачащи елементи и подсказки , тъй като те се обработват единствено от Popper. $tooltip-marginе отхвърлено и зададено nullв процес.

Искате повече информация? Прочетете публикацията в блога v5.1.0.

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

Зависимости

Изпуснат jQuery.
Надстроен от Popper v1.x до Popper v2.x.
Заменен Libsass с Dart Sass, тъй като нашият Sass компилатор, даден Libsass, беше отхвърлен.
Мигрирахме от Jekyll към Hugo за изграждане на нашата документация

Поддръжка на браузър

Отпаднаха Internet Explorer 10 и 11
Изпуснат Microsoft Edge < 16 (Legacy Edge)
Отпадна Firefox < 60
Изпуснато Safari < 12
Отпадна iOS Safari < 12
Изпуснат Chrome < 60

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

Преработена начална страница, оформление на документи и долен колонтитул.
Добавено е ново ръководство за парцели .
Добавена е нова секция за персонализиране , заменяща страницата за темизиране на 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.
РазбиванеПараметрите на 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)целеви прозорци за изглед между 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-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 за пример .
Разбиване 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) .thtd
РазбиванеМиксинът 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()mixins, за да поддържаме допълнителни параметри.
Актуализирани бутони, за да осигурят увеличен контраст при задържане и активни състояния.
Деактивираните бутони вече имат 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 и ни помага да използваме персонализирани стилове на позиция, без да пречи на позиционирането на Popper.
РазбиванеИзпусната flipопция за плъгин за падащо меню в полза на родната конфигурация на Popper. Вече можете да деактивирате поведението на обръщане, като подадете празен масив за fallbackPlacementsопция в модификатора на обръщане .
Падащите менюта вече могат да се кликват с нова autoCloseопция за управление на поведението при автоматично затваряне . Можете да използвате тази опция, за да приемете щракването вътре или извън падащото меню, за да го направите интерактивно.
Падащите менюта вече поддържат .dropdown-items, обвити в <li>s.

Джъмботрон

РазбиванеКомпонентът jumbotron е премахнат, тъй като може да бъде репликиран с помощни програми. Вижте нашия нов пример за Jumbotron за демонстрация.

Списъчна група

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

Навигация и раздели

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

Навигационни ленти

РазбиванеНавигационните ленти вече изискват контейнер вътре (за драстично опростяване на изискванията за разстояние и необходимия CSS).
РазбиванеКласът .activeвече не може да се прилага към .nav-items, той трябва да се прилага директно върху .nav-links.

Offcanvas

Добавен е новият компонент offcanvas .

Пагинация

Връзките към страници вече имат възможност за персонализиране margin-left, които са динамично закръглени във всички ъгли, когато са отделени един от друг.
Добавени transitionса s към връзките за страници.

Попови

РазбиванеПреименувано .arrowна .popover-arrowв нашия изскачащ шаблон по подразбиране.
Преименувана whiteListопция на allowList.

Спинери

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

Тостове

Тостовете вече могат да бъдат позиционирани в .toast-containerс помощта на помощните програми за позициониране .
Променена е продължителността на тоста по подразбиране на 5 секунди.
Премахнато overflow: hiddenот тостовете и заменено с подходящи border-radiuss с calc()функции.

Подсказки

РазбиванеПреименувано .arrowна .tooltip-arrowв нашия шаблон за подсказка по подразбиране.
РазбиванеСтойността по подразбиране за 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да създадете персонализирано съотношение .
Разбиване Класовете „Екранен четец“ вече са „визуално скрити“ класове .
- Променете файла 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()mixins към 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 като аргумент, така че да можете да обедините тази конфигурация по подразбиране по ваш начин. Прилага се за падащи менюта, изскачащи менюта и подсказки.
Стойността по подразбиране за fallbackPlacementsе променена на ['top', 'right', 'bottom', 'left']за по-добро разположение на елементите на Popper. Прилага се за падащи менюта, изскачащи менюта и подсказки.
Премахнато е подчертаване от публични статични методи като _getInstance()→ getInstance().