Перехід на v5

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

На цій сторінці

Залежності

Відкинуто 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
Скинути за замовчуванням горизонталь 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-checkє зараз .form-check.
- .custom-check.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.
Піктограми перевірки більше не застосовуються до <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"атрибут, коли розташування спадного списку є статичним і data-bs-popper="none"коли спадне меню знаходиться на панелі навігації. Це додається нашим 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).

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, щоб створити новий екземпляр плагіна:
```
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigможна передати як функцію, яка приймає конфігурацію Popper за замовчуванням Bootstrap як аргумент, щоб ви могли об’єднати цю конфігурацію за замовчуванням у свій спосіб. Застосовується до розкривних меню, спливаючих вікон і підказок.
Значення за замовчуванням fallbackPlacementsзмінено на ['top', 'right', 'bottom', 'left']для кращого розміщення елементів Popper. Застосовується до розкривних меню, спливаючих вікон і підказок.
Видалено підкреслення з публічних статичних методів, таких як _getInstance()→ getInstance().