Что нового в Bootstrap 5

Bootstrap является одной из самых популярных библиотек CSS. Она позволяет разработчикам легко использовать красивые стили и компоненты, а также создавать адаптивные веб-сайты. Использование Bootstrap может сэкономить время разработчикам, особенно при работе с компонентами, которые используются практически в каждом проекте.

Bootstrap 5 (текущая основная версия, выпущенная в мае 2021 года) принесла с собой множество изменений и улучшений, включая добавление новых компонентов, новых классов, новый стиль для старых компонентов, обновленную поддержку браузеров, удаление некоторых старых компонентов и многое другое.

В этой статье мы рассмотрим, что изменилось в Bootstrap 5, что было удалено, и, что самое интересное, что нового.

Когда использовать Bootstrap (и когда нет)

Bootstrap позиционирует себя как “самый популярный в мире фреймворк для создания адаптивных, мобильных веб-сайтов”, и с 152 тысячами звезд на GitHub, я не думаю, что эта претензия чрезмерна. Особенно для начинающих, Bootstrap является отличным способом начать создание современных и чистых веб-сайтов. Он упрощает реализацию сложных, мобильных проектов и предоставляет множество компонентов, которые, вероятно, потребуются в нескольких проектах.

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

Вам также следует знать, однако, что Bootstrap не является универсальным решением. Для непосвященных, Bootstrap облегчает создание запутанного и сложного разметки. Это также довольно тяжелый библиотекой в плане килобайт (хотя это улучшается с каждым релизом), поэтому это может быть не лучшим выбором, если вы используете только одну или две его функции. Как и в случае с любой абстракцией, она окажет огромную помощь, если у вас есть хорошее понимание базовой технологии и вы сможете принять обоснованное решение о том, когда ее использовать.

Обновление с Bootstrap 4 до 5

Обновление с Bootstrap 4 до 5 в целом довольно просто. Большинство компонентов, их классов и вспомогательных классов, доступных в Bootstrap 4, по-прежнему доступны в Bootstrap 5. Главное, на что следует обратить внимание при миграции, это то, были ли классы или компоненты, которые вы используете удалены. Если они были удалены, есть замены или способы достичь того же результата с помощью вспомогательных классов. Во-вторых, следует обратить внимание на переход от атрибутов data-* к data-bs-* в компонентах, которым для своей функциональности требуется JavaScript. (Мы подробнее рассмотрим это в следующем разделе.)

Если вы используете Sass-файлы Bootstrap, некоторые переменные и миксины были переименованы. В Bootstrap 5 есть обширный и подробный раздел обо всем настройке, а также сведения о Sass-переменных и миксинах для каждого компонента на соответствующих страницах документации.

Что Изменилось

Bootstrap 5 вносит основные изменения в библиотеку Bootstrap, включая изменения в требуемых зависимостях, поддержке браузеров и многое другое. Также вносятся изменения в компоненты и классы, которые мы всегда использовали в предыдущих версиях.

jQuery больше не является зависимостью

Как основное изменение по сравнению с предыдущими версиями, jQuery больше не является зависимостью Bootstrap. Теперь вы можете использовать Bootstrap во всей своей красе без него, но все еще нужен Popper.js. Это изменение упрощает использование Bootstrap в проектах, которые не требуют или не используют jQuery — например, при использовании Bootstrap с React.

Вы все еще можете использовать jQuery с Bootstrap, если он является частью вашего сайта. Если Bootstrap обнаружит jQuery в объекте window, он автоматически добавит все компоненты в систему плагинов jQuery. Таким образом, если вы переходите от v4 к v5, вам не нужно беспокоиться об этом изменении, и вы все еще можете использовать jQuery с Bootstrap по мере необходимости.

Но что, если вы используете jQuery на своем сайте, но не хотите, чтобы Bootstrap использовал jQuery? Вы можете сделать это, добавив атрибут data-bs-no-jquery к элементу body документа:

<body data-bs-no-jquery="true">
</body>

Как работает Bootstrap без jQuery? Например, в v4 вы использовали бы следующий код на JavaScript для создания элемента Toast:

