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

Переход на v5

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

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

v5.2.0

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

В Bootstrap v5.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контрастного переднего плана color.

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

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

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

v5.1.0

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

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

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

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

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

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

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

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

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

Хотите больше информации? Прочтите сообщение в блоге v5.1.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 (устаревший Edge)
  • Упал Firefox < 60
  • Выпал Сафари < 12
  • Удален iOS Safari < 12
  • Упал хром < 60

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

  • Переработана домашняя страница, макет документов и нижний колонтитул.
  • Добавлен новый путеводитель по посылкам .
  • Добавлен новый раздел Customize , заменяющий страницу Theming v4 , с новыми подробностями о Sass, глобальными параметрами конфигурации, цветовыми схемами, переменными CSS и многим другим.
  • Всю документацию по формам реорганизовали в новый раздел «Формы» , разбив содержимое на более целенаправленные страницы.
  • Точно так же обновлен раздел «Макет» , чтобы более четко отображать содержимое сетки.
  • Страница компонента «Navs» переименована в «Navs & Tabs».
  • Страница «Проверки» переименована в «Проверки и радио».
  • Переработана панель навигации и добавлена ​​новая вложенная навигация, чтобы упростить навигацию по нашим сайтам и версиям документов.
  • Добавлено новое сочетание клавиш для поля поиска: Ctrl + /.

Сасс

  • Мы отказались от слияния карт Sass по умолчанию, чтобы упростить удаление избыточных значений. Имейте в виду, что теперь вам нужно определить все значения в картах Sass, таких как $theme-colors. Узнайте, как работать с картами Sass .

  • Ломатьcolor-yiq()Функция и связанные с ней переменные переименованы , color-contrast()так как они больше не связаны с цветовым пространством YIQ. См. № 30168.

    • $yiq-contrasted-thresholdпереименовывается в $min-contrast-ratio.
    • $yiq-text-darkи $yiq-text-lightсоответственно переименовываются в $color-contrast-darkи $color-contrast-light.

  • ЛоматьПараметры примесей медиазапросов изменены для более логичного подхода.

    • media-breakpoint-down()использует саму точку останова вместо следующей точки останова (например, media-breakpoint-down(lg)вместо media-breakpoint-down(md)целевых окон просмотра меньше lg).
    • Точно так же второй параметр media-breakpoint-between()также использует саму точку останова вместо следующей точки останова (например, media-between(sm, lg)вместо media-breakpoint-between(sm, md)целевых окон просмотра между smи lg).

  • ЛоматьУдалены стили печати и $enable-print-stylesпеременная. Классы отображения печати все еще существуют. См. # 28339 .

  • ЛоматьОтброшены функции color(), theme-color()и gray()в пользу переменных. См. # 29083 .

  • Ломатьtheme-color-level()Функция переименована в color-level()и теперь принимает любой цвет, который вы хотите, а не только $theme-colorцвета. См. # 29083 Осторожно: color-level() позже был добавлен v5.0.0-alpha3.

  • ЛоматьПереименовал $enable-prefers-reduced-motion-media-queryи $enable-pointer-cursor-for-buttonsв $enable-reduced-motionи $enable-button-pointersдля краткости.

  • ЛоматьУдалил bg-gradient-variant()миксин. Используйте .bg-gradientкласс для добавления градиентов к элементам вместо сгенерированных .bg-gradient-*классов.

  • Ломать Удалены ранее устаревшие миксины:

    • hover, hover-focus, plain-hover-focusиhover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(также удален связанный класс полезности, .text-hide)
    • visibility()
    • form-control-focus()

  • Ломатьscale-color()Функция переименована , shift-color()чтобы избежать конфликта с собственной функцией масштабирования цвета Sass.

  • box-shadowмиксины теперь допускают nullзначения и удаляются noneиз нескольких аргументов. См. #30394 .

  • Миксин border-radius()теперь имеет значение по умолчанию.

