Перейти до основного вмісту Перейти до навігації документами
Check
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) замість &times;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.

Джамботрон

Список групи

  • Додано нові nullзмінні для font-size, font-weight, colorі :hover colorдо .nav-linkкласу.
  • ломкаПанелі навігацій тепер вимагають контейнера (щоб різко спростити вимоги до інтервалів і CSS).
  • ломкаКлас .activeбільше не можна застосовувати до .nav-items, його потрібно застосовувати безпосередньо до .nav-links.

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().