Перейти до основного вмісту Перейти до навігації документами
in English

Перехід на 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

  • ломка <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-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) замість &times;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.

Джамботрон

Список групи

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

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