Bootstrap

Блог Bootstrap

Новости и объявления обо всем, что связано с Bootstrap, включая новые выпуски, Темы Bootstrap, and Иконки Bootstrap.

Bootstrap 5.2.0 beta

@mdo 13 мая 2022 @hkr32 18 мая 2022

Bootstrap v5.2.0-beta1 уже доступен! Это самый крупный релиз со времен 5-й версии. В этом релизе переработанная документация, переменные CSS для всех компонентов, адаптивный offcanvas, новые хелперы и утилиты, улучшенные кнопки и элементы ввода, а также множество улучшения под капотом.

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

Редизайн документации

Bootstrap Purple™ стал намного ярче, все кажется совершенно новым. Переписана главная страница, чтобы показать все замечательные возможности Bootstrap.

Новая домашняя страницы

Посмотреть главную страницу в действии!

Новая страница документации

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

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

Пикер выбора версии документации

Обновленная панель навигации имеет новый инструмент выбора версии для версии 5.2.0 и выше. В настоящее время нет планов связывать страницы между основными версиями.

Новый поиск

Поиск документации теперь осуществляется на основе последней версии Algolia DocSearch с улучшенным дизайном, который показывает даже ваши самые последние поисковые запросы.

Усовершенствования в дизайне

Кнопки до и после:

Обновленные кнопки

Инпуты:

Updated inputs

Переменные CSS компонента

В этом выпуске все компоненты теперь включают переменные CSS, чтобы обеспечить настройку в реальном времени, более простое оформление тем и (скоро) поддержку цветового режима, начиная с темного режима. Каждая страница компонента была обновлена, чтобы включить справочное руководство по соответствующим переменным CSS. Например, кнопки:

--#{$prefix}btn-padding-x: #{$btn-padding-x};
--#{$prefix}btn-padding-y: #{$btn-padding-y};
--#{$prefix}btn-font-family: #{$btn-font-family};
@include rfs($btn-font-size, --#{$prefix}btn-font-size);
--#{$prefix}btn-font-weight: #{$btn-font-weight};
--#{$prefix}btn-line-height: #{$btn-line-height};
--#{$prefix}btn-color: #{$body-color};
--#{$prefix}btn-bg: transparent;
--#{$prefix}btn-border-width: #{$btn-border-width};
--#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-border-radius: #{$btn-border-radius};
--#{$prefix}btn-box-shadow: #{$btn-box-shadow};
--#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
--#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);

Значения практически для каждой переменной CSS назначаются через переменную Sass, поэтому настройка с помощью CSS и Sass хорошо поддерживается. Также для некоторых компонентов включены примеры настройки с помощью переменных CSS.

Кастомная кнопка

Check out all our components to see how you can customize them to your liking.

Новый _maps.scss

Bootstrap v5.2.0-beta1 представляет новый файл Sass _maps.scss, из которого извлекаются несколько карт Sass, _variables.scss, чтобы исправить проблему, из-за которой обновления исходной карты не применялись к вторичным картам, расширяющим ее. Это не идеально, но решает давнюю проблему людей при работе с настраиваемыми картами.

Например, обновления $theme-colors не применялись к другим картам, которые полагались на них $theme-colors (например, $utilities-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

Новые помощники и утилиты

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

  • Расширены font-weight utilities для включения .fw-semibold полужирных шрифтов.

  • Расширенные border-radius utilities, включающие два новых размера .rounded-4 и .rounded-5.

Expect more improvements here as v5’s development continues.

Отзывчивый offcanvas

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

И многое другое!

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

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

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

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

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

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

Скоро: Темный режим!

Большая часть работы, которую мы проделали в v5.2.0-beta1, была связана с добавлением темного режима в Bootstrap. Да, это наконец-то появится в следующем второстепенном релизе!

Темный режим

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

  • Предоставляют плагин JS для переключения цветовых режимов? Сейчас просто создаем пользовательские функции для документации.

  • Текущая реализация построена с селекторами data-theme, которые позволяют явно переключать цветовой режим (через пользовательский контроль и системные настройки) и настраиваемые цветовые режимы за пределами light и dark.

  • Добавляют довольно много новых цветов снаружи $theme-colors, чтобы улучшить тонкую настройку пользовательского интерфейса. Они реализуются с помощью селекторов :root и [data-theme="{theme}"] для глобального использования.

Также в версии 5.3.0

Поддержите команду

Посетите страницу Open Collective или профили членов команды на GitHub, чтобы поддержать тех, кто занимается поддержкой Bootstrap.

Похожие посты