Перейти к основному содержанию Перейти к навигации по документам
Cмотреть на GitHub

Переход на v5

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

v5.0.0-alpha2

Sass

  • Added default parameters to each border-radius mixin. See #31571.
  • Updated the next breakpoint when targeting only the xs breakpoint. See #31500.
  • box-shadow mixins now allow null values and drop none from multiple arguments. See #30394.

Документация

  • Renamed “Screen readers” helper page to “Visually hidden”, and filename to visually-hidden
  • Renamed “Checks” page to “Checks & radios”, and filename to checks-radios
  • Improved documentation of check/radio powered button groups
  • Improved skip links in our docs.
  • Redesigned docs navigation for larger tap targets on mobile and a streamlined subnav.
  • #31114: Improved form documentation with regards to accessibility.

Разметка

  • Container horizontal padding updated to match the gutter size of .rows.
  • #31439: Removed flex: 1 0 100% from rows due to regressions in grid behavior.

Reboot

  • Updated th styling to use a default null value for font-weight and inherit text-align instead of setting explicitly.

Цвета

  • Bumped color contrast ratio from 3:1 to 4.5:1.
  • Set $black as color contrast color instead of $gray-900.
  • Improved $green (and its theme alias $success) color to reach a new minimum color contrast (moving from #28a745 to #198754).
  • Improved $cyan (and its theme alias $info) color to be more vibrant (moving from #17a2b8 to #0dcaf0).

Формы

  • #31383: Resized checks and radios to be 1em instead of 1.25em in an effort to make them scale better with custom $font-size-base values and more.

Компоненты

Значки

  • #31132: Increased default padding for badges from .25em/.5em to .35em/.65em.

Кнопки

  • #30639: Disabled states of buttons are easier to customize thanks to additional arguments in the button-variant() mixin.
  • #30989: Updated buttons to ensure increased contrast on hover and active states.
  • Replaced chevron icons for carousel controls with new SVGs from Bootstrap Icons.
  • Added new .carousel-dark variant for dark text, controls, and indicators (great for lighter backgrounds).

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

  • Renamed .close to .btn-close for a less generic name.
  • Close buttons now use a background-image (embedded SVG) instead of a × in the HTML, allowing for easier customization without the need to touch your markup.
  • Added new variables to better control the customization.
  • Added new .btn-close-white variant that uses backdrop-filter: invert(1) to enable higher contrast dismiss icons against darker backgrounds.

Collapse

  • #31346: Removed scroll anchoring for accordions.
  • Added new .dropdown-menu-dark variant and associated variables for on-demand dark dropdowns.
  • Added new variable for $dropdown-padding-x.
  • Darkened the dropdown divider for improved contrast.
  • #31035: Added new null variables for font-size, font-weight, color, and :hover color to the .nav-link class.

Нумерация страниц

  • Added transitions to pagination links. See #31396.

Информеры

  • Renamed whiteList option to allowList.

Всплывающие сообщения

  • #31109: Made default toast duration 5 seconds.
  • #31155: Clear timeout before showing toasts.
  • #31381: Removed overflow: hidden from toasts and replaced with proper border-radiuss with calc() functions.
  • Updated docs to include additional examples for how to customize and theme toasts.

Подсказки

  • Renamed whiteList option to allowList.

Помощники

  • Responsive embed helpers have been renamed to ratio helpers with new class names and improved behaviors, as well as a helpful CSS variable.
    • Classes have been renamed to change by to x in the aspect ratio. For example, .ratio-16by9 is now .ratio-16x9.
    • We’ve dropped the .embed-responsive-item and element group selector in favor of a simpler .ratio > * selector. No more class is needed, and the ratio helper now works with any HTML element.
    • The $embed-responsive-aspect-ratios Sass map has been renamed to $aspect-ratios and its values have been simplified to include the class name and the percentage as the key: value pair.
    • CSS variables are now generated and included for each value in the Sass map. Modify the --aspect-ratio variable on the .ratio to create any custom aspect ratio.
  • “Screen reader” classes are now “visually hidden” classes.
    • Changed the Sass file from scss/helpers/_screenreaders.scss to scss/helpers/_visually-hidden.scss
    • Renamed .sr-only and .sr-only-focusable to .visually-hidden and .visually-hidden-focusable
    • Renamed sr-only() and sr-only-focusable() mixins to visually-hidden() and visually-hidden-focusable().

Утилиты

  • #31280: Added new position utilities for top, right, bottom, and left. Values include 0, 50%, and 100% for each property.
    • We also added new translate utilities to accompany those position utilities for centering elements when they’re being positioned.
    • Some great examples have been added to the docs to show these off.
  • #31484: Added new border-width utility.
  • #31473: The .d-none utility was moved in our CSS to give it more weight over other display utilities.

v5.0.0-alpha1

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

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

  • Прекращена поддержка Internet Explorer 10 и 11
  • Прекращена поддержка Firefox NN - MM
  • Прекращена поддержка Safari NN
  • Прекращена поддержка iOS Safari NN
  • Прекращена поддержка Chrome NN
  • Прекращена поддержка Android NN

Sass

Изменения в наших исходных файлах Sass и скомпилированном CSS.

  • Удалены миксины hover, hover-focus, plain-hover-focus и hover-focus-active. Для этого используйте обычный синтаксис CSS. См. #28267.
  • Удалить ранее устаревшие миксины
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide() (также удалён связанный служебный класс, .text-hide)
    • visibility()
    • form-control-focus()
  • Todo: Новые переменные?
  • Todo: Переупорядочены исходные файлы форм (под scss/forms/)
  • Todo: Переупорядочены исходные файлы сетки (под scss/grid/)
  • Удалены стили печати и переменная $enable-print-styles. Однако классы отображения печати остались нетронутыми. См. #28339.
  • Отброшены функции color(), theme-color() & gray() в пользу переменных. См. #29083
  • Функция theme-color-level() переименована в color-level() и теперь принимает любой цвет, который вы хотите, вместо только цветов $theme-color. См. #29083
  • $enable-grid-classes больше не отключает создание контейнерных классов См. #29146
  • Переименован $enable-prefers-reduced-motion-media-query и $enable-pointer-cursor-for-buttons в $enable-reduced-motion и $enable-button-pointers для краткости.
  • Высота строк снижена из нескольких компонентов, чтобы упростить нашу кодовую базу. Кнопки button-size() и pagination-size() больше не принимают параметры высоты строки. См. #29271
  • Миксин button-variant() теперь принимает 3 дополнительных параметра цвета для каждого состояния кнопки, чтобы переопределить цвет, предоставляемый color-contrast(). По умолчанию эти параметры определяют, какой цвет обеспечивает больший контраст по сравнению с цветом фона состояния кнопки с помощью color-contrast().
  • Миксин button-outline-variant() теперь принимает дополнительный аргумент $active-color для установки цвета текста активного состояния кнопки. По умолчанию этот параметр определяет, какой цвет обеспечивает больший контраст по сравнению с активным цветом фона кнопки с помощью color-contrast().
  • Избавьтесь от слияния карт 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.
  • Линейные градиенты упрощаются, когда градиенты включены, и поэтому gradient-bg() теперь принимает только необязательный параметр $color.
  • Миксин bg-gradient-variant() удален, поскольку класс .bg-gradient теперь можно использовать для добавления градиентов к элементам вместо классов .bg-gradient-*.
  • 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.

JavaScript

Изменения в наших исходных и скомпилированных файлах JavaScript.

  • jQuery больше не поддерживается и переписаны плагины на обычном JavaScript.
  • Удалено подчеркивание из общедоступных статических методов, таких как _getInstance() > getInstance().

Система цветов

Мы обновили цветовую систему используемую в Bootstrap для улучшения цветовой контрастности и предоставления гораздо более обширного набора цветов.

  • Обновлены синий и розовый базовые цвета (-500) для обеспечения контраста AA.
  • Добавлены новые оттенки и оттенки для каждого цвета, предоставляя девять отдельных цветов для каждого основного цвета в качестве новых переменных Sass.
  • Для поддержки нашей цветовой системы мы добавили новые пользовательские функции tint-color() и shade-color() для правильного смешивания цветов.

Система сеток

Изменены инструменты компоновки и система сеток.

  • Отброшен компонент .media, так как он может быть построен с помощью служебных классов. См. #28265.
  • Удалён position: relative относительно столбцов сетки.
  • Горизонтальное заполнение добавляется к прямым дочерним элементам в строке вместо самих столбцов.
    • Это упрощает нашу кодовую базу.
    • Классы столбцов теперь можно использовать отдельно. Когда они используются за пределами .row, горизонтальные отступы добавляться не будут.
  • Классы отзывчивых желобов можно использовать для управления шириной желоба в горизонтальном, вертикальном или обоих направлениях.
  • Ширина отступа теперь установлена в rem и уменьшена с 30px до 1.5rem (24px).
  • bootstrap-grid.css теперь применяет к столбцу только box-sizing: border-box вместо сброса глобального размера поля. Таким образом можно использовать систему сеток, даже если box-sizing: border-box не применяется к каждому элементу.

Содержание, Reboot, и т.д.

Изменения в Reboot, типографике, таблицах и многом другом.

  • RFS включен для автоматического изменения размера шрифта. См. #29152
  • Сброшен по умолчанию горизонтальный отступ слева padding-left для элементов <ul> и <ol> по умолчанию в браузере с 40px на 2rem.
  • Упрощенные стили таблицы (без лишних верхних границ) и усиленное заполнение ячеек.
  • Вложенные таблицы больше не наследуют стили.
  • .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. См. #229793

Типографика

  • Переименованы переменные $display-* для новой карты Sass $display-font-sizes.
  • Удалены отдельные переменные $display-*-weight для одного $display-font-weight.
  • Добавлены два новых стиля заголовков .display-* - .display-5 и .display-6.
  • Изменены размеры существующих отображаемых заголовков для более согласованного набора размеров шрифта - font-size.

Формы

  • Переставлена документация формы в отдельный раздел верхнего уровня.
    • Старая страница форм разделена на несколько подстраниц
    • Документы групп ввода перемещены в новый раздел форм
  • Изменены исходные файлы Sass в scss/forms/, включая перемещение стилей групп ввода.
  • Объединены собственные и настраиваемые Чекбоксы / «радио» кнопкив один класс .form-check.
    • Новые проверки теперь поддерживают изменение размера с помощью классов em/font-size или явных модификаторов.
    • Новые проверки теперь по умолчанию увеличены в размере для повышения удобства использования.
    • Удалены .custom-control и связанные с ним классы.
    • Переименовано большинство переменных $custom-control в $form-control ones.
  • Скомбинирован наитивный и пользовательский выбор в .form-select.
    • Отброшены .custom-select и связанные с ним классы.
    • Большинство переменных $custom-select переименовано в $form-select.
  • Обновлен компонент ввода файлов с тем же общим дизайном, но улучшенным HTML.
    • Реорганизована разметка .form-file для устранения некоторых визуальных ошибок, при этом разрешается перевод и изменение текста кнопок с помощью HTML вместо CSS.
    • Полностью исключены собственные компоненты .form-control-file и .form-control-range.
    • Переименован .custom-file в .form-file (включая переменные).
    • Добавлена поддержка стилей :focus и :disabled.
  • Переименован .custom-range в .form-range (включая переменные).
  • Исключен .form-group для утилит отступов (мы заменили наши примеры документации на .mb-3).
  • Исключен .form-row для настройки более гибких flex отступов.
  • Исключен .form-inline для настройки более гибких flex сетки.
  • Прекращена поддержка .form-control-plaintext внутри .input-groups.
  • Исключены .input-group-append и .input-group-prepend. Теперь вы можете просто добавить кнопки и .input-group-text в качестве прямых потомков групп ввода.
  • Для меток форм теперь требуется класс .form-label. Sass gеременные теперь доступны для стилизации меток форм в соответствии с вашими потребностями. См. #30476

Компоненты

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

«Отключенние» кнопки

  • Отключенные состояния кнопок, кнопки закрытия, ссылки на страницы и диапазона формы теперь имеют добавленное событие pointer-events: none. Это упрощает нашу кодовую базу и упрощает переопределение активных состояний в CSS. #29296.

Уведомления

  • Todo: Убрано автоматическое затемнение элементов <hr> в вариантах класса .alert-*. <hr>s используют rgba() для своего цвета, так что они все равно должны естественным образом смешиваться.

Значки

Значки были переработаны для большего их отличия от кнопок и лучшего использования служебных классов.

  • Todo: Удалены и заменены классы модификаторов .badge на вспомогательные классы фона (например, используйте .bg-primary вместо .badge-primary)
  • Todo: Удален .badge-pill для служебного класса .rounded-pill
  • Todo: Удалены стили наведения и фокуса значка для a.badge и button.badge.

Кнопки

  • Чекбоксы / «радио» кнопки удален из плагина кнопки в пользу решения только на CSS, которое задокументировано в документации проверки формы. Класс .btn-check может быть добавлен к входам, любая метка с .btn и классом модификатора может использоваться для оформления меток. См. #30650.

Карточки

  • Удалены столбцы карт в пользу сетки Masonry. См. #28922.
  • Удалены группы карточек в пользу сетки, которая добавляет больше гибкости по сравнению с отзывчивым поведением.

Jumbotron

  • Компонент jumbotron удален в пользу служебных классов, таких как .bg-light для цвета фона и классов .p-* для управления заполнением.
  • Все панели навигации теперь требуют внутри наличия контейнера. Это значительно упрощает требования к интервалу и устраняет необходимость в обширных переопределениях CSS, которые мы добавили для адаптивных контейнеров в версии 4.

Нумерация страниц

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

Информеры

  • Переименован .arrow в .popover-arrow

Всплывающие подсказки

  • Переименован .arrow в .tooltip-arrow

Доступность

  • .sr-only-focusable больше не требует .sr-only. См. #28720.

Утилиты

  • Переименован .text-monospace в .font-monospace
  • Уменьшено количество реагирующих утилит в точке останова. Высший порядк теперь с номером .order-5 вместо .order-12. См. #28874.
  • Новые утилиты высоты строки line-height: .lh-1, .lh-sm, .lh-base и .lh-lg. См. здесь.
  • Добавлен .bg-body для быстрой установки фона <body> на дополнительные элементы.
  • Todo: Сброшен .text-hide, так как использован устаревший метод скрытия текста, который больше не следует использовать.
  • Todo: Разделены служебные программы на служебные классы и помощники по значениям свойств
  • Утилиты с отрицательными отступами по умолчанию отключены. Вы можете снова включить их, установив $enable-negative-margins: true, но имейте в виду, что это может значительно увеличить размер файла.

Документация

  • Удалена страница “Стена ошибок браузера”, т.к. она устарела.

Инструменты сборки