Оригинал Посмотреть на GitHub

Переход на 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 < 10
Удален iOS Safari < 10
Удален Chrome < 60

Изменения в документации

Обновленная домашняя страница, макет документов и нижний колонтитул.
Добавлено новое руководство по Parcel.
Добавлен новый раздел настройки, заменяющий страницу темы v4’s, с новыми подробностями о Sass, опциями глобальной конфигурации, цветовыми схемами, переменными CSS и многим другим.
Реорганизована вся документация по формам в новый раздел форм, разделив содержание на более сфокусированные страницы.
Аналогичным образом обновлен раздел макетов, чтобы более четко обозначить содержимое сетки.
Страница компонента “Навигация” переименована в “Навигация и вкладки”.
Страница “Чекбоксы” переименована в “Чекбоксы и радио”.
Переработана навигационная панель и добавлена новая поднавигация, чтобы упростить просмотр наших сайтов и версий документации.
Добавлено новое сочетание клавиш для поля поиска: Ctrl + /.

Sass

Мы отказались от слияния карт Sass по умолчанию, чтобы упростить удаление избыточных значений. Имейте в виду, что теперь вам нужно определить все значения в картах Sass, например $theme-colors. Узнайте, как работать с картами Sass.
Breaking Переименована функция color-yiq() и связанные переменные переименованы в color-contrast(), поскольку она больше не связана с цветовым пространством YIQ. Смотрите #30168.
- $yiq-contrasted-threshold переименован в $min-contrast-ratio.
- $yiq-text-dark и $yiq-text-light соответственно переименованы в $color-contrast-dark и $color-contrast-light.
Breaking Параметры миксинов медиа-запросов изменены для более логичного подхода.
- 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).
Breaking Удалены стили печати и переменная $enable-print-styles. Классы отображения печати все еще существуют. Смотрите #28339.
Breaking Отказ от функций color(), theme-color() и gray() в пользу переменных. Смотрите #29083.
Breaking Функция theme-color-level() переименована в color-level() и теперь принимает любой цвет, который вы хотите, вместо только $theme-color цвета. Смотрите #29083 Остерегайтесь: color-level() позже был удален в v5.0.0-alpha3.
Breaking Переименованы $enable-prefers-reduced-motion-media-query и $enable-pointer-cursor-for-buttons в $enable-reduced-motion и $enable-button-pointers для краткости.
Breaking Удален миксин bg-gradient-variant(). Используйте класс .bg-gradient для добавления градиентов к элементам вместо сгенерированных классов .bg-gradient-*.
Breaking Удалены ранее устаревшие миксины:
- 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()
Breaking Функция 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). Это выравнивает промежутки нашей сеточной системы с нашими утилитами интервала.
- Добавлен новый класс gutter (.g-*, .gx-* и .gy-*) для управления горизонтальным / вертикальные промежутки, горизонтальные промежутки и вертикальные промежутки.
- Breaking .no-gutters переименован в .g-0, чтобы соответствовать новым утилитам промежутков.
К столбцам больше не применяется position: relative, поэтому вам, возможно, придется добавить .position-relative к некоторым элементам, чтобы восстановить это поведение.
Breaking Удалили несколько классов .order-*, которые часто не использовались. Теперь из коробки мы предоставляем только от .order-1 до .order-5.
Breaking Отказ от компонента .media, так как его можно легко воспроизвести с помощью утилит. Смотрите #28265 и страница гибких утилит для примера.
Breaking bootstrap-grid.css теперь применяет к столбцу только box-sizing: border-box вместо сброса глобального размера поля. Таким образом, наши стили сетки можно использовать в большем количестве мест без помех.
$enable-grid-classes больше не отключает создание контейнерных классов. Смотрите #29146.
Обновлен миксин make-col по умолчанию для равных столбцов без указанного размера.

Контент, перезагрузка и т. д.

RFS теперь включен по умолчанию. Заголовки, использующие миксин font-size(), автоматически изменят свой font-size масштабировать вместе с окном просмотра. Эта функция ранее была включена в v4.
Breaking Переработана типография дисплея, заменив переменные $display-* на карту Sass $display-font-sizes. Также удалены отдельные переменные $display-*-weight для одного $display-font-weight и скорректированы font-sizes.
Добавлены два новых размера заголовков .display-*, .display-5 и .display-6.
Ссылки по умолчанию подчеркнуты (не только при наведении курсора), если они не являются частью определенных компонентов.
Переработанные таблицы, чтобы обновить их стили и перестроить их с помощью переменных CSS для большего контроля над стилями.
Breaking Вложенные таблицы больше не наследуют стили.
Breaking .thead-light и .thead-dark удаляются в пользу классов-вариантов .table-*, которые могут использоваться для всех элементов таблицы (thead, tbody, tfoot, tr, th и td).
Breaking Примесь table-row-variant() переименована в table-variant() и принимает только 2 параметра: $color (название цвета) и $value (цветовой код). Цвет границы и цвета акцента вычисляются автоматически на основе переменных фактора таблицы.
Разделены переменные заполнения ячеек таблицы на -y и -x.
Breaking Удален класс .pre-scrollable. Смотрите #29135
Breaking Утилиты .text-* больше не добавляют к ссылкам состояния наведения и фокуса. Вместо этого можно использовать вспомогательные классы .link-*. Смотрите #29267
Breaking Удален класс .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.