$('.toast').toast()

В Bootstrap 5 вы можете использовать тот же код для создания элемента Toast, если ваш сайт уже использует jQuery. Без jQuery вам нужно будет использовать что-то вроде следующего кода для создания элемента Toast:

const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
  return new bootstrap.Toast(toastEl)
})

Это просто использует Vanilla JavaScript для запроса документа на наличие элементов с классом .toast, затем инициализирует компонент Toast на элементе с помощью new bootstrap.Toast().

Изменение поддержки браузеров

До версии 4, Bootstrap поддерживал Internet Explorer (IE) 10 и 11. Начиная с Bootstrap 5, полная поддержка IE была прекращена. Таким образом, если вам нужно поддерживать IE на вашем веб-сайте, вам, вероятно, следует быть осторожным при переходе на v5.

Другие изменения в поддержке браузеров включают:

• Поддержка Firefox и Chrome теперь начинается с версии 60
• Поддержка Safari и iOS теперь начинается с версии 12
• Поддержка Android Browser и WebView теперь начинается с версии 6

Изменение атрибутов данных

Bootstrap 5 изменил названия атрибутов данных, которые обычно используются его компонентами, использующими JavaScript в качестве части своей функциональности. Ранее большинство компонентов, которые зависели от некоторых функций JavaScript, имели атрибуты данных, начинающиеся с data-. Например, чтобы создать компонент Tooltip в Bootstrap 4:

<button 
  type="button" 
  class="btn btn-secondary" 
  data-toggle="tooltip" 
  data-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

Обратите внимание на использование data-toggle и data-placement. В Bootstrap 5 атрибуты данных для этих компонентов теперь начинаются с data-bs для легкого пространства имен атрибутов Bootstrap. Например, чтобы создать компонент Tooltip в Bootstrap 5:

<button 
  type="button" 
  class="btn btn-secondary" 
  data-bs-toggle="tooltip" 
  data-bs-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

Вместо использования data-toggle и data-placement мы используем data-bs-toggle и data-bs-placement. Если вы используете JavaScript для создания компонентов в Bootstrap, вероятно, не потребуется вносить какие-либо изменения. Однако, если ваши компоненты работают только благодаря атрибутам данных, вам нужно изменить все атрибуты данных, которые начинаются с data, чтобы они начались с data-bs.

Исправленные ошибки

В документации Bootstrap 4 под Браузеры и устройства приведена таблица ошибок, возникающих в некоторых браузерах. Эти ошибки больше не упоминаются в этом же списке для Bootstrap 5. В списке указаны следующие:

• Стили при наведении применялись к элементам при тач-событиях на iOS, что было нежелательно, так как расценивалось как непредвиденное поведение.
• Использование .container в Safari 8 и выше приводило к небольшому размеру шрифта при печати.
• Радиус границы переопределялся обратной связью по валидации (но мог быть исправлен добавлением дополнительного класса .has-validation).

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

Другие изменения

Существует множество других изменений, которые либо незначительны, либо не вызывают кардинальных, заметных изменений. Эти изменения включают:

• Bootstrap 5 теперь использует Popper v2. Убедитесь в обновлении вашей версии Popper. Popper v1 больше не будет работать, так как Bootstrap 5 требует @popperjs/core вместо предыдущего popper.js.

• Bootstrap 5 теперь можно использовать как модуль в браузере с версией Bootstrap созданной как модуль ECMAScript.

• Так как Libsass и Node Sass (которые использовались в Bootstrap 4) теперь устарели, Bootstrap 5 использует Dart Sass для компиляции исходных файлов Sass в CSS.

• Произошли изменения в некоторых значениях переменных Sass, например, $zindex-modal, который изменился с 1050 на 1060, $zindex-popover — с 1060 на 1070, и еще несколько. По этой причине рекомендуется проверить переменные Sass каждого компонента или классов утилит в документации Bootstrap 5.

• Ранее для скрытия элемента, сохраняя его обнаруживаемым для доступных технологий, использовался класс .sr-only. Теперь этот класс заменен на .visually-hidden.