Цветовая система

  • Цветовая система, которая работала color-level()и $theme-color-intervalбыла удалена в пользу новой цветовой системы. Все функции lighten()и darken()в нашей кодовой базе заменены на tint-color()и shade-color(). Эти функции будут смешивать цвет с белым или черным вместо того, чтобы изменять его яркость на фиксированную величину. Цвет shift-color()либо окрашивается, либо затеняется в зависимости от того, является ли его весовой параметр положительным или отрицательным. См. #30622 для более подробной информации.

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

  • Улучшенный цветовой контраст. Увеличен коэффициент цветовой контрастности с 3:1 до 4,5:1 и обновлены синий, зеленый, голубой и розовый цвета, чтобы обеспечить контрастность WCAG 2.1 AA. Также изменили наш цветовой контраст с $gray-900на $black.

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

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

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

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

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

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

  • ЛоматьУбрано несколько .order-*классов, которые часто оставались неиспользованными. Теперь мы предоставляем только .order-1из .order-5коробки.

  • ЛоматьКомпонент удален, .mediaтак как его можно легко воспроизвести с помощью утилит. См. пример #28265 и страницу утилит flex .

  • Ломать bootstrap-grid.cssтеперь применяется только box-sizing: border-boxк столбцу вместо сброса глобального размера окна. Таким образом, наши стили сетки можно использовать в большем количестве мест без помех.

  • $enable-grid-classesбольше не отключает создание классов контейнеров. См. № 29146.

  • Обновлен make-colмиксин по умолчанию для равных столбцов без указанного размера.

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

  • Теперь RFS включен по умолчанию. Заголовки, использующиеfont-size()миксин, будут автоматически корректировать ихfont-sizeмасштаб в соответствии с областью просмотра. Ранее эта функция была включена в v4.

  • ЛоматьМы переработали типографику отображения, заменив $display-*переменные и $display-font-sizesкарту Sass. Также удалены отдельные $display-*-weightпеременные для одиночных $display-font-weightи скорректированных font-sizes.

  • Добавлены два новых .display-*размера заголовков .display-5и .display-6.

  • Ссылки подчеркиваются по умолчанию (не только при наведении), если только они не являются частью определенных компонентов.

  • Переработаны таблицы , чтобы обновить их стили и перестроить их с помощью переменных CSS для большего контроля над стилями.

  • ЛоматьВложенные таблицы больше не наследуют стили.

  • Ломать .thead-lightи .thead-darkотбрасываются в пользу .table-*классов вариантов, которые можно использовать для всех элементов таблицы ( thead, tbody, tfoot, trи ) th.td

  • ЛоматьМиксин table-row-variant()переименован в table-variant()и принимает только 2 параметра: $color(название цвета) и $value(код цвета). Цвет границы и акцентные цвета автоматически рассчитываются на основе переменных коэффициента таблицы.

  • Разделить переменные заполнения ячеек таблицы на -yи -x.

  • ЛоматьСкинул .pre-scrollableкласс. См. № 29135

  • Ломать .text-*Утилиты больше не добавляют к ссылкам состояния наведения и фокуса. .link-*Вместо этого можно использовать вспомогательные классы. См. # 29267

  • ЛоматьСкинул .text-justifyкласс. См. # 29793

  • Ломать <hr>элементы теперь используют heightвместо borderдля лучшей поддержки sizeатрибута. Это также позволяет использовать утилиты заполнения для создания более толстых разделителей (например, <hr class="py-1">).

  • Сбросить значение по умолчанию по горизонтали padding-leftи <ul>элементам <ol>с браузера по умолчанию 40pxна 2rem.

  • Добавлено $enable-smooth-scroll, которое применяется scroll-behavior: smoothво всем мире, за исключением пользователей, запрашивающих уменьшение движения с помощью prefers-reduced-motionмедиазапроса. См. № 31877

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

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

Формы

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

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

    • .custom-control.custom-checkboxсейчас .form-check.
    • .custom-control.custom-custom-radioсейчас .form-check.
    • .custom-control.custom-switchсейчас .form-check.form-switch.
    • .custom-selectсейчас .form-select.
    • .custom-fileи .form-fileбыли заменены пользовательскими стилями поверх .form-control.
    • .custom-rangeсейчас .form-range.
    • Скинул родной .form-control-fileи .form-control-range.

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

  • Давняя ошибка « Отсутствует радиус границы» в группе ввода с проверкой обратной связи окончательно исправлена ​​путем добавления дополнительного .has-validationкласса к группам ввода с проверкой.

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

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

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

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

  • Значки проверки больше не применяются к <select>s с multiple.

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