Формы

Добавлены новые плавающие формы! Мы продвинули пример с плавающими метками до полностью поддерживаемых компонентов формы. Смотрите новую страницу «Плавающие метки».
Breaking Объединенные собственные и настраиваемые элементы формы. Флажки, радио, выборки и другие входные данные, которые имели собственные и настраиваемые классы в версии 4, были объединены. Теперь почти все наши элементы формы полностью настраиваемые, для большинства из них не требуется настраиваемый 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.
Breaking Удалены .input-group-append и .input-group-prepend. Теперь вы можете просто добавить кнопки и .input-group-text в качестве прямых потомков групп ввода.
Давний Отсутствующий радиус границы в группе ввода с ошибкой обратной связи с проверкой, наконец, исправлен путем добавления дополнительного класса .has-validation во входные группы с проверкой.
Breaking Исключены классы макета, специфичные для формы, для нашей системы сеток. Используйте нашу сетку и утилиты вместо .form-group, .form-row или .form-inline.
Breaking Метки форм теперь требуют .form-label.
Breaking .form-text больше не устанавливает display, позволяя вам создавать встроенный или блокировать текст справки по вашему желанию, просто изменяя элемент HTML.
Иконки валидации больше не применяются к элементам <select> с параметром multiple.
Переставлены исходные файлы Sass в scss/forms/, включая стили группы ввода.

Компоненты

Унифицированные значения padding для предупреждений, хлебных крошек, карточек, раскрывающихся списков, групп списков, модальных окон, всплывающих окон и всплывающих подсказок должны основываться на нашей переменной $spacer. Смотрите #30564.

Аккордеон

