Перехід на 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-col
mixin, щоб за замовчуванням рівні стовпці без указаного розміру.
Вміст, перезавантаження тощо
-
RFS тепер увімкнено за замовчуванням. Заголовки, які використовують
font-size()
міксин, автоматично налаштовуватимуть їхfont-size
відповідно до вікна перегляду. Раніше ця функція була включена в версію 4. -
ломкаКапітально оновлено типографіку дисплея, щоб замінити наші
$display-*
змінні та$display-font-sizes
карту Sass. Також видалено окремі$display-*-weight
змінні для одного$display-font-weight
та скоригованогоfont-size
s. -
Додано два нових
.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-item
s, загорнуті в<li>
s.
Джамботрон
- ломкаВилучено компонент jumbotron, оскільки його можна відтворити за допомогою утиліт. Перегляньте наш новий приклад Jumbotron для демонстрації.
Список групи
- Додано новий
.list-group-numbered
модифікатор до груп списку.
Навігація та вкладки
- Додано нові
null
змінні дляfont-size
,font-weight
,color
і:hover
color
до.nav-link
класу.
Панелі навігації
- ломкаПанелі навігацій тепер вимагають контейнера (щоб різко спростити вимоги до інтервалів і CSS).
Offcanvas
- Додано новий компонент offcanvas .
Пагінація
-
Посилання на розбивку сторінок тепер мають настроювані
margin-left
, які динамічно заокруглюються в усіх кутах, коли вони відокремлені один від одного. -
Додано
transition
s до посилань на сторінки.
Поповери
-
ломкаПерейменовано
.arrow
на.popover-arrow
в нашому типовому шаблоні спливаючого вікна. -
Перейменовано
whiteList
параметр наallowList
.
Спінери
-
Спінери тепер вшановують
prefers-reduced-motion: reduce
, сповільнюючи анімацію. Див. #31882 . -
Покращене вертикальне вирівнювання спінера.
Тости
-
Тости тепер можна розташувати в a
.toast-container
за допомогою утиліт позиціонування . -
Стандартну тривалість тосту змінено на 5 секунд.
-
Видалено
overflow: hidden
з тостів і замінено належнимиborder-radius
s із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-ratios
Sass було перейменовано на ,$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()
.
- Змінено файл Sass з
-
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()
.