• Ранее для того чтобы сделать интерактивный элемент скрытым, но при этом сохранить его обнаруживаемым для доступных технологий, требовалось использовать как классы .sr-only, так и .sr-only-focusable. В Bootstrap 5 достаточно использовать только .visually-hidden-focusable без .visually-hidden.

• Цитаты с указанным источником теперь обертываются элементом <figure>.

  Вот пример того, как теперь выглядят цитаты в Bootstrap 5:

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

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

  Вот пример использования утилит границ с таблицами в Bootstrap 5:

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

  Вот пример стиля хлебных крошек в Bootstrap 5:

• Именование классов, которые использовали left и right для обозначения позиции, было изменено на использование start и end. Например, .dropleft и .dropright в выпадающих меню заменены на .dropstart и .dropend соответственно.

• Аналогично предыдущему пункту, утилитные классы, которые использовали l для left и r для right, теперь используют s для start и e для end соответственно. Например, .mr-* теперь .me-*.

• Класс .form-control-range, используемый для слайдеров, теперь называется .form-range.

• Отступы теперь устанавливаются в ремах вместо предыдущих пикселов.

• .no-gutters переименован в .g-0 в рамках новых классов для отступов (более подробно об этом в следующих разделах).

• Ссылки теперь подчеркнуты по умолчанию, даже когда не наведен курсор.

• Названия классов для пользовательских элементов формы изменились с .custom-* на классы компонентов формы. Например, .custom-check заменен на .form-check, .custom-select заменен на .form-select и так далее.

• Добавление .form-label к лейблам теперь обязательно.

• Оповещения, хлебные крошки, карты, выпадающие списки, списки групп, модальные окна, подсказки и подменю теперь используют одинаковые значения отступов с использованием переменной $spacer.

• По умолчанию отступы в элементах меток теперь изменены с .25em/.5em на .35em/.65em.

• Оболочки для переключающих кнопок используются с флажками и радио-кнопками. Теперь разметка также упрощена. В Bootstrap 4 переключающая кнопка-флажок достигалась с помощью следующей разметки:

  <div class="btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary active">
      <input type="checkbox" checked> Checked
    </label>
  </div>
  

  В Bootstrap 5 это можно сделать проще:

  <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
  <label class="btn btn-primary" for="btn-check">Checked</label>
  

• Активное состояние active и состояние наведения hover кнопок теперь имеют повышенный контраст в цвете.

• Иконки-стрелки для карусели теперь используют SVG из Bootstrap Icons.

• Класс кнопки закрытия теперь переименован с .close на .btn-close и использует иконку SVG вместо ×.

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

• Навигационное меню теперь следует обернуть в контейнерный элемент. Например, в Bootstrap 4:

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Навигационное меню</a>
    ...
  </nav>
  

  Становится в Bootstrap 5:

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Навигационное меню</a>
      ...
    </div>
  </nav>
  

• Класс .arrow в компонентах popover теперь заменен на .popover-arrow, а класс .arrow в компонентах Tooltip теперь заменен на .tooltip-arrow.

• Опция popover whiteList была переименована в allowList.

• Значение по умолчанию для Toast длительности изменено на 5 секунд.

• Значение по умолчанию для fallbackPlacements в компонентах tooltip, dropdown и popover было изменено на массив ['top', 'right', 'bottom', 'left'].

• .text-monospace переименован в .font-monospace.

• .font-weight-* переименован в .fw-* и .font-style-* в .fst-*.

• .rounded-sm и .rounded-lg заменены на ряд классов с закруглением .rounded-* от 0 до 3.

Что Убрали

Изменения могут иметь цену. При выходе новой версии, которая приносит изменения и улучшения, также удаляются некоторые старые функции, которые ранее поддерживались. В этом новом релизе некоторые компоненты, утилитные классы или другие функции Bootstrap были удалены.

Большинство элементов, удаленных из Bootstrap 5, были исключены, потому что тот же эффект можно достичь с помощью классов утилит, а не создания их в качестве автономных компонентов. Кроме того, некоторые удаленные элементы оказались неиспользуемыми или ненужными.