Добавлен [новый компонент аккордеона](/docs/5.0/components/accordion/!

Оповещения

В оповещениях теперь есть примеры с иконками.
Удалены пользовательские стили для <hr> в каждом оповещении, поскольку они уже используют currentColor.

Значки

Breaking Удалены все классы цвета .badge-* для фоновых утилит (например, используйте .bg-primary вместо .badge-primary).
Breaking Удалено .badge-pillиспользуйте вместо нее утилиту .rounded-pill.
Breaking Удалены стили наведения и фокуса для элементов <a> и <button>.
Увеличено заполнение по умолчанию для значков с .25em/.5em до .35em/.65em.

Хлебные крошки

Упрощен внешний вид хлебных крошек по умолчанию, удалив padding, background-color и border-radius.
Добавлено новое настраиваемое свойство CSS --bs-breadcrumb-divider для легкой настройки без перекомпиляции CSS.

Кнопки

Breaking Кнопки переключения, с флажками или радио, больше не требуют JavaScript и имеют новую разметку. Нам больше не нужен элемент-оболочка, добавьте .btn-check в <input>, и соедините его с любыми классами .btn в <label>. Смотрите #30650. Документация по этому поводу перемещена со страницы «Кнопки» в новый раздел «Формы».
Breaking Удален .btn-block для утилит. Вместо используйте .btn-block в .btn, оберните ваши кнопки с .d-grid и .gap-* утилитами для размещения их по мере необходимости. Переключитесь на отзывчивые классы, чтобы получить еще больший контроль над ними. Прочтите документацию для некоторых примеров.
Обновлены миксины button-variant() и button-outline-variant() для поддержки дополнительных параметров.
Обновлены кнопки для увеличения контраста при наведении и активном состоянии.
Отключенные кнопки теперь имеют pointer-events: none;.

Карточка

Breaking Отказались от .card-deck в пользу нашей сетки. Оберните ваши карты в классы колонок и добавьте родительский контейнер .row-cols-*, чтобы воссоздать колоды карт (но с большим контролем над выравниванием).
Breaking Отказались от .card-columns в пользу Masonry. Смотрите #28922.
Breaking Заменен аккордеон на основе .card на новый компонент Accordion.

Карусель

Добавлен новый вариант .carousel-dark для темного текста, элементов управления и индикаторов (отлично подходит для более светлого фона).
Шевронные иконки для элементов управления каруселью заменены новыми SVG из Bootstrap Icons.

Кнопка закрытия

Breaking .close переименован в .btn-close для менее общего названия.
Кнопки закрытия теперь используют background-image (встроенный SVG) вместо × в HTML, что позволяет упростить настройку без необходимости касаться вашей разметки.
Добавлен новый вариант .btn-close-white, который использует filter: invert(1) для включения более контрастных иконок удаления на более темном фоне.

Сворачиваемое

Убрана привязка скролла для аккордеонов.

Выпадающие списки

Добавлен новый вариант .dropdown-menu-dark и связанные переменные для темных выпадающих списков по запросу.
Добавлена новая переменная для $dropdown-padding-x.
Затемнен разделитель раскрывающегося списка для улучшения контраста.
Breaking Все события для раскрывающегося списка теперь запускаются на кнопке-переключателе раскрывающегося списка, а затем всплывают до родительского элемента.
Выпадающие меню теперь имеют атрибут data-bs-popper="static", установленный, когда положение раскрывающегося списка является статическим, и data-bs-popper="none", когда раскрывающийся список находится на панели навигации. Это добавлено нашим JavaScript и помогает нам использовать настраиваемые стили положения, не мешая позиционированию Popper.
Breaking Исключена опция flip для плагина раскрывающегося списка в пользу собственной конфигурации Popper. Теперь вы можете отключить поведение переворачивания, передав пустой массив для параметра fallbackPlacements в flip модификатор.
На раскрывающиеся меню теперь можно щелкнуть с помощью новой опции autoClose для обработки поведения автоматического закрытия. Вы можете использовать этот параметр, чтобы принять щелчок внутри или за пределами раскрывающегося меню, чтобы сделать его интерактивным.
Выпадающие списки теперь поддерживают .dropdown-item, заключенные в <li>.

Джамботрон

Breaking Убрали компонент jumbotron, так как его можно повторить с помощью утилит. Смотрите наш новый пример Jumbotron для демонстрации.

Группа списка

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

Навигация и табы

Добавлены новые переменные null для font-size, font-weight, color и :hover color в класс .nav-link.

Панели навигации

Breaking Навбарам теперь требуется контейнер внутри (чтобы значительно упростить требования к интервалам и CSS).

Offcanvas

Добавлен новый компонент offcanvas.

Пагинация

Ссылки на страницы теперь имеют настраиваемое поле margin-left, которое динамически округляется по всем углам, когда они отделены друг от друга.
Добавлен переход transition по ссылкам для пагинации.

Поповеры

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

Спиннеры

Спиннеры теперь учитывают prefers-reduced-motion: reduce, замедляя анимацию. Смотрите #31882.
Улучшено вертикальное выравнивание спиннера.

Тосты

Теперь тосты можно позиционировать в .toast-container с помощью утилит позиционирования.
Изменена длительность тоста по умолчанию на 5 секунд.
Удалено overflow: hidden из тостов и заменено правильным border-radius с функциями calc().

Тултипы

Breaking В нашем шаблоне всплывающей подсказки по умолчанию .arrow переименован в .tooltip-arrow.
Breaking Значение по умолчанию для fallbackPlacements изменено на ['top', 'right', 'bottom', 'left'] для лучшего размещения элементов.
Breaking Параметр whiteList переименован в allowList.

Утилиты

Breaking Переименовано несколько утилит для использования логических имен свойств вместо прямых имен с добавлением поддержки 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.
Breaking По умолчанию отрицательные поля отключены.
Добавлен новый класс .bg-body для быстрой установки фона <body> для дополнительных элементов.
Добавлены новые утилиты позиционирования для top, right, bottom и left. Значения для каждого свойства включают 0, 50% и 100%.
Добавлены новые утилиты .translate-middle-x и .translate-middle-y для горизонтального или вертикального центрирования абсолютных / фиксированных элементов.
Добавлены новые утилиты border-width.
Breaking .text-monospace переименован в .font-monospace.
Breaking Удален .text-hide, так как это устаревший метод скрытия текста, который больше не следует использовать.
Добавлены утилиты .fs-* для утилит font-size (с включенным RFS). Они используют тот же масштаб, что и заголовки HTML по умолчанию (1-6, от большого к маленькому), и могут быть изменены с помощью карты Sass.
Breaking Утилиты .font-weight-* переименованы в .fw-* для краткости и единообразия.
Breaking Утилиты .font-style-* переименованы в .fst-* для краткости и единообразия.
Добавлен .d-grid для отображения утилит и новые утилиты gap (.gap) для макетов CSS Grid и flexbox.
Breaking Удалены .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.

Помощники

Breaking Адаптивные помощники по внедрению были переименованы в ratio helpers с новыми именами классов и улучшенным поведением, а также полезной переменной CSS.
- Классы были переименованы, чтобы изменить соотношение сторон by на x. Например, .ratio-16by9 теперь .ratio-16x9.
- Мы отказались от селектора .embed-responsive-item и группы элементов в пользу более простого селектора .ratio > *. Класс больше не нужен, и помощник по соотношению теперь работает с любым элементом HTML.
- Карта Sass $embed-responsive-aspect-ratios была переименована в $aspect-ratios, а ее значения были упрощены и теперь включают имя класса и процентное соотношение в качестве пары key: value.
- Переменные CSS теперь генерируются и включаются для каждого значения в карте Sass. Измените переменную --bs-aspect-ratio в .ratio, чтобы создать любое настраиваемое соотношение сторон.
Breaking Классы программ чтения с экрана теперь классы “визуально скрытые”.
- Изменен файл 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() в visually-hidden() и visually-hidden-focusable().
bootstrap-utilities.css теперь также включает наших помощников. Помощников больше не нужно импортировать в пользовательские сборки.

JavaScript

Отказ от зависимости jQuery и переписаны плагины на обычный JavaScript.
Breaking Атрибуты данных для всех плагинов 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().