Составные части

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

Аккордеон

Оповещения

  • Оповещения теперь имеют примеры со значками .

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

Значки

  • ЛоматьУбраны все .badge-*цветовые классы для фоновых утилит (например, используйте .bg-primaryвместо .badge-primary).

  • ЛоматьУпало .badge-pill— .rounded-pillвместо этого используйте утилиту.

  • ЛоматьУдалены стили наведения и фокуса для <a>элементов и <button>.

  • Увеличен отступ по умолчанию для значков с .25em/ .5emна .35em/ .65em.

  • Упрощен внешний вид хлебных крошек по умолчанию путем удаления padding, background-colorи border-radius.

  • Добавлено новое пользовательское свойство CSS --bs-breadcrumb-dividerдля легкой настройки без необходимости повторной компиляции CSS.

Кнопки

  • Ломать Кнопки -переключатели с флажками или переключателями больше не требуют JavaScript и имеют новую разметку. Нам больше не требуется элемент-обертка, добавьте.btn-checkв<input>и соедините с любыми.btnклассами в<label>. См. #30650 . Документы для этого перемещены со страницы «Кнопки» в новый раздел «Формы».

  • Ломать Скинул .btn-blockза коммуналку. Вместо того, чтобы использовать .btn-blockна .btn, оберните свои кнопки утилитой .d-gridи , чтобы разместить их по мере необходимости. .gap-*Переключитесь на адаптивные классы для еще большего контроля над ними. Прочитайте документы для некоторых примеров.

  • Обновлены наши button-variant()и button-outline-variant()миксины для поддержки дополнительных параметров.

  • Обновлены кнопки, чтобы обеспечить повышенную контрастность при наведении и активном состоянии.

  • Отключенные кнопки теперь имеют pointer-events: none;.

Открытка

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

  • ЛоматьОтброшено .card-columnsв пользу масонства. См. # 28922 .

  • ЛоматьЗаменен базовый .cardаккордеон на новый компонент Accordion .

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

  • Заменены шевронные значки для элементов управления карусели новыми SVG от Bootstrap Icons .

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

  • Л��матьПереименован .closeв .btn-closeдля менее общего имени.

  • Кнопки закрытия теперь используют background-image(встроенный SVG) вместо &times;в HTML, что упрощает настройку без необходимости касаться разметки.

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

Крах

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

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

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

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

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

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

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

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

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

Джамботрон

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

  • Добавлены новые nullпеременные для font-size, font-weight, colorи :hover colorв .nav-linkкласс.
  • ЛоматьДля панелей навигации теперь требуется контейнер внутри (чтобы радикально упростить требования к интервалам и CSS).
  • ЛоматьКласс .activeбольше нельзя применять к .nav-items, его нужно применять непосредственно к .nav-links.

Offcanvas

Пагинация

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

  • Добавлены transitions к ссылкам на страницы.

Поповеры

  • ЛоматьПереименован .arrowв .popover-arrowнаш шаблон всплывающего окна по умолчанию.

  • whiteListВариант переименован в allowList.

Спиннеры

  • Спиннеры теперь уважают prefers-reduced-motion: reduce, замедляя анимацию. См. № 31882 .

  • Улучшено вертикальное выравнивание спиннера.

Тосты

  • Тосты теперь можно позиционировать с .toast-containerпомощью утилит позиционирования .

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

  • Убрано overflow: hiddenиз тостов и заменено правильными border-radiusс calc()функциями.

Подсказки

  • ЛоматьПереименован .arrowв .tooltip-arrowнаш шаблон всплывающей подсказки по умолчанию.

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

  • ЛоматьwhiteListВариант переименован в allowList.

