in English

Перехід на 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 було переписано для використання 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-*, щоб налаштувати a 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 тепер підтримує горизонтальне згортання . — Додайте .collapse-horizontalдо свого .collapse, щоб згорнути widthзамість height. Уникайте перемальовування браузера, установивши min-heightабо height.
Додано нові помічники стека та вертикальних ліній. — Швидко застосовуйте кілька властивостей flexbox, щоб швидко створювати власні макети зі стеками . Виберіть горизонтальний ( .hstack) і вертикальний ( .vstack) стеки. Додайте вертикальні роздільники, подібні до <hr>елементів, за допомогою нових .vrпомічників .
Додано нові глобальні :rootзмінні CSS. — Додано кілька нових змінних 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.
Замінено 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

Зміни в документації

Оновлено домашню сторінку, макет документів і нижній колонтитул.
Додано новий довідник посилок .
Додано новий розділ «Налаштувати », який замінив сторінку «Теми» версії 4 , з новими відомостями про Sass, параметри глобальної конфігурації, колірні схеми, змінні CSS тощо.
Реорганізовано всю документацію форми в новий розділ Форми , розділивши вміст на більш цілеспрямовані сторінки.
Подібним чином оновлено розділ «Макет », щоб більш чітко відобразити вміст сітки.
Сторінку компонента «Навігації» перейменовано на «Навігації та вкладки».
Сторінку «Чеки» перейменовано на «Чеки та радіо».
Перероблено навігаційну панель і додано нову вкладену навігацію, щоб полегшити роботу з нашими сайтами та версіями документів.
Додано нову комбінацію клавіш для поля пошуку: 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 .
ломка bootstrap-grid.cssтепер застосовується лише box-sizing: border-boxдо стовпця замість скидання глобального розміру поля. Таким чином, наші стилі сітки можна використовувати в більшій кількості місць без втручання.
$enable-grid-classesбільше не вимикає створення класів контейнерів. Див. #29146.
Оновлено make-colmixin, щоб за замовчуванням рівні стовпці без указаного розміру.

Вміст, перезавантаження тощо

RFS тепер увімкнено за замовчуванням. Заголовки, які використовуютьfont-size()міксин, автоматично налаштовуватимуть їхfont-sizeвідповідно до вікна перегляду. Раніше ця функція була включена в версію 4.
ломкаКапітально оновлено типографіку дисплея, щоб замінити наші $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атрибута. Це також дозволяє використовувати утиліти padding для створення більш товстих роздільників (наприклад, <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) замість ×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, оскільки його можна відтворити за допомогою утиліт. Перегляньте наш новий приклад Jumbotron для демонстрації.

Список групи

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

Навігація та вкладки

Додано нові nullзмінні для font-size, font-weight, colorі :hover colorдо .nav-linkкласу.

Панелі навігації

ломкаПанелі навігацій тепер вимагають контейнера (щоб різко спростити вимоги до інтервалів і CSS).
ломкаКлас .activeбільше не можна застосовувати до .nav-items, його потрібно застосовувати безпосередньо до .nav-links.

Offcanvas

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

Пагінація

Посилання на розбивку сторінок тепер мають настроювані margin-left, які динамічно заокруглюються в усіх кутах, коли вони відокремлені один від одного.
Додано transitions до посилань на сторінки.

Поповери

ломкаПерейменовано .arrowна .popover-arrowв нашому типовому шаблоні спливаючого вікна.
Перейменовано whiteListпараметр на allowList.

Спінери

Спінери тепер вшановують prefers-reduced-motion: reduce, сповільнюючи анімацію. Див. #31882 .
Покращене вертикальне вирівнювання спінера.

Тости

Тости тепер можна розташувати в a .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().