Переход на v5
Отслеживайте и просматривайте изменения в исходных файлах, документации и компонентах Bootstrap, чтобы помочь вам перейти с версии 4 на версию 5.
Зависимости
- Сбросил jQuery.
- Обновлен с Popper v1.x до Popper v2.x.
- Libsass заменен на Dart Sass, так как наш компилятор Sass, учитывая, что Libsass устарел.
- Перенесено с Jekyll на Hugo для создания нашей документации.
Поддержка браузера
- Удалены Internet Explorer 10 и 11
- Удален Microsoft Edge < 16 (устаревший Edge)
- Упал Firefox < 60
- Выпал Сафари < 12
- Удален iOS Safari < 12
- Упал хром < 60
Изменения в документации
- Переработана домашняя страница, макет документов и нижний колонтитул.
- Добавлен новый путеводитель по посылкам .
- Добавлен новый раздел Customize , заменяющий страницу Theming v4 , с новыми подробностями о Sass, глобальными параметрами конфигурации, цветовыми схемами, переменными CSS и многим другим.
- Всю документацию по формам реорганизовали в новый раздел «Формы» , разбив содержимое на более целенаправленные страницы.
- Точно так же обновлен раздел «Макет» , чтобы более четко отображать содержимое сетки.
- Страница компонента «Navs» переименована в «Navs & Tabs».
- Страница «Проверки» переименована в «Проверки и радио».
- Переработана панель навигации и добавлена новая вложенная навигация, чтобы упростить навигацию по нашим сайтам и версиям документов.
- Добавлено новое сочетание клавиш для поля поиска: Ctrl + /.
Сасс
-
Мы отказались от слияния карт Sass по умолчанию, чтобы упростить удаление избыточных значений. Имейте в виду, что теперь вам нужно определить все значения в картах Sass, таких как
$theme-colors
. Узнайте, как работать с картами Sass . -
Ломать
color-yiq()
Функция и связанные с ней переменные переименованы ,color-contrast()
так как они больше не связаны с цветовым пространством YIQ. См. № 30168.$yiq-contrasted-threshold
переименовывается в$min-contrast-ratio
.$yiq-text-dark
и$yiq-text-light
соответственно переименовываются в$color-contrast-dark
и$color-contrast-light
.
-
ЛоматьПараметры примесей медиазапросов изменены для более логичного подхода.
media-breakpoint-down()
использует саму точку останова вместо следующей точки останова (например,media-breakpoint-down(lg)
вместоmedia-breakpoint-down(md)
целевых окон просмотра меньшеlg
).- Точно так же второй параметр
media-breakpoint-between()
также использует саму точку останова вместо следующей точки останова (например,media-between(sm, lg)
вместоmedia-breakpoint-between(sm, md)
целевых окон просмотра междуsm
иlg
).
-
ЛоматьУдалены стили печати и
$enable-print-styles
переменная. Классы отображения печати все еще существуют. См. # 28339 . -
ЛоматьОтброшены функции
color()
,theme-color()
иgray()
в пользу переменных. См. # 29083 . -
Ломать
theme-color-level()
Функция переименована вcolor-level()
и теперь принимает любой цвет, который вы хотите, а не только$theme-color
цвета. См. # 29083 Осторожно:color-level()
позже был добавленv5.0.0-alpha3
. -
ЛоматьПереименовал
$enable-prefers-reduced-motion-media-query
и$enable-pointer-cursor-for-buttons
в$enable-reduced-motion
и$enable-button-pointers
для краткости. -
ЛоматьУдалил
bg-gradient-variant()
миксин. Используйте.bg-gradient
класс для добавления градиентов к элементам вместо сгенерированных.bg-gradient-*
классов. -
Ломать Удалены ранее устаревшие миксины:
hover
,hover-focus
,plain-hover-focus
иhover-focus-active
float()
form-control-mixin()
nav-divider()
retina-img()
text-hide()
(также удален связанный класс полезности,.text-hide
)visibility()
form-control-focus()
-
Ломать
scale-color()
Функция переименована ,shift-color()
чтобы избежать конфликта с собственной функцией масштабирования цвета Sass. -
box-shadow
миксины теперь допускаютnull
значения и удаляютсяnone
из нескольких аргументов. См. #30394 . -
Миксин
border-radius()
теперь имеет значение по умолчанию.
Цветовая система
-
Цветовая система, которая работала
color-level()
и$theme-color-interval
была удалена в пользу новой цветовой системы. Все функцииlighten()
иdarken()
в нашей кодовой базе заменены наtint-color()
иshade-color()
. Эти функции будут смешивать цвет с белым или черным вместо того, чтобы изменять его яркость на фиксированную величину. Цветshift-color()
либо окрашивается, либо затеняется в зависимости от того, является ли его весовой параметр положительным или отрицательным. См. #30622 для более подробной информации. -
Добавлены новые оттенки и оттенки для каждого цвета, предоставляя девять отдельных цветов для каждого базового цвета в качестве новых переменных Sass.
-
Улучшенный цветовой контраст. Увеличен коэффициент цветовой контрастности с 3:1 до 4,5:1 и обновлены синий, зеленый, голубой и розовый цвета, чтобы обеспечить контрастность WCAG 2.1 AA. Также изменили наш цветовой контраст с
$gray-900
на$black
. -
Для поддержки нашей цветовой системы мы добавили новые настройки
tint-color()
иshade-color()
функции для правильного смешивания цветов.
Обновления сетки
-
Новая точка останова! Добавлена новая
xxl
точка останова для1400px
и выше. Никаких изменений для всех других точек останова. -
Улучшенные водостоки. Желоба теперь задаются в бэрах и уже, чем в версии 4 (
1.5rem
, или около24px
, по сравнению с30px
). Это выравнивает желоба нашей системы сетки с нашими утилитами интервалов.- Добавлен новый класс желобов (
.g-*
,.gx-*
, и.gy-*
) для управления горизонтальными/вертикальными желобами, горизонтальными и вертикальными желобами. - ЛоматьПереименован
.no-gutters
в,.g-0
чтобы соответствовать новым утилитам желоба.
- Добавлен новый класс желобов (
-
Столбцы больше не
position: relative
применяются, поэтому вам, возможно, придется добавить.position-relative
некоторые элементы, чтобы восстановить это поведение. -
ЛоматьУбрано несколько
.order-*
классов, которые часто оставались неиспользованными. Теперь мы предоставляем только.order-1
из.order-5
коробки. -
ЛоматьКомпонент удален,
.media
так как его можно легко воспроизвести с помощью утилит. См. пример #28265 и страницу утилит flex . -
Ломать
bootstrap-grid.css
теперь применяется толькоbox-sizing: border-box
к столбцу вместо сброса глобального размера окна. Таким образом, наши стили сетки можно использовать в большем количестве мест без помех. -
$enable-grid-classes
больше не отключает создание классов контейнеров. См. № 29146. -
Обновлен
make-col
миксин по умолчанию для равных столбцов без указанного размера.
Контент, перезагрузка и т. д.
-
Теперь RFS включен по умолчанию. Заголовки, использующие
font-size()
миксин, будут автоматически корректировать ихfont-size
масштаб в соответствии с областью просмотра. Ранее эта функция была включена в v4. -
ЛоматьМы переработали типографику отображения, заменив
$display-*
переменные и$display-font-sizes
карту Sass. Также удалены отдельные$display-*-weight
переменные для одиночных$display-font-weight
и скорректированныхfont-size
s. -
Добавлены два новых
.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
и .end
left
right
Формы
-
Добавлены новые плавающие формы! Мы повысили уровень плавающих меток до полностью поддерживаемых компонентов формы. См. новую страницу «Плавающие метки».
-
Ломать Объединение собственных и настраиваемых элементов формы. Флажки, радио, выбор и другие входные данные, которые имели собственные и пользовательские классы в версии 4, были объединены. Теперь почти все наши элементы формы полностью настраиваемые, большинство из них не требуют пользовательского HTML.
.custom-check
сейчас.form-check
..custom-check.custom-switch
сейчас.form-check.form-switch
..custom-select
сейчас.form-select
..custom-file
и.form-file
были заменены пользовательскими стилями поверх.form-control
..custom-range
сейчас.form-range
.- Скинул родной
.form-control-file
и.form-control-range
.
-
ЛоматьСбросил
.input-group-append
и.input-group-prepend
. Теперь вы можете просто добавлять кнопки и.input-group-text
в качестве прямых дочерних элементов групп ввода. -
Давняя ошибка « Отсутствует радиус границы» в группе ввода с проверкой обратной связи окончательно исправлена путем добавления дополнительного
.has-validation
класса к группам ввода с проверкой. -
Ломать Убраны классы компоновки, специфичные для формы, для нашей системы сетки. Используйте нашу сетку и утилиты вместо
.form-group
,.form-row
, или.form-inline
. -
ЛоматьМетки форм теперь требуют
.form-label
. -
Ломать
.form-text
больше не устанавливаетdisplay
, что позволяет вам создавать встроенный или блочный текст справки по вашему желанию, просто изменяя элемент HTML. -
Значки проверки больше не применяются к
<select>
s сmultiple
. -
Переупорядочены исходные файлы Sass в разделе
scss/forms/
, включая стили группы ввода.
Составные части
- Унифицированные
padding
значения для предупреждений, хлебных крошек, карточек, раскрывающихся списков, групп списков, модальных окон, всплывающих окон и всплывающих подсказок должны основываться на нашей$spacer
переменной. См. #30564 .
Аккордеон
- Добавлен новый компонент аккордеона .
Оповещения
-
Оповещения теперь имеют примеры со значками .
-
Удалены пользовательские стили для
<hr>
s в каждом оповещении, так как они уже используютcurrentColor
.
Значки
-
ЛоматьУбраны все
.badge-*
цветовые классы для фоновых утилит (например, используйте.bg-primary
вместо.badge-primary
). -
ЛоматьУпало
.badge-pill
—.rounded-pill
вместо этого используйте утилиту. -
ЛоматьУдалены стили наведения и фокуса для
<a>
элементов и<button>
. -
Увеличен отступ по умолчанию для значков с
.25em
/.5em
на.35em
/.65em
.
Панировочные сухари
-
Упрощен внешний вид хлебных крошек по умолчанию путем удаления
padding
,background-color
иborder-radius
. -
Добавлено новое пользовательское свойство CSS
--bs-breadcrumb-divider
для легкой настройки без необходимости повторной компиляции CSS.
Кнопки
-
Ломать Кнопки -переключатели с флажками или переключателями больше не требуют JavaScript и имеют новую разметку. Нам больше не требуется элемент-обертка, добавьте
.btn-check
в<input>
и соедините с любыми.btn
классами в<label>
. См. #30650 . Документы для этого перемещены со страницы «Кнопки» в новый раздел «Формы». -
Ломать Скинул
.btn-block
за коммуналку. Вместо того, чтобы использовать.btn-block
на.btn
, оберните свои кнопки утилитой.d-grid
и , чтобы разместить их по мере необходимости..gap-*
Переключитесь на адаптивные классы для еще большего контроля над ними. Прочитайте документы для некоторых примеров. -
Обновлены наши
button-variant()
иbutton-outline-variant()
миксины для поддержки дополнительных параметров. -
Обновлены кнопки, чтобы обеспечить повышенную контрастность при наведении и активном состоянии.
-
Отключенные кнопки теперь имеют
pointer-events: none;
.
Открытка
-
ЛоматьВыпало
.card-deck
в пользу нашей сетки. Оберните свои карты в классы столбцов и добавьте родительский.row-cols-*
контейнер для воссоздания колод карт (но с большим контролем над адаптивн��м выравниванием). -
ЛоматьОтброшено
.card-columns
в пользу масонства. См. # 28922 . -
ЛоматьЗаменен базовый
.card
аккордеон на новый компонент Accordion .
Карусель
-
Добавлен новый
.carousel-dark
вариант для темного текста, элементов управления и индикаторов (отлично подходит для более светлого фона). -
Заменены шевронные значки для элементов управления карусели новыми SVG от Bootstrap Icons .
Кнопка закрытия
-
ЛоматьПереименован
.close
в.btn-close
для менее общего имени. -
Кнопки закрытия теперь используют
background-image
(встроенный SVG) вместо×
в HTML, что упрощает настройку без необходимости касаться разметки. -
Добавлен новый
.btn-close-white
вариант, который используетсяfilter: invert(1)
для включения более контрастных значков отклонения на более темном фоне.
Крах
- Удалена привязка прокрутки для аккордеонов.
Выпадающие списки
-
Добавлен новый
.dropdown-menu-dark
вариант и связанные переменные для темных раскрывающихся списков по требованию. -
Добавлена новая переменная для
$dropdown-padding-x
. -
Выпадающий разделитель затемнен для улучшения контраста.
-
ЛоматьВсе события для раскрывающегося списка теперь запускаются на кнопке переключения раскрывающегося списка, а затем всплывают к родительскому элементу.
-
В раскрывающихся меню теперь установлен
data-bs-popper="static"
атрибут, когда позиционирование раскрывающегося списка является статическим иdata-bs-popper="none"
когда раскрывающееся меню находится на панели навигации. Это добавлено нашим JavaScript и помогает нам использовать пользовательские стили позиции, не мешая позиционированию Поппера. -
ЛоматьОтброшен
flip
вариант для раскрывающегося плагина в пользу собственной конфигурации Popper. Теперь вы можете отключить перелистывание, передав пустой массив дляfallbackPlacements
опции в модификаторе flip . -
Выпадающие меню теперь можно щелкнуть с помощью новой
autoClose
опции для управления поведением автоматического закрытия . Вы можете использовать эту опцию, чтобы принять щелчок внутри или снаружи раскрывающегося меню, чтобы сделать его интерактивным. -
Выпадающие списки теперь поддерживают
.dropdown-item
s, завернутые в<li>
s.
Джамботрон
- ЛоматьОтброшен компонент jumbotron, так как его можно воспроизвести с помощью утилит. Смотрите наш новый пример Jumbotron для демонстрации.
Группа списка
- Добавлен новый
.list-group-numbered
модификатор для списка групп.
Навигация и вкладки
- Добавлены новые
null
переменные дляfont-size
,font-weight
,color
и:hover
color
в.nav-link
класс.
Навбары
- ЛоматьДля панелей навигации теперь требуется контейнер внутри (чтобы радикально упростить требования к интервалам и CSS).
Offcanvas
- Добавлен новый компонент offcanvas .
Пагинация
-
Ссылки на страницы теперь имеют настраиваемые
margin-left
параметры, которые динамически закругляются на всех углах, когда они отделены друг от друга. -
Добавлены
transition
s к ссылкам на страницы.
Поповеры
-
ЛоматьПереименован
.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-ratios
Sass была переименована в ,$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()
.
- Изменен файл Sass с
-
bootstrap-utilities.css
теперь также включает в себя наши помощники. Помощников больше не нужно импортировать в пользовательские сборки.
JavaScript
-
Отброшена зависимость от jQuery и переписаны плагины, чтобы они были на обычном JavaScript.
-
ЛоматьАтрибуты данных для всех плагинов JavaScript теперь разделены по именам, чтобы помочь отличить функциональность Bootstrap от сторонних и вашего собственного кода. Например, мы используем
data-bs-toggle
вместоdata-toggle
. -
Все плагины теперь могут принимать селектор CSS в качестве первого аргумента. Вы можете либо передать элемент DOM, либо любой допустимый селектор CSS, чтобы создать новый экземпляр плагина:
var modal = new bootstrap.Modal('#myModal') var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
-
popperConfig
может быть передана как функция, которая принимает конфигурацию Bootstrap по умолчанию Popper в качестве аргумента, чтобы вы могли объединить эту конфигурацию по умолчанию по-своему. Применяется к раскрывающимся спискам, всплывающим окнам и всплывающим подсказкам. -
Значение по умолчанию
fallbackPlacements
изменено на['top', 'right', 'bottom', 'left']
для лучшего размещения элементов Popper. Применяется к раскрывающимся спискам, всплывающим окнам и всплывающим подсказкам. -
Удалено подчеркивание из общедоступных статических методов, таких как
_getInstance()
→getInstance()
.