Вот список, что было удалено из Bootstrap 5:

• Как упоминалось в предыдущем разделе, полностью прекращена поддержка IE.

• Классы цветов значков (например, .badge-primary) были удалены в пользу использования классов утилит цвета (например, .bg-primary).

• Класс .badge-pill, который придавал значку форму таблетки, был удален в пользу использования .rounded-pill, что дает тот же результат.

• Класс кнопки .btn-block был удален, так как тот же результат можно получить с помощью классов утилиты отображения типа .d-block.

• Ранее доступная масонская компоновка карточек .card-columns была удалена, так как она имела множество побочных эффектов.

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

• Компонент Jumbotron был удален, так как тот же результат можно достичь с помощью классов утилит.

• Некоторые утилитные классы сортировки (.order-*) были удалены, поскольку раньше они варьировались от 1 до 12. Теперь они варьируются от 1 до 5.

• Компонент медиа был удален, так как тот же результат можно получить с помощью утилитных классов.

• Классы .thead-light и .thead-dark были удалены, так как классы вариантов .table-* могут быть применены ко всем элементам таблицы.

• Класс .pre-scrollable был удален, так как он используется редко.

• Класс .text-justify был удален из-за проблем с адаптивностью, как и класс .text-hide, потому что его метод устарел и не должен использоваться. А классы .text-* больше не добавляют состояния наведения или фокуса к ссылкам. Эти классы .text-* следует заменить на классы .link-*.

• Группы вводов, содержащие несколько входов или компонентов, больше не нуждаются в использовании .input-group-append и .input-group-prepend. Элементы, которые должны быть в группе, могут быть добавлены непосредственно как дочерние элементы класса .input-group.

  Вот пример использования групп вводов с несколькими входами:

• .form-group, .form-row, и .form-inline были удалены в пользу классов макета.

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

• Иконки валидации были удалены для элементов <select> с multiple.

• Класс .card-deck был удален в пользу классов сетки.

• Отрицательные отступы отключены по умолчанию.

• .embed-responsive-item элементы теперь удалены в пользу применения стиля на всех детей соотношений, которые ранее были Responsive embeds (подробнее об этом в следующем разделе).

Что нового

Наконец, Bootstrap вносит множество захватывающих дополнений в свою библиотеку в версии 5. Некоторые из этих изменений включают новые функции, новые поддерживаемые концепции, новые компоненты, новые классы утилит и многое другое.

Респонсивные размеры шрифта теперь включены по умолчанию

Респонсивные размеры шрифта (RFS) были в предыдущих версиях Bootstrap, но по умолчанию были отключены. Bootstrap 5 включает RFS по умолчанию, делая шрифты в Bootstrap более респонсивными. RFS — это сторонний проект, созданный Bootstrap для начального масштабирования и изменения размеров шрифтов респонсивно. Теперь он способен делать то же самое для свойств, таких как отступы, поля, тень и др.

Делает он это, по сути, путем расчета наиболее подходящих значений на основе размеров браузера, и эти расчеты переводятся в функции calc при компиляции. Использование RFS также отказывается от предыдущего использования px в пользу rem, поскольку это помогает достичь лучшей респонсивности.

Если вы используете Sass-файлы для Bootstrap, теперь вы можете использовать миксины, созданные RFS, включая font-size, margin, padding и др., что позволяет вам убедиться, что ваши компоненты и стили респонсивны.

Поддержка справа налево

Bootstrap 5 добавляет поддержку справа налево (RTL) с использованием RTLCSS. Поскольку Bootstrap используется по всему миру, это важный шаг, чтобы обеспечить поддержку RTL из коробки. По этой причине Bootstrap 5 отказался от специфического именования для направлений (например, использование left и right) в пользу start и end. Это делает Bootstrap достаточно гибким, чтобы работать как с сайтами слева направо (LTR), так и с сайтами справа налево (RTL). Например, .dropleft теперь .dropstart, .ml-* теперь .ms-*, и многое другое.

