Переход на v5 · Bootstrap v5.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
Изменения в документации
- Изменен дизайн главной страницы, макета документов и нижнего колонтитула.
- Добавлен новый справочник посылок.
- Добавлен новый раздел «Настройка», заменяющий страницу «Темы» версии 4, с новыми подробностями о Sass, глобальными параметрами конфигурации, цветовыми схемами, переменными CSS и многим другим.
- Всю документацию по формам реорганизовали в новый раздел «Формы», разбив содержимое на более узкие страницы.
- Аналогичным образом обновлен раздел «Макет», чтобы более четко отображать содержимое сетки.
- Страница компонента «Navs» переименована в «Navs & Tabs».
- Страница «Проверки» переименована в «Проверки и радио».
- Изменен дизайн панели навигации и добавлена новая вложенная панель навигации, чтобы упростить навигацию по нашим сайтам и версиям документов.
- Добавлено новое сочетание клавиш для поля поиска: Ctrl + / .
Сасс
Мы отказались от слияния карт Sass по умолчанию, чтобы упростить удаление избыточных значений. Имейте в виду, что теперь вам нужно определить все значения в картах Sass, например 9.0060 $тема-цвета . Узнайте, как работать с картами Sass.
Breaking Переименована функция
color-yiq()
и связанные переменные вcolor-contrast()
, так как она больше не связана с цветовым пространством YIQ. См. № 30168.-
$yiq-contrasted-threshold
переименован в$min-contrast-ratio
. -
$yiq-text-dark
и$yiq-text-light
соответственно переименованы в$color-contrast-dark
и$цвет-контраст-свет
.
-
Параметры миксинов Breaking Media запроса изменены для более логичного подхода.
-
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
).
-
Breaking Удалены стили печати и переменная
$enable-print-styles
. Классы отображения печати все еще существуют. См. № 28339.Breaked Dropped
color()
,theme-color()
иgrey()
работает в пользу переменных. См. № 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 9От 0061 до
$enable-reduced-motion
и$enable-button-pointers
для краткости.Breaking Удален миксин
bg-gradient-variant()
. Используйте класс.bg-gradient
для добавления градиентов к элементам вместо сгенерированных классов. bg-gradient-*
.Взлом Удалены ранее устаревшие примеси:
-
наведение
,наведение-фокус
,простое наведение-фокус
иhover-focus-active
-
с плавающей запятой()
-
форма-контроль-примесь()
-
навигационный делитель()
-
сетчатка-изображение ()
-
text-hide()
.text-hide
) -
видимость()
-
фокус управления формой()
-
Нарушение Переименование функции
scale-color()
вshift-color()
, чтобы избежать конфликта с собственной функцией масштабирования цвета Sass.box-shadow
Миксины теперь допускаютнулевых значений
и удаляютнет
из нескольких аргументов. См. № 30394.Примесь
border-radius()
теперь имеет значение по умолчанию.
Цветовая система
Цветовая система, которая работала с
color-level()
и$theme-color-interval
был удален в пользу новой цветовой системы. Все функцииlighten()
иdarken()
в нашей кодовой базе заменены наtint-color()
иshadow-color()
. Эти функции будут смешивать цвет с белым или черным вместо того, чтобы изменять его яркость на фиксированную величину.shift-color()
будет либо подкрашивать, либо затенять цвет в зависимости от того, является ли его весовой параметр положительным или отрицательным. См. #30622 для более подробной информации.Добавлены новые оттенки и оттенки для каждого цвета, а также девять отдельных цветов для каждого базового цвета в качестве новых переменных Sass.
Улучшенный цветовой контраст. Увеличен коэффициент цветовой контрастности с 3:1 до 4,5:1 и обновлены синий, зеленый, голубой и розовый цвета, чтобы обеспечить контрастность WCAG 2.1 AA. Также изменился наш цветовой контраст с
$gray-900
на$black
.Для поддержки нашей цветовой системы мы добавили новый пользовательский
tint-color()
иShade-Color()
функции для правильного смешивания наших цветов.
Обновления сетки
Новая точка останова! Добавлена новая точка останова
xxl
для1400px
и выше. Никаких изменений для всех других точек останова.Улучшенные желоба. Gutters теперь установлены в rems и уже, чем v4 (
1.5rem
, или около24px
, по сравнению с30px
). Это выравнивает желоба нашей системы сетки с нашими утилитами интервалов.- Добавлен новый класс желобов (
. g-*
,.gx-*
и.gy-*
) для управления горизонтальными/вертикальными желобами, горизонтальными и вертикальными желобами. - Breaking Переименован
.no-gutters
в.g-0
, чтобы соответствовать новым утилитам желоба.
- Добавлен новый класс желобов (
Столбцы больше не имеют позицию
: относительная
, поэтому вам, возможно, придется добавить.position-relative
к некоторым элементам, чтобы восстановить это поведение.Breaking Удалено несколько классов
.order-*
, которые часто оставались неиспользованными. Теперь мы предоставляем только.order-1
по.order-5
из коробки.Взлом Компонент
.media
удален, так как его можно легко воспроизвести с помощью утилит. См. пример #28265 и страницу утилит flex.Нарушение
bootstrap-grid.css
теперь применяет толькоbox-sizing: border-box
к столбцу вместо сброса глобального box-sizing.$enable-grid-classes
больше не отключает создание классов контейнеров. См. № 29146.Обновлен миксин
make-col
по умолчанию для равных столбцов без указанного размера.
Контент, перезагрузка и т. д.
Функция RFS теперь включена по умолчанию. Заголовки, использующие миксин
font-size()
, будут автоматически корректировать размер шрифтаBreaking Мы переработали типографику отображения, заменив
переменных $display-*
и карту$display-font-sizes
Sass. Также удалены отдельные переменные$display-*-weight
для одного$display-font-weight
и скорректированыfont-size
s.Добавлены два новых размера заголовков
.display-*
,.display-5
и.дисплей-6
.Ссылки подчеркиваются по умолчанию (не только при наведении), если они не являются частью определенных компонентов.
Переработаны таблицы , чтобы обновить их стили и перестроить их с помощью переменных CSS для большего контроля над стилями.
Нарушение Вложенные таблицы больше не наследуют стили.
Breaking
.thead-light
и.thead-dark
заменены на.table-*
классы вариантов, которые можно использовать для всех элементов таблицы (
,tbody
,tfoot
,tr
,th
иtd
).Нарушение Миксин
table-row-variant()
переименован вtable-variant()
и принимает только 2 параметра:$color
(название цвета) и$value
(код цвета). Цвет границы и акцентные цвета автоматически рассчитываются на основе переменных коэффициента таблицы.Разделить переменные заполнения ячеек таблицы на
-y
и-x
.Breaked Dropped
.pre-scrollable
class. См. № 29135Утилиты Breaking
.text-*
больше не добавляют к ссылкам состояния наведения и фокуса. Вместо них можно использовать вспомогательные классы.link-*
. См. № 29267Breaked Dropped
.text-justify
класс. См. № 29793Сбросить по умолчанию горизонтальный
padding-left
для элементов
и
из браузера по умолчанию40px
в2rem
.Добавлен
$enable-smooth-scroll
, который применяетscroll-behavior: smooth
глобально, за исключением пользователей, запрашивающих уменьшение движения с помощьюмедиа-запроса предпочитает-уменьшенное движение
. См. № 31877
RTL
- Переменные, утилиты и миксины, относящиеся к горизонтальному направлению, были переименованы, чтобы использовать логические свойства, подобные тем, которые можно найти в макетах flexbox — например,
начало
иконец
вместослева
исправа
.
Формы
Добавлены новые плавающие формы! Мы повысили уровень плавающих меток до полностью поддерживаемых компонентов формы. См. новую страницу «Плавающие метки».
Breaking Объединение собственных и настраиваемых элементов формы. Флажки, переключатели, выбор и другие входные данные, которые имели собственные и пользовательские классы в версии 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
.
-
Breaked Dropped
.input-group-append
и.input-group-prepend
. Теперь вы можете просто добавить кнопки и.input-group-text
в качестве прямых дочерних элементов групп ввода.Давняя ошибка отсутствия радиуса границы в группе ввода с проверкой обратной связи окончательно исправлена путем добавления дополнительного класса
.has-validation
к группам ввода с проверкой.Нарушение Удалены классы компоновки, специфичные для формы, для нашей системы сетки. Используйте нашу сетку и утилиты вместо
.form-group
,.form-row
или.form-inline
.Для меток Breaking Form теперь требуется
.form-label
.Нарушение
.form-text
больше не устанавливаетdisplay
, что позволяет вам создавать встроенный или блочный текст справки по вашему желанию, просто изменяя элемент HTML.Значки проверки больше не применяются к
, кратным
.Переупорядочены исходные файлы Sass под
scss/forms/
, включая стили группы ввода.
Компоненты
- Унифицированное
заполнение
Значения для предупреждений, хлебных крошек, карточек, раскрывающихся списков, групп списков, модальных окон, всплывающих окон и всплывающих подсказок должны быть основаны на нашей переменной$spacer
. См. № 30564.
Аккордеон
- Добавлен новый компонент аккордеона.
Оповещения
Значки
Breaking Удалены все цветовые классы
.badge-*
для фоновых утилит (например, используйте.bg-primary
вместо.badge-primary
).Breaking Dropped
.badge-pill
— вместо этого используйте утилиту.rounded-pill
.Breaking Удалены стили наведения и фокусировки для
Увеличен отступ по умолчанию для значков с
.25em
/.5em
до.35em
/.65em
.
Упрощен внешний вид хлебных крошек по умолчанию путем удаления
padding
,background-color
иborder-radius
.Добавлено новое пользовательское свойство CSS
--bs-breadcrumb-divider
для легкой настройки без перекомпиляции CSS.
Кнопки
Нарушение Кнопки-переключатели с флажками или переключателями больше не требуют JavaScript и имеют новую разметку. Нам больше не требуется оборачивающий элемент, добавьте
.btn-check
к.btn
наВзлом Удален
.btn-block
для коммунальных услуг. Вместо того, чтобы использовать.btn-block
на.btn
, оберните кнопки.d-grid
и утилитой.gap-*
, чтобы разместить их по мере необходимости. Переключитесь на адаптивные классы для еще большего контроля над ними. Прочитайте документы для некоторых примеров.Обновлены наши миксины
button-variant()
иbutton-outline-variant()
для поддержки дополнительных параметров.Обновлены кнопки, чтобы обеспечить повышенную контрастность при наведении и активном состоянии.
Отключенные кнопки теперь имеют
событий указателя: нет;
.
Карта
Breaking Dropped
.card-deck
в пользу нашей сетки. Оберните свои карты в классы столбцов и добавьте родительский контейнер.row-cols-*
, чтобы воссоздать колоды карт (но с большим контролем над адаптивным выравниванием).Breaking Droped
.card-columns
в пользу масонства. См. № 28922.Breaking Заменен аккордеон
.card
на новый компонент Accordion.
Карусель
Добавлен новый вариант
.carousel-dark
для темного текста, элементов управления и индикаторов (отлично подходит для более светлого фона).Заменены значки шевронов для элементов управления каруселью новыми SVG из значков Bootstrap.
Кнопка закрытия
Breaking Переименовано
.close
в.btn-close
для менее общего имени.Кнопки закрытия теперь используют фоновое изображение
×
в HTML, что упрощает настройку без необходимости касаться разметки.Добавлен новый вариант
.btn-close-white
, который использует фильтр: инвертировать (1)
, чтобы включить более контрастные значки отклонения на более темном фоне.
Свернуть
- Удалена привязка прокрутки для аккордеонов.
Выпадающие списки
Добавлен новый вариант
.dropdown-menu-dark
и связанные переменные для темных раскрывающихся списков по запросу.Добавлена новая переменная для
$dropdown-padding-x
.Выпадающий разделитель затемнен для повышения контрастности.
Прерывание Все события для раскрывающегося списка теперь запускаются кнопкой переключения раскрывающегося списка, а затем всплывают к родительскому элементу.
Выпадающие меню теперь имеют атрибут
data-bs-popper="static"
, установленный, когда позиционирование раскрывающегося списка является статическим, иdata-bs-popper="none"
, когда раскрывающийся список находится на панели навигации. Это добавлено нашим JavaScript и помогает нам использовать пользовательские стили позиции, не мешая позиционированию Поппера.Breaking Dropped
Переверните
опцию для выпадающего плагина в пользу собственной конфигурации Popper. Теперь вы можете отключить перелистывание, передав пустой массив для 9Опция 0060 fallbackPlacements в модификаторе flip.Раскрывающиеся меню теперь можно щелкнуть с помощью новой опции
autoClose
для обработки поведения автоматического закрытия. Вы можете использовать эту опцию, чтобы принять щелчок внутри или снаружи раскрывающегося меню, чтобы сделать его интерактивным.Раскрывающиеся списки теперь поддерживают
.dropdown-item
s, завернутые в
s.
Jumbotron
- Взлом Убран компонент jumbotron, так как его можно воспроизвести с помощью утилит. Смотрите наш новый пример Jumbotron для демонстрации.
Группа списка
- Добавлен новый модификатор
.list-group-numbered
для списка групп.
NAVS and Tabs
- Добавлено новое
NULL
переменные дляразмер шрифта
,Font-Weight
,Color
и: Hover
Color
до60606061.-Link.
Панели навигации
- Для прерывания работы панелей навигации теперь требуется контейнер внутри (чтобы радикально упростить требования к интервалам и CSS).
Offcanvas
- Добавлен новый компонент offcanvas.
Поповеры
Спиннеры
Тосты
Тосты теперь можно размещать в контейнере
.toast-container
с помощью утилит позиционирования.Длительность всплывающего уведомления по умолчанию изменена на 5 секунд.
Удалено переполнение
: скрыто
из тостов и заменено правильным радиусом границыcalc()
функций.
Подсказки
Breaking Переименован
.arrow
в.tooltip-arrow
в нашем шаблоне всплывающей подсказки по умолчанию.Breaking Значение по умолчанию для
fallbackPlacements
изменено на['top', 'right', 'bottom', 'left']
для лучшего размещения элементов поппера.Прерывание Переименован параметр
whiteList
вallowList
.
Коммунальные услуги
Breaking Переименовано несколько утилит, чтобы использовать имена логических свойств вместо имен направлений с добавлением поддержки RTL:
- Переименован
.left-*
и.right-*
в.start-*
и.end-*
. - Переименованы
.float-left
и.float-right
в.float-start
и.float-end
. - Переименовано
.border-left
и.border-right от
до.border-start
и.border-end
. - Переименованы
.закругленные влево
и.закругленные вправо
в.закругленные в начале
и.закругленные в конце
. - Переименованы
.ml-*
и.mr-*
в.ms-*
и.me-*
. - Переименованы
.pl-*
и.pr-*
в. ps-*
и.pe-*
. - Переименовано
.text-left
и.text-right от
до.text-start
и.text-end
.
- Переименован
Breaking По умолчанию отключены отрицательные поля.
Добавлен новый класс
.bg-body
для быстрой установки фонаДобавлены новые утилиты позиционирования для
сверху
,справа
,снизу
ислева
. Значения включают0
,50%
и100%
для каждого свойства.Добавлены новые утилиты
.translate-middle-x
и.translate-middle-y
для горизонтального или вертикального центрирования элементов с абсолютным/фиксированным положением.Добавлены новые утилиты шириной
границ
.Нарушение Переименование
. text-monospace
в.font-monospace
.Взлом Удалено
.text-hide
, поскольку это устаревший метод сокрытия текста, который больше не следует использовать.Добавлены утилиты
.fs-*
для утилит размером шрифтаBreaking Утилиты
.font-weight-*
переименованы в.fw-*
для краткости и согласованности.Взлом переименован
.font-style-*
утилиты как.fst-*
для краткости и согласованности.Добавлен
.d-grid
для отображения утилит и новых утилитgap
(.gap
) для макетов CSS Grid и flexbox.Breaking Удалены
.rounded-sm
иrounded-lg
, а также введена новая шкала классов,. rounded-0
на.rounded-3
. См. № 31687.Добавлено новое
line-height
утилиты:.lh-1
,.lh-sm
,.lh-base
и.lh-lg
. Глянь сюда.Утилита
.d-none
перемещена в наш CSS, чтобы придать ей больший вес по сравнению с другими утилитами отображения.Расширен помощник
.visually-hidden-focusable
, чтобы он также работал с контейнерами, используя:focus-within
.
Помощники
Взлом Адаптивные помощники встраивания были переименованы в помощники отношений с новыми именами классов и улучшенным поведением, а также с полезной переменной CSS.
- Классы были переименованы, чтобы изменить
на
наx
в соотношении сторон. Например,.ratio-16by9
теперь равно.ratio-16x9
. - Мы отказались от селектора
. embed-responsive-item
и группы элементов в пользу более простого селектора.ratio > *
. Класс больше не нужен, и помощник ratio теперь работает с любым элементом HTML. - Карта
$embed-responsive-aspect-ratios
Sass была переименована в$aspect-ratios
, а ее значения были упрощены и теперь включают имя класса и процентное соотношение в виде парыключ: значение
. - переменных 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.
Атрибуты Breaking Data для всех подключаемых модулей JavaScript теперь объединены в пространство имен, чтобы помочь отличить функциональность Bootstrap от стороннего кода и вашего собственного кода. Например, мы используем
data-bs-toggle
вместоdata-toggle
.Все подключаемые модули теперь могут принимать селектор CSS в качестве первого аргумента. Вы можете либо передать элемент DOM, либо любой допустимый селектор CSS, чтобы создать новый экземпляр плагина:
var modal = новый bootstrap.Modal('#myModal') var dropdown = новый bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
popperConfig
можно передать как функцию, которая принимает конфигурацию Bootstrap по умолчанию Popper в качестве аргумента, чтобы вы могли объединить эту конфигурацию по умолчанию по-своему. Применяется к раскрывающимся спискам, всплывающим окнам и всплывающим подсказкам.Значение по умолчанию для
fallbackPlacements
изменено на['top', 'right', 'bottom', 'left']
для лучшего размещения элементов Popper. Применяется к раскрывающимся спискам, всплывающим окнам и всплывающим подсказкам.Удалено подчеркивание из общедоступных статических методов, таких как
_getInstance()
→getInstance()
.
8 потрясающих анимированных фонов, созданных с помощью CSS и JavaScript
В веб-дизайне анимация часто используется для привлечения внимания. Движение заставляет пользователей сосредоточиться на определенном элементе, например, на кнопке или изображении.
Но анимацию можно использовать и более тонко. Анимированные фоны, например, часто отказываются от наворотов, которые можно увидеть в содержании сайта. Скорее, они используются для создания настроения и улучшения эстетики.
Это не значит, что анимированный фон не может быть громким или даже неприятным. Все зависит от цели, стоящей за элементом. Во всяком случае, это демонстрирует гибкость, предоставляемую дизайнерам.
Сегодня мы рассмотрим анимированные фоны, которые охватывают всю гамму с точки зрения внешнего вида и вариантов использования. Они являются яркими примерами того, как немного CSS и JavaScript могут добавить изюминку к ранее статическим функциям.
Анимированный фон боке
от smpnjn Стиль боке часто ассоциируется с фотографией. Здесь он используется с большим эффектом, когда точки то появляются, то выходят из фокуса — похоже на лавовую лампу. Этот фрагмент использует ванильный JavaScript и HTML canvas
для создания шелковисто-гладкого фона.
See the Pen Animated Bokeh Lava Lamp Canvas от smpnj (@smpnjn)
Frosted UI Background
by George FrancisЭтот фон имеет аналогичный эффект, только немного более тонкий. Это также идеально подходит для «матового» пользовательского интерфейса на переднем плане, так как вы можете видеть, как шары плавно плавают под стеклянным контейнером. Анимация также является генеративной — это означает, что она движется случайным образом на основе заданных критериев.
См. пользовательский интерфейс Pen Generative — Orb Animation [pixi. js] + Frosty Elements ❄️ by George Francis
Simple CSS Wave Background
by GoodkatzВот узконаправленный способ использования анимированного фона. Эти плавные волны на основе CSS позволяют отделить основную область от остального содержимого страницы. Это могло бы стать хорошим вступительным разделом, который не перегружает пользователей.
См. Pen Simple CSS Waves | Mobile &Full width by Goodkatz
CSS Анимированный градиентный фон
by AndrewГрадиенты создают отличный анимированный фон. Они заметны, не отвлекая от более важных элементов страницы. Здесь у нас есть радиальный градиент, который слегка меняет оттенки.
См. анимированный фон Pen CSS от Эндрю
Бесшовный анимированный текст CSS
Джордж Брук Использование CSS background-clip
может серьезно повлиять на элемент дизайна. Этот фрагмент добавляет к тексту заголовка плавный прокручивающийся фон, который мгновенно создает праздничное настроение.
See the Pen CSS бесшовный анимированный текст Джорджа Брука
Чистый анимированный фон CSS
Мохаммад Абдул МохайманСкорость может играть решающую роль в удобстве использования анимированного фона. Эти медленно прокручивающиеся квадраты могут крутиться и поворачиваться, но позволяют легко читать заголовок. Если вы собираетесь добавить текст поверх анимации, лучше использовать более медленное движение.
См. анимированный фон Pen Pure Css от Мохаммада Абдула Мохаймана.
Фон XI Concepts. Созданные с помощью jQuery очерченные формы приходят и уходят, напоминая клетки, размножающиеся под микроскопом.
Это может отлично подойти для главной области или даже нижнего колонтитула сайта.См. Фон Pen XI Concepts от Dhruve Shah
Анимированный фон SVG
от Josie BarkerНаконец, этот фрагмент умело использует комбинацию эффектов, которые мы видели выше. Также есть смещающиеся оттенки градиента, а также плавно трансформирующиеся формы. SVG и CSS обеспечивают бесперебойную работу. Важно отметить, что он работает так же красиво на маленьком окне просмотра, как и на рабочем столе.
См. анимированный фон Pen SVG от Джози Баркер
Выделите свой фон
Анимированный фон — это простой способ придать уникальный стиль вашему веб-сайту. Независимо от того, используете ли вы их для всей страницы или только для одного элемента, они могут помочь создать привлекательный визуальный и пользовательский интерфейс.