Утилиты

  • ЛоматьПереименованы несколько утилит, чтобы использовать имена логических свойств вместо имен направлений с добавлением поддержки RTL:

    • Переименовал .left-*и .right-*в .start-*и .end-*.
    • Переименовал .float-leftи .float-rightв .float-startи .float-end.
    • Переименовал .border-leftи .border-rightв .border-startи .border-end.
    • Переименовал .rounded-leftи .rounded-rightв .rounded-startи .rounded-end.
    • Переименовал .ml-*и .mr-*в .ms-*и .me-*.
    • Переименовал .pl-*и .pr-*в .ps-*и .pe-*.
    • Переименовал .text-leftи .text-rightв .text-startи .text-end.

  • ЛоматьПо умолчанию отключены отрицательные поля.

  • Добавлен новый .bg-bodyкласс для быстрой установки <body>фона для дополнительных элементов.

  • Добавлены новые утилиты положения для top, right, bottomи left. Значения включают 0, 50%и 100%для каждого свойства.

  • Добавлены новые .translate-middle-xи .translate-middle-yутилиты для горизонтального или вертикального центрирования элементов с абсолютным/фиксированным позиционированием.

  • Добавлены новые border-widthутилиты .

  • ЛоматьПереименован .text-monospaceв .font-monospace.

  • ЛоматьУдалено .text-hide, поскольку это устаревший метод сокрытия текста, который больше не следует использовать.

  • Добавлены .fs-*утилиты для font-sizeутилит (при включенном RFS). Они используют тот же масштаб, что и заголовки HTML по умолчанию (1-6, от большого к маленькому), и могут быть изменены с помощью карты Sass.

  • Ломать.font-weight-*Утилиты переименованы как .fw-*для краткости, так и для последовательности.

  • Ломать.font-style-*Утилиты переименованы как .fst-*для краткости, так и для последовательности.

  • Добавлены .d-gridутилиты отображения и новые gapутилиты ( .gap) для макетов CSS Grid и flexbox.

  • ЛоматьУбраны .rounded-smи rounded-lg, и введена новая шкала классов, .rounded-0к .rounded-3. См. #31687 .

  • Добавлены новые line-heightутилиты: .lh-1, .lh-sm, .lh-baseи .lh-lg. Смотрите здесь .

  • Утилита перемещена .d-noneв наш CSS, чтобы придать ей больший вес по сравнению с другими утилитами отображения.

  • Расширен .visually-hidden-focusableпомощник, чтобы он также работал с контейнерами, используя файлы :focus-within.

Помощники

  • Ломать Адаптивные помощники встраивания были переименованы в помощники отношений с новыми именами классов и улучшенным поведением, а также с полезной переменной CSS.

    • Классы были переименованы, чтобы изменить byсоотношение xсторон. Например, .ratio-16by9сейчас .ratio-16x9.
    • Мы отказались от .embed-responsive-itemселектора группы элементов и в пользу более простого .ratio > *селектора. Класс больше не нужен, и помощник ratio теперь работает с любым элементом HTML.
    • Карта $embed-responsive-aspect-ratiosSass была переименована в , $aspect-ratiosа ее значения были упрощены, чтобы включить имя класса и процент в виде key: valueпары.
    • Переменные CSS теперь генерируются и включаются для каждого значения в карте Sass. Измените --bs-aspect-ratioпеременную .ratioдля создания произвольного соотношения сторон .

  • Ломать Классы «скринридер» теперь являются «визуально скрытыми» классами .

    • Изменен файл Sass с scss/helpers/_screenreaders.scssнаscss/helpers/_visually-hidden.scss
    • Переименовал .sr-onlyи .sr-only-focusableв .visually-hiddenи.visually-hidden-focusable
    • Переименованы sr-only()и sr-only-focusable()миксины в visually-hidden()и visually-hidden-focusable().

  • bootstrap-utilities.cssтеперь также включает в себя наши помощники. Помощников больше не нужно импортировать в пользовательские сборки.

JavaScript

  • Отброшена зависимость от jQuery и переписаны плагины, чтобы они были на обычном JavaScript.

  • ЛоматьАтрибуты данных для всех плагинов JavaScript теперь разделены по именам, чтобы помочь отличить функциональность Bootstrap от сторонних и вашего собственного кода. Например, мы используем data-bs-toggleвместо data-toggle.

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

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

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

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

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