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

Переход на v5

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

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

v5.3.0

Если вы переходите с наших предыдущих альфа-версий версии 5.3.0, ознакомьтесь с их изменениями в дополнение к этому разделу.

Помощники

  • Цветные ссылки снова имеют !important, поэтому они лучше работают с нашими недавно добавленными утилитами ссылок.

Утилиты

v5.3.0-alpha2

Если вы переходите с нашего предыдущего альфа-выпуска версии 5.3.0, ознакомьтесь с изменениями, перечисленными ниже.

CSS переменные

  • Удалено несколько повторяющихся и неиспользуемых корневых переменных CSS.

Цветовые режимы

  • Цвета темного режима теперь получаются из цветов нашей темы (например, $primary) в Sass, а не из цветовых оттенков или оттенков (например, $blue-300). Это позволяет использовать более автоматизированный темный режим при настройке цветов темы по умолчанию.

  • Добавлены карты Sass для создания цветов темы для текста в темном режиме, тонкого фона и тонкой границы.

  • Примеры снипетов теперь готовы для темного режима с обновленной разметкой и уменьшенными пользовательскими стилями.

  • Добавлена color-scheme: dark в CSS темного режима для изменения элементов управления уровня ОС, таких как полосы прокрутки.

  • Состояния проверки формы border-color и текста color теперь реагируют на темный режим благодаря новым переменным Sass и CSS.

  • Отброшены недавно добавленные переменные CSS фона управления формой и переназначены переменные Sass для использования вместо них переменных CSS. Это упрощает стилизацию в цветовых режимах и позволяет избежать проблемы, из-за которой элементы управления формы в темном режиме не обновляются должным образом.

  • Наши box-shadow снова всегда будут оставаться темными, а не инвертироваться в белый цвет в темном режиме.

  • Улучшен HTML и JavaScript для нашего сценария переключения цветового режима. Улучшен селектор для изменения активного SVG, а разметка стала более доступной благодаря атрибутам ARIA.

  • Улучшены цвета синтаксиса кода документов и многое другое в светлом и темном режимах.

Типография

  • Мы больше не устанавливаем цвет для $headings-color-dark или --bs-heading-color для темного режима. Чтобы избежать некоторых проблем, связанных с тем, что заголовки внутри компонентов отображаются неправильным цветом, мы установили для переменной Sass значение null и добавили проверку null, как мы используем в светлом режиме по умолчанию.

Компоненты

  • Карточки теперь имеют color, установленный на них, чтобы улучшить рендеринг в цветовых режимах.

  • Добавлен новый вариант .nav-underline для нашей навигации с более простой нижней границей под активной навигационной ссылкой. Смотрите пример в документации.

  • Навигация теперь имеет новые стили :focus-visible, которые лучше соответствуют нашим пользовательским стилям фокуса кнопок.

Помощники

  • Добавлен новый помощник .icon-link для быстрого размещения и выравнивания значков Bootstrap рядом с текстовой ссылкой. Ссылки на значки также поддерживают наши новые утилиты ссылок.

  • Добавлен новый помощник кольца фокусировки для удаления контура по умолчанию outline и установки пользовательского кольца фокусировки box-shadow.

Утилиты

  • Переименованные переменные Sass и CSS ${color}-text в ${color}-text-emphasis, чтобы соответствовать связанным с ними утилитам.

  • Добавлен новый помощник .link-body-emphasis вместе с нашими цветными ссылками. Это создает цветную ссылку, используя наш цветовой режим, реагирующий на цвет акцента.

  • Добавлены новые утилиты ссылок для непрозрачности цвета ссылки, смещения подчеркивания, цвета подчеркивания и непрозрачности подчеркивания. Изучите новые утилиты ссылок.

  • Утилиты border-width, основанные на CSS переменных, были возвращены для прямой установки своего свойства (как это было сделано до версии 5.2.0). Это позволяет избежать проблем наследования между вложенными элементами, включая таблицы.

  • Добавлена новая утилита .border-black, чтобы соответствовать нашим утилитам .text-black и .bg-black.

  • Устарело Устарела утилита .text-muted и Sass переменная $text-muted. Он был заменен на .text-body-secondary и $body-secondary-color.

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

  • Примеры теперь отображаются с соответствующим светлым или темным цветовым режимом в соответствии с настройкой в нашей документации. Каждый пример имеет индивидуальный выбор цветового режима.

  • Улучшен встроенный JavaScript для демо-версии Toast.

  • В начало страницы примеров добавлено содержимое репозитория twbs/examples.

Инструменты

  • Добавлено тестирование SCSS через True, чтобы помочь протестировать API наших утилит и другие настройки.

  • Экземпляры нашего проекта bootstrap-npm-starter заменены более новыми и полными репозиторий twbs/examples.

Полный список изменений смотрите в проекте v5.3.0-alpha2 на GitHub.

v5.3.0-alpha1

Цветовые режимы!

Узнайте больше, прочитав новую документацию по цветовым режимам.

  • Глобальная поддержка светлых (по умолчанию) и темных цветовых режимов. Установите цветовой режим глобально для элемента :root, для групп элементов и компонентов с помощью класса-оболочки или непосредственно для компонентов с помощью data-bs-theme="light|dark". Также включен новый миксин color-mode(), который может выводить набор правил с селектором data-bs-theme или медиа-запросом, в зависимости от ваших предпочтений.

    Устарело Цветовые режимы заменяют темные варианты компонентов, поэтому .btn-close-white, .carousel-dark, .dropdown-menu-dark и .navbar-dark устарели.

  • Новая расширенная цветовая система. Мы добавили новые цвета темы (но не в $theme-colors) для более детализированной общесистемной цветовой палитры с новыми вторичными, третичными и акцентными цветами для color и background-color. Эти новые цвета доступны в виде переменных Sass, переменных CSS и утилит.

  • Мы также расширили переменные цвета нашей темы Sass, переменные CSS и утилиты, чтобы включить выделение текста, тонкие цвета фона и тонкие цвета границ. Они доступны в виде переменных Sass, переменных CSS и утилит.

  • Добавляет новую таблицу стилей _variables-dark.scss для размещения специальных переопределений темного режима. Эта таблица стилей должна быть импортирована сразу после существующего файла _variables.scss в вашем стеке импорта.

    diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index 8f8296def..449d70487 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -6,6 +6,7 @@
 // Configuration
 @import "functions";
 @import "variables";
+@import "variables-dark";
 @import "maps";
 @import "mixins";
 @import "utilities";

CSS переменные

  • Восстанавливает переменные CSS для контрольных точек, хотя мы не используем их в наших медиа-запросах, поскольку они не поддерживаются. Однако они могут быть полезны в контекстах, специфичных для JS.

  • В соответствии с обновлением цветовых режимов мы добавили новые утилиты для новых CSS-переменных Sass secondary и tertiary цвета текста и фона, а также {color}-bg-subtle, {color}-border-subtle иd {color}-text-emphasis для цветов нашей темы. Эти новые цвета доступны через переменные Sass и CSS (но не наши карты цветов) с явной целью упростить настройку нескольких цветовых режимов, таких как светлый и темный.

  • Добавляет дополнительные переменные для предупреждений, .btn-close и .offcanvas.

  • Переменная --bs-heading-color вернулась с обновлением и поддержкой темного режима. Во-первых, теперь мы проверяем значение null в связанной переменной Sass, $headings-color, прежде чем пытаться вывести переменную CSS, поэтому по умолчанию ее нет в нашем скомпилированном CSS. Во-вторых, мы используем переменную CSS с резервным значением inherit, что позволяет сохранить исходное поведение, но также позволяет переопределять его.

  • Преобразует ссылки для использования переменных CSS для стилизации color, но не text-decoration. Цвета теперь задаются с помощью --bs-link-color-rgb и --bs-link-opacity в качестве цвета rgba(), что позволяет легко настраивать прозрачность. Псевдокласс a:hover теперь переопределяет --bs-link-color-rgb вместо явной установки свойства color.

  • --bs-border-width теперь используется в большем количестве компонентов для большего контроля над глобальным стилем по умолчанию.

  • Добавляет новые корневые переменные CSS для наших box-shadow, включая --bs-box-shadow, --bs-box-shadow-sm, --bs-box-shadow-lg и --bs-box-shadow-inset.

Компоненты

Alert

  • Варианты предупреждений теперь определяются с помощью переменных CSS.

  • Устарело Миксин alert-variant() теперь устарел. Теперь мы используем цикл Sass напрямую для изменения переменных CSS компонента по умолчанию для каждого варианта.

List group

  • Варианты элементов группы списка теперь определяются с помощью переменных CSS.

  • Устарело Миксин list-group-item-variant() больше не рекомендуется. Теперь мы используем цикл Sass напрямую для изменения переменных CSS компонента по умолчанию для каждого варианта.

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

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

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

Прогресс-бары

Разметка для индикаторов выполнения была обновлена в версии 5.3.0. Из-за размещения атрибута role и различных атрибутов aria- во внутреннем элементе .progress-bar, некоторые программы чтения с экрана не отображали индикаторы выполнения с нулевым значением. Теперь, role="progressbar" и соответствующие атрибуты aria-* находятся во внешнем элементе .progress, оставляя .progress-bar исключительно для визуального представления полосы и необязательной метки.

Хотя мы рекомендуем принять новую разметку для улучшения совместимости со всеми программами чтения с экрана, обратите внимание, что устаревшая структура индикатора выполнения будет продолжать работать, как и раньше.

<!-- Previous markup -->
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- New markup -->
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 25%"></div>
</div>

Мы также представили новый класс .progress-stacked для более логического объединения нескольких индикаторов выполнения в один сложенный индикатор выполнения.

<!-- Previous markup -->
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Segment one" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" aria-label="Segment two" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" aria-label="Segment three" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- New markup -->
<div class="progress-stacked">
  <div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
    <div class="progress-bar"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
    <div class="progress-bar bg-success"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <div class="progress-bar bg-info"></div>
  </div>
</div>

Формы

  • .form-control теперь использует переменные CSS для поддержки цветовых режимов. Это включает в себя добавление двух новых корневых переменных CSS для фона управления формой по умолчанию и отключенного фона.

  • Компоненты .form-check и .form-switch теперь создаются с переменными CSS для установки background-image. Использование здесь отличается от других компонентов тем, что различные состояния фокуса, активности и т. д. для каждого компонента не устанавливаются в базовом классе. Вместо этого состояния переопределяют одну переменную (например, --bs-form-switch-bg).

  • Плавающие метки формы теперь имеют background-color для исправления поддержки элементов <textarea>. Были внесены дополнительные изменения, чтобы также поддерживать отключенные состояния и многое другое.

  • Исправлено отображение ввода даты и времени в браузерах на основе WebKit.

Утилиты

  • Устарело .text-muted будет заменен на .text-body-secondary в 6 версии.

    С добавлением расширенных цветов и переменных темы переменные и утилита .text-muted устарели в версии 5.3.0. Его значение по умолчанию также было переназначено новой переменной CSS --bs-secondary-color для лучшей поддержки цветовых режимов. Он будет удален в версии 6.0.0.

  • Добавлены новые утилиты .overflow-x, .overflow-y и несколько утилит .object-fit-*. Свойство object-fit используется для указания того, как следует изменять размер <img> или <video> , чтобы они соответствовали его контейнеру, что дает нам гибкую альтернативу использованию background-image для изменяемого размера заливки/подгонки изображения.

  • Добавлены новые утилиты .fw-medium.

  • Добавлены новые утилиты .z-* для z-index.

  • Утилиты тени коробки (и переменные Sass) были обновлены для темного режима. Теперь они используют --bs-body-color-rgb для генерации значений цвета rgba(), что позволяет им легко адаптироваться к цветовым режимам на основе указанного цвета переднего плана.

Полный список изменений смотрите в проекте версии 5.3.0 на GitHub.

v5.2.0

Обновленный дизайн

В Bootstrap версии 5.2.0 представлено тонкое обновление дизайна для нескольких компонентов и свойств по всему проекту, в первую очередь за счет уточненных значений border-radius на кнопках и элементах управления формы. Наша документация также была обновлена за счет новой домашней страницы, более простого макета документов, который больше не сворачивает разделы боковой панели, и более заметных примеров Иконок Bootstrap.

Дополнительные переменные CSS

Мы обновили все наши компоненты, чтобы использовать переменные CSS. Хотя Sass по-прежнему лежит в основе всего, каждый компонент был обновлен, чтобы включить переменные CSS в базовые классы компонентов (например, .btn), что позволяет более реально временная настройка Bootstrap. В последующих выпусках мы продолжим расширять использование переменных CSS в нашем макете, формах, помощниках и утилитах. Узнайте больше о переменных CSS в каждом компоненте на соответствующих страницах документации.

Наше использование переменных CSS будет несколько неполным до Bootstrap 6. Хотя мы хотели бы полностью реализовать их по всем направлениям, они рискуют вызвать критические изменения. Например, установка $alert-border-width: var(--bs-border-width) в нашем исходном коде нарушает потенциал Sass в вашем собственном коде, если вы делали $alert-border-width * 2 для некоторых причин.

Таким образом, везде, где это возможно, мы продолжим продвигать больше переменных CSS, но, пожалуйста, имейте в виду, что наша реализация может быть немного ограничена в v5.

Новый _maps.scss

Bootstrap v5.2.0 представил новый файл Sass с _maps.scss. Он извлекает несколько карт Sass из _variables.scss, чтобы исправить проблему, из-за которой обновления исходной карты не применялись к вторичным картам, которые расширяют их. Например, обновления для $theme-colors не применялись к другим картам тем, которые основывались на $theme-colors, что нарушало основные рабочие процессы настройки. Короче говоря, у Sass есть ограничение: после того, как переменная или карта по умолчанию были использованы, их нельзя обновить. Есть аналогичный недостаток с переменными CSS, когда они используются для составления других переменных CSS.

Вот почему настройки переменных в Bootstrap должны идти после @import "functions", но перед @import "variables" и остальной частью нашего стека импорта. То же самое относится и к картам Sass — вы должны переопределить значения по умолчанию, прежде чем они будут использоваться. Следующие карты были перемещены в новый _maps.scss:

  • $theme-colors-rgb
  • $utilities-colors
  • $utilities-text
  • $utilities-text-colors
  • $utilities-bg
  • $utilities-bg-colors
  • $negative-spacers
  • $gutters

Ваши пользовательские сборки Bootstrap CSS теперь должны выглядеть примерно так с отдельным импортом карт.

  // Functions come first
  @import "functions";
  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );
  // Variables come next
  @import "variables";
+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

Новые утилиты

  • Расширены font-weight utilities для включения .fw-semibold для полужирных шрифтов.
  • Расширены border-radius utilities, чтобы включить два новых размера, .rounded-4 и .rounded-5, для большего количества опций.

Дополнительные изменения

  • Введена новая опция $enable-container-classes. — Теперь при выборе экспериментального макета CSS Grid классы, .container-* по-прежнему будут скомпилированы, если для этого параметра не установлено значение false. Контейнеры также теперь сохраняют свои значения промежутков.

  • Компонент Offcanvas теперь имеет отзывчивые варианты. Исходный класс .offcanvas остается неизменным — он скрывает содержимое во всех окнах просмотра. Чтобы сделать его отзывчивым, измените этот класс .offcanvas на любой класс .offcanvas-{sm|md|lg|xl|xxl}.

  • Более толстые разделители столов теперь доступны по желанию. — Мы удалили более толстую и трудную для переопределения границу между группами таблиц и переместили ее в необязательный класс, который вы можете применить, .table-group-divider. Смотрите пример документации таблицы.

  • Scrollspy был переписан для использования Intersection Observer API, что означает, что вам больше не нужны относительные родительские оболочки, устарела конфигурация offset и другие. Обратите внимание на то, чтобы ваши реализации Scrollspy были более точными и последовательными в подсветке навигации.

  • Всплывающие окна и Всплывающие подсказки теперь используют переменные CSS. Некоторые переменные CSS были обновлены по сравнению с их аналогами Sass, чтобы уменьшить количество переменных. В результате в этом выпуске устарели три переменные: $popover-arrow-color, $popover-arrow-outer-color и $tooltip-arrow-color.

  • Добавлены новые помощники .text-bg-{color}. Вместо того, чтобы устанавливать отдельные утилиты .text-* и .bg-*, теперь вы можете использовать хелперы .text-bg-*, чтобы установить background-color с контрастным color переднего плана.

  • Добавлен модификатор .form-check-reverse для изменения порядка меток и связанных с ними флажков/радио.

  • Добавлена поддержка полосатых столбцов для таблиц через новый класс .table-striped-columns.

Полный список изменений смотрите в проекте версии 5.2.0 на GitHub.

v5.1.0

  • Добавлена ​​экспериментальная поддержка макета CSS Grid. — Это находится в стадии разработки и еще не готово к использованию в производственной среде, но вы можете включить новую функцию через Sass. Чтобы включить его, отключите сетку по умолчанию, установив $enable-grid-classes: false, и включите сетку CSS, установив $enable-cssgrid: true.

  • Обновлены панели навигации для поддержки offcanvas. — Добавьте offcanvas drawers в любую панель навигации с адаптивными классами .navbar-expand-* и некоторой разметкой offcanvas.

  • Добавлен новый компонент-заполнитель. — Наш новейший компонент, способ предоставления временных блоков вместо реального контента, чтобы показать, что что-то все еще загружается на вашем сайте или в приложении.

  • Плагин Collapse теперь поддерживает горизонтальное сворачивание. — Добавьте .collapse-horizontal к вашему .collapse, чтобы свернуть width вместо height. Избегайте перерисовки браузера, устанавливая min-height или height.

  • Добавлены новые помощники стека и вертикального правила. — Быстро применяйте несколько свойств flexbox для быстрого создания пользовательских макетов с помощью стеков. Выберите один из горизонтальных (.hstack) и вертикальных (.vstack) стеков. Добавьте вертикальные разделители, похожие на элементы <hr>, с помощью новых помощников .vr.

  • Добавлены новые глобальные CSS-переменные :root. — Добавлено несколько новых переменных CSS на уровень :root для управления стилями <body>. В разработке находится больше, в том числе в отношении наших утилит и компонентов, но пока прочитайте CSS-переменные в разделе «Кастомизация».

  • Переработаны утилиты цвета и фона для использования переменных CSS, а также добавлены новые утилиты непрозрачность текста и непрозрачность фона. — Утилиты .text-* и .bg-* теперь создаются с переменными CSS и значениями цвета rgba(), что позволяет легко настраивать любую утилиту с помощью новых утилит непрозрачности.

  • Добавлены новые примеры фрагментов, демонстрирующие, как настраивать наши компоненты. — Получите готовые к использованию настраиваемые компоненты и другие распространенные шаблоны проектирования с нашими новыми примерами фрагментов. Включает футеры, выпадающие списки, группы списков, и модальные окна.

  • Удалены неиспользуемые стили позиционирования из всплывающих окон и всплывающих подсказок, так как они обрабатываются исключительно Popper. $tooltip-margin устарел и установлен в null в процессе.

Хотите больше информации? Прочитайте сообщение в блоге о версии 5.1.0.

v5.0.0

Привет! Ниже задокументированы изменения в нашем первом крупном выпуске Bootstrap 5 v5.0.0. Они не отражают дополнительные изменения, показанные выше.

Зависимости

  • Удален 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-breakpoint-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

  • Breaking элементы <hr> теперь используют height вместо border, чтобы лучше поддерживать атрибут size. Это также позволяет использовать утилиты заполнения для создания более толстых разделителей (например, <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.

Формы

  • Добавлены новые плавающие формы! Мы продвинули пример с плавающими метками до полностью поддерживаемых компонентов формы. Смотрите новую страницу «Плавающие метки».

  • Breaking Объединенные собственные и настраиваемые элементы формы. Флажки, радио, выборки и другие входные данные, которые имели собственные и настраиваемые классы в версии 4, были объединены. Теперь почти все наши элементы формы полностью настраиваемые, для большинства из них не требуется настраиваемый HTML.

    • .custom-control.custom-checkbox теперь называется .form-check.
    • .custom-control.custom-radio теперь называется .form-check.
    • .custom-control.custom-switch теперь называется .form-check.form-switch.
    • .custom-select теперь называется .form-select.
    • .custom-file и .form-control-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.

  • Элементы управления формой больше не использовали фиксированную height когда это было возможно, вместо этого откладывали min-height для улучшения настройки и совместимости с другими компонентами.

  • Переставлены исходные файлы Sass в scss/forms/, включая стили группы ввода.

Компоненты

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

Аккордеон

  • Добавлен [новый компонент аккордеона](/docs/5.3/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) вместо &times; в HTML, что позволяет упростить настройку без необходимости касаться вашей разметки.

  • Добавлен новый вариант .btn-close-white, который использует filter: invert(1) для включения более контрастных иконок удаления на более темном фоне.

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

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

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

  • Добавлен новый вариант .dropdown-menu-dark и связанные переменные для темных выпадающих списков по запросу.

  • Добавлена новая переменная для $dropdown-padding-x.

  • Затемнен разделитель раскрывающегося списка для улучшения контраста.

  • Breaking Все события для раскрывающегося списка теперь запускаются на кнопке-переключателе раскрывающегося списка, а затем всплывают до родительского элемента.

  • Выпадающие меню теперь имеют атрибут data-bs-popper="static", установленный, когда положение раскрывающегося списка является статическим или раскрывающийся список находится на панели навигации. Это добавлено нашим JavaScript и помогает нам использовать настраиваемые стили положения, не мешая позиционированию Popper.

  • Breaking Исключена опция flip для плагина раскрывающегося списка в пользу собственной конфигурации Popper. Теперь вы можете отключить поведение переворачивания, передав пустой массив для параметра fallbackPlacements в flip модификатор.

  • На раскрывающиеся меню теперь можно щелкнуть с помощью новой опции autoClose для обработки поведения автоматического закрытия. Вы можете использовать этот параметр, чтобы принять щелчок внутри или за пределами раскрывающегося меню, чтобы сделать его интерактивным.

  • Выпадающие списки теперь поддерживают .dropdown-item, заключенные в <li>.

Джамботрон

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

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

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

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

  • Breaking Навбарам теперь требуется контейнер внутри (чтобы значительно упростить требования к интервалам и CSS).
  • Breaking Класс .active больше нельзя применять к элементам .nav-item, его необходимо применять непосредственно к элементам .nav-link.

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:

    • Переименованы .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-italic переименована в .fst-italic для краткости и согласованности с новой утилитой .fst-normal.

  • Добавлен .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, чтобы создать новый экземпляр плагина:

    const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

  • popperConfig может быть передан как функция, которая принимает конфигурацию Popper по умолчанию Bootstrap в качестве аргумента, так что вы можете объединить эту конфигурацию по умолчанию по-своему. Применяется к раскрывающимся спискам, всплывающим подсказкам и всплывающим подсказкам.

  • Значение по умолчанию для fallbackPlacements изменено на ['top', 'right', 'bottom', 'left'] для лучшего размещения элементов Popper. Применяется к раскрывающимся спискам, всплывающим подсказкам и всплывающим подсказкам.

  • Удалено подчеркивание из общедоступных статических методов, таких как _getInstance() → getInstance().