Переход на v5

Отслеживайте и просматривайте изменения в исходных файлах, документации и компонентах Bootstrap, чтобы помочь вам перейти с версии 4 на версию 5.

На этой странице

Зависимости

Сбросил jQuery.
Обновлен с Popper v1.x до Popper v2.x.
Libsass заменен на Dart Sass, так как наш компилятор Sass, учитывая, что Libsass устарел.
Перенесено с Jekyll на Hugo для создания нашей документации.

Поддержка браузера

Удалены Internet Explorer 10 и 11
Удален Microsoft Edge < 16 (устаревший Edge)
Упал Firefox < 60
Выпал Сафари < 12
Удален iOS Safari < 12
Упал хром < 60

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

Переработана домашняя страница, макет документов и нижний колонтитул.
Добавлен новый путеводитель по посылкам .
Добавлен новый раздел Customize , заменяющий страницу Theming v4 , с новыми подробностями о Sass, глобальными параметрами конфигурации, цветовыми схемами, переменными CSS и многим другим.
Всю документацию по формам реорганизовали в новый раздел «Формы» , разбив содержимое на более целенаправленные страницы.
Точно так же обновлен раздел «Макет» , чтобы более четко отображать содержимое сетки.
Страница компонента «Navs» переименована в «Navs & Tabs».
Страница «Проверки» переименована в «Проверки и радио».
Переработана панель навигации и добавлена новая вложенная навигация, чтобы упростить навигацию по нашим сайтам и версиям документов.
Добавлено новое сочетание клавиш для поля поиска: 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и выше. Никаких изменений для всех других точек останова.
Улучшенные водостоки. Желоба теперь задаются в бэрах и уже, чем в версии 4 ( 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миксин по умолчанию для равных столбцов без указанного размера.

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

Теперь RFS включен по умолчанию. Заголовки, использующиеfont-size()миксин, будут автоматически корректировать ихfont-sizeмасштаб в соответствии с областью просмотра. Ранее эта функция была включена в v4.
ЛоматьМы переработали типографику отображения, заменив $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атрибута. Это также позволяет использовать утилиты заполнения для создания более толстых разделителей (например, <hr class="py-1">).
Сбросить значение по умолчанию по горизонтали padding-leftи <ul>элементам <ol>с браузера по умолчанию 40pxна 2rem.
Добавлено $enable-smooth-scroll, которое применяется scroll-behavior: smoothво всем мире, за исключением пользователей, запрашивающих уменьшение движения с помощью prefers-reduced-motionмедиазапроса. См. № 31877

справа налево

Переменные, утилиты и миксины, специфичные для горизонтального направления, были переименованы, чтобы использовать логические свойства, подобные тем, которые можно найти в макетах flexbox — например, вместо startи .endleftright

Формы

Добавлены новые плавающие формы! Мы повысили уровень плавающих меток до полностью поддерживаемых компонентов формы. См. новую страницу «Плавающие метки».
Ломать Объединение собственных и настраиваемых элементов формы. Флажки, радио, выбор и другие входные данные, которые имели собственные и пользовательские классы в версии 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.
ЛоматьСбросил .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()миксины для поддержки дополнительных параметров.
Обновлены кнопки, чтобы обеспечить повышенную контрастность при наведении и активном состоянии.
Отключенные кнопки теперь имеют pointer-events: none;.

Открытка

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

Карусель

Добавлен новый .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опции в модификаторе flip .
Выпадающие меню теперь можно щелкнуть с помощью новой 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 .
Улучшено вертикальное выравнивание спиннера.

Тосты

Тосты теперь можно позиционировать с .toast-containerпомощью утилит позиционирования .
Изменена продолжительность всплывающего уведомления по умолчанию на 5 секунд.
Убрано overflow: hiddenиз тостов и заменено правильными border-radiusс 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 > *селектора. Класс больше не нужен, и помощник 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()миксины в 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может быть передана как функция, которая принимает конфигурацию Bootstrap по умолчанию Popper в качестве аргумента, чтобы вы могли объединить эту конфигурацию по умолчанию по-своему. Применяется к раскрывающимся спискам, всплывающим окнам и всплывающим подсказкам.
Значение по умолчанию fallbackPlacementsизменено на ['top', 'right', 'bottom', 'left']для лучшего размещения элементов Popper. Применяется к раскрывающимся спискам, всплывающим окнам и всплывающим подсказкам.
Удалено подчеркивание из общедоступных статических методов, таких как _getInstance()→ getInstance().