Чтобы Bootstrap распознал и применил стили RTL на вашем сайте, вам нужно установить атрибут dir у <html> равным rtl и добавить атрибут lang с языком RTL сайта. Например, lang="ar".

Наконец, вам нужно будет включить CSS-файл Bootstrap для RTL:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

И теперь ваш сайт будет поддерживать RTL.

Новый порог переключения макета

Bootstrap 5 добавляет поддержку нового порога переключения макета xxl, предназначенного для устройств с шириной не менее 1400px. Ранее самым высоким порогом переключения был xl, который предназначался для устройств с шириной не менее 1200px. Это изменение позволяет добиться лучшей адаптивности для устройств с большими экранами, так как порог xl был недостаточным.

Использование новой точке останова аналогично всем другим точкам останова. Например, чтобы применить отступы для устройств с шириной экрана больше или равной 1400px, вы можете сделать это, используя класс .p-xxl-2.

Улучшенная документация

Хотя это и не является частью библиотеки сами по себе, стоит отметить улучшение в документации Bootstrap. В Bootstrap 5 документация имеет более упорядоченное содержимое, поскольку компоненты, которые имеют более подробные сведения, теперь имеют свои собственные разделы. Например, компонент Form в Bootstrap 4 был всего лишь одной страницей с всеми компонентами, сбитыми в кучу. В Bootstrap 5 документация компонента Form представляет собой отдельный раздел с подразделами для различных подкомпонентов, включая Form Control, Select, Input Groups и другие.

Кроме того, навигация по документации теперь упрощена благодаря боковой панели, особенно для меньших экранов. В Bootstrap 4 боковая панель содержания не была видна на меньших устройствах, что затрудняло поиск требуемого раздела на странице. В Bootstrap 5 содержание всегда видно на всех размерах экрана.

Более того, в Bootstrap 5 вы можете найти все Sass-переменные, миксины и функции для каждого компонента на его странице. Ранее была только страница Theming с некоторыми сведениями о том, как изменить переменные темы в Bootstrap. Теперь есть раздел настройки, который содержит более подробную информацию о том, как настроить тему Bootstrap.

Новые компоненты

Bootstrap 5 вносит новые компоненты в библиотеку. Некоторые из этих компонентов были частью других компонентов и теперь являются самостоятельными компонентами.

Аккордеон

Ранее Аккордеон был частью компонента Collapsible, а не собственным компонентом. В Bootstrap 5, Аккордеон представляет собой новый компонент. Вместе с Аккордеоном появляется новая класс, .accordion, который содержит внутри список элементов аккордеона. Кроме того, у аккордеонов есть новый стиль по сравнению с предыдущим стилем в Bootstrap 4. Вот пример компонента аккордеона:

Bootstrap 5 также добавляет некоторые классы для изменения стиля Аккордеона. Например, .accordion-flush удаляет некоторые стили из стандартного Аккордеона, такие как цвета фона или границ. Вы также можете сделать элемент аккордеона всегда открытым, удалив атрибут data-bs-parent из элемента .accordion-collapse.

Offcanvas

Еще одним новым компонентом является Offcanvas, который позволяет создавать накладные боковые панели. Это та самая боковая панель, которая обычно используется на сайтах для отображения меню на меньших устройствах. Вы можете разместить его на любой стороне страницы, используя .offcanvas-start для левой стороны в LTR, .offcanvas-top для верхней, .offcanvas-end для правой стороны в LTR и .offcanvas-bottom для нижней. Вы также можете указать, должен ли Offcanvas иметь задний план или нет. Вот пример использования компонента Offcanvas:

Плавающая метка

Плавающая метка — это новый компонент Form. Он позволяет создать поле ввода, метка которого изначально выглядит как заполнитель, а затем, когда поле получает фокус, метка перемещается вверх поля над значением. Также работает с элементами <select> и <textarea>. Вот пример использования плавающих меток:

Другие дополнения

Помимо новых компонентов, добавлены новые классы для существующих компонентов, новые вспомогательные классы, новые классы-помощники и многое другое. Вот список всех других новых дополнений в Bootstrap 5:

• Добавлен класс .row-cols-auto, который позволяет столбцам принимать свою естественную ширину.

• A new utility class has been added to justify content called .justify-content-evenly.

• Ранее отступы между столбцами достигались с помощью вспомогательных средств расстояния. Теперь вы можете установить отступ между столбцами с помощью нового вспомогательного средства Gutter макета. Для установки горизонтального отступа используйте .gx-*. Для установки вертикального отступа используйте .gy-*. Для установки отступа как горизонтального, так и вертикального, используйте .g-*.

• A start script has been added to the Bootstrap package when installed with npm or Yarn. The start script compiles the CSS and JavaScript files, builds the documentation, then starts a local server.

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

• A new class .caption-top has been added, which allows placing the caption of a table at the top rather than at the bottom.

• Теперь есть возможность изменить разделитель в Breadcrumb с помощью CSS-переменной --bs-breadcrumb-divider.

  Вот пример изменения разделителя на >>:

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

• В Dropdown добавлена новая опция автоматического закрытия, которая может изменить стандартное поведение закрытия меню Dropdown. По умолчанию, выпадающие меню закрываются при клике вне области выпадающего меню или одного из пунктов меню. Вы можете изменить это, установив атрибут данных data-bs-auto-close в inside, что заставит выпадающее меню закрываться при клике на один из пунктов меню, но не при клике вне его. Также можно установить его в outside, что заставит выпадающее меню закрываться только при клике вне области меню. Наконец, можно установить его в false, что заставит меню закрываться только при повторном клике на кнопку выпадающего меню. Если вы инициализируете выпадающее меню с помощью JavaScript, вы можете использовать опцию autoClose вместо атрибута данных. Вот пример его использования:

• Теперь для элементов ввода файлов в формах доступно улучшенное оформление.

• A new color input has been added, using the class .form-control-color.

• A new datalists input type has been added, which simulates a typeahead select field. Here’s an example:

• В переменные Sass добавлены новые оттенки и тени цветов.

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

• Добавлена новая белая вариация для кнопок закрытия .btn-close-white.

• Теперь в Dropdown могут быть обернуты в элементы <li> элементы .dropdown-items.

• Элементы в списках групп теперь могут быть пронумерованы с использованием нового класса .list-group-numbered.

• Для ссылок в компоненте пагинации теперь доступны свойства transition, что улучшает его внешний вид.

• Добавлен новый класс .bg-body, который устанавливает цвет фона тела в белый.

• Добавлены новые классы утилиты положения для установки свойств top, left, right или bottom элемента. Например, .top-0.

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

• Добавлены новые утилиты ширины границы классов .border-* от 1 до 5.

• Добавлена новая утилита отображения .d-grid и новая утилита зазора .gap.

• Добавлены новые утилиты высоты строки .lh-1, .lh-sm, .lh-base и .lh-lg.

• Добавлены новые вспомогательные средства соотношения, заменяющие ранее используемые вспомогательные средства встраиваемых элементов с отзывчивым дизайном. Имена классов переименованы, заменив embed-responsive на ratio и by на x. Например, ранее .embed-responsive-16by9 теперь .ratio-16x9.

• A new option popperConfig has been added to Dropdowns, Popovers and Tooltips. This option can be used to make changes to Popper’s configurations.

• Существуют .fs-* утилиты для размеров шрифта, так как RFS теперь включено по умолчанию.

Заключение

Bootstrap был одним из ведущих библиотек CSS на протяжении большей части последнего десятилетия. Он позволяет разработчикам легко создавать адаптивные веб-сайты и обеспечивать хорошее качество пользовательского опыта. С добавлениями и изменениями в Bootstrap 5 этот процесс станет еще проще и позволит улучшить дизайн веб-сайтов и обеспечить хороший пользовательский опыт. Если вы используете Bootstrap 4 и думаете о переходе на Bootstrap 5, миграция легка и вам, вероятно, не придется вносить много изменений.

Часто задаваемые вопросы (FAQ) о Bootstrap 5