Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 Разработчики добавили CSS-переменные для всех компонентов, новые хелперы и утилиты, изменённые кнопки и инпуты, а также переделали документацию. И всё это вместе с прочими улучшениями под капотом.

2 Переделанная документация.Команда Bootstrap решила поработать над дизайном сайта и документации. Теперь они стали более ярким и удобными для пользования. Посмотреть новый дизайн можно на <a>сайте Bootstrap</a>.

3 Новый дизайн главной страницы BootstrapСкриншот:<a>Bootstrap</a>В самой документации разработчики привели в порядок панель навигации, что позволило им сделать боковую панель более полезной.

4 Новый дизайн документации BootstrapСкриншот:<a>Bootstrap</a>Изменённые элементы. Чтобы дизайн сайта сочетался с дизайном компонентов, разработчики решили изменитьborder-radiusдля кнопок и инпутов. Теперь кнопки выглядят так:

5 Новый дизайн кнопок (снизу старые)Скриншот:<a>Bootstrap</a>А инпуты так:

6 Новый дизайн инпутов (снизу старые)Скриншот:<a>Bootstrap</a>CSS-переменные. С этим релизом в Bootstrap появились CSS-переменные, которые позволят в реальном времени делать кастомизацию и настраивать темы. Теперь каждый компонент на странице будет иметь отдельные CSS-переменные. Например, ниже представлены переменные для кнопок:

7 --#{$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);Значения для переменных присвоены через Sass-препроцессор, поэтому Bootstrap поддерживает CSS- и Sass-кастомизацию. Например, так:

8 CSS-переменные в BootstrapСкриншот:<a>Bootstrap</a>Новые хелперы и утилиты. Они позволят быстрее создавать и модифицировать пользовательские компоненты.

9 <ul><li>Добавили хелперы<a>.text-bg-{color}</a> - они устанавливают background-color в контрасте со свойством color у элемента.</li>

10 <li>Расширили возможности<a>font-weight</a> - теперь можно добавлять .fw-semibold для полужирных шрифтов.</li>

11 <li>Изменили<a>border-radius</a> - теперь ему можно задавать свойства .rounded-4 и .rounded-5.</li>

12 </ul>Что ещё?Разработчики добавили<a>гибкий offcanvas</a>, новый Sass-файл - <a>maps.scss</a>, свойство $enable-container-classes, толстые разделители в таблицах, .form-check-reverse и поддержку чередующихся колонок, а ещё - переписали<a>Scrollspy</a>.

13 Подробнее прочитать обо всех изменениях можно на <a>сайте Bootstrap</a>.