Миграция на v5

v5.3.6

Зависимости

• Мигрировали с Hugo на Astro для сборки нашей документации

v5.3.0

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

Помощники

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

Утилиты

• Добавлена новая утилита .d-inline-grid отображения.

v5.3.0-alpha2

Если вы мигрируете с нашего предыдущего альфа-релиза v5.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.

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

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

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

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

• Устарело Класс .dropdown-menu-dark устарел и заменен на data-bs-theme="dark" на выпадающем списке или любом родительском элементе. См. документацию для примера.

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

• Устарело Класс .btn-close-white устарел и заменен на data-bs-theme="dark" на кнопке закрытия или любом родительском элементе. [См. документацию для примера.]([[docsref:/components/close-

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

• Устарело Класс .navbar-dark устарел и заменен на data-bs-theme="dark" на панели навигации или любом родительском элементе. См. документацию для обновленных примеров.

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

Разметка для индикаторов прогресса была обновлена в v5.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, добавлен класс .fw-semibold для полужирного начертания.
• Расширены утилиты border-radius, добавлены два новых размера: .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 с контрастным цветом текста.

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

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

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

v5.1.0

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

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

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

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

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

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

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

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

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

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

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 и содержит новые сведения о Sass, глобальных параметрах конфигурации, цветовых схемах, CSS-переменных и многом другом.
• Вся документация по формам была реорганизована в новый раздел "Формы", разбив содержимое на более сфокусированные страницы.
• Аналогично обновлен раздел "Макет", чтобы более четко раскрыть информацию о сетке.
• Страница компонента “Navs” переименована в "Navs & Tabs".
• Страница “Checks” переименована в "Checks & radios".
• Переработана навигационная панель и добавлена новая поднавигация для облегчения перемещения по сайту и версиям документации.
• Добавлено новое сочетание клавиш для поля поиска: Ctrl + /.

Sass

• Мы отказались от стандартного объединения 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-breakpoint-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.2 AA. Также изменен цвет цветового контраста с $gray-900 на $black.

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

Обновления сетки

• Новая контрольная точка! Добавлена новая контрольная точка xxl для 1400px и выше. Никаких изменений для всех остальных контрольных точек.

• Улучшенные желоба. Желоба теперь устанавливаются в rem, и они уже, чем в v4 (1.5rem, или около 24px, вниз от 30px). Это выравнивает желоба нашей системы сетки с нашими утилитами интервалов.

  • Добавлены новые классы желоба (.g-*, .gx-*, и .gy-*) для управления горизонтальными/вертикальными желобами, горизонтальными желобами и вертикальными желобами.
  • Важное изменение Переименован .no-gutters в .g-0 для соответствия новым утилитам желоба.

• К столбцам больше не применяется position: relative, поэтому вам, возможно, придется добавить .position-relative к некоторым элементам, чтобы восстановить это поведение.

• Важное изменение Удалены несколько классов .order-*, которые часто оставались неиспользованными. Теперь мы предоставляем только .order-0 по .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-* на карту Sass $display-font-sizes. Также удалены отдельные переменные $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

RTL

• Переменные, утилиты и миксины, зависящие от горизонтального направления, были переименованы для использования логических свойств, подобных тем, которые присутствуют в макетах flexbox, например, start и end вместо left и right.

Формы

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

• Важное изменение Объединенные собственные и настраиваемые элементы формы. Флажки, радио, выборки и другие входные данные, которые имели собственные и настраиваемые классы в версии 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.

• Важное изменение Удалены .input-group-append и .input-group-prepend. Теперь вы можете просто добавить кнопки и .input-group-text в качестве прямых потомков групп ввода.

• Давний Отсутствующий радиус границы в группе ввода с ошибкой обратной связи с проверкой, наконец, исправлен путем добавления дополнительного класса .has-validation во входные группы с проверкой.

• Важное изменение Исключены классы макета, специфичные для формы, для нашей системы сеток. Используйте нашу сетку и утилиты вместо .form-group, .form-row или .form-inline.

• Важное изменение Метки форм теперь требуют .form-label.

• Важное изменение .form-text больше не устанавливает display, позволяя вам создавать встроенный или блокировать текст справки по вашему желанию, просто изменяя элемент HTML.

• Иконки валидации больше не применяются к элементам <select> с параметром multiple.

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

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

Компоненты

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

Аккордеон

• Добавлен новый компонент аккордеона.

Оповещения

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

• Удалены пользовательские стили для <hr> в каждом оповещении, поскольку они уже используют 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 в пользу Masonry. Смотрите #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", установленный, когда позиционирование выпадающего списка статично, или выпадающий список находится в навигационной панели. Это добавляется нашим JavaScript и помогает нам использовать пользовательские стили позиционирования без вмешательства в позиционирование Popper.

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

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

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

Джамботрон

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

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

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

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

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

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

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

Offcanvas

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

Пагинация

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

• Добавлен переход transition по ссылкам для пагинации.

Поповеры

• Важное изменение В нашем шаблоне всплывающего окна по умолчанию .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:

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

• Добавлен .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-элементом.
  • Sass-карта $embed-responsive-aspect-ratios была переименована в $aspect-ratios, и её значения были упрощены, чтобы включать имя класса и процент как пару ключ: значение.
  • CSS-переменные теперь генерируются и включаются для каждого значения в Sass-карте. Измените переменную --bs-aspect-ratio на .ratio, чтобы создать любое пользовательское соотношение сторон.

• Важное изменение "Screen reader" classes are now "visually hidden" classes.

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

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

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