Что нового в 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 data-bs-no-jquery="true">
</body>

Как Bootstrap работает без jQuery? Например, в версии 4 вы должны использовать следующий код в 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().

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

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

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

• Поддержка Firefox и Chrome начиная с версии 60.
• Поддержка Safari и iOS начиная с версии 12.
• Поддержка браузера Android и 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>элементом.

Вот пример того, как Blockquotes теперь находятся в Bootstrap 5:

<figure>
  <blockquote class="blockquote">
    <p>All our dreams can come true, if we have the courage to pursue them.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Walt Disney</cite>
  </figcaption>
</figure>

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

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

<table class="table table-bordered border-danger w-50 mx-auto">
  <thead>
    <tr>
      <td>Name</td>
      <td>Age</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Brian</td>
      <td>25</td>
    </tr>
    <tr>
      <td>Sam</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

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

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

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">SitePoint</li>
  </ol>
</nav>

• Именование классов, которые используются leftи rightдля обозначения позиции для использования startи endбыл изменен. Например,.dropleftи.droprightв раскрывающихся списках заменяются на.dropstartи.dropendсоответственно.
• Аналогично предыдущему пункту, полезные классы, используемые lдля leftи rдля rightтеперь использовать sдля startи eдля endсоответственно. Например,.mr-*сейчас.me-*.
• .form-control-rangeКласс, который был использован для входов диапазона теперь.form-range.
• Желоба теперь установлены remsвместо прежних px.
• .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 &times;.
• Выпадающие разделители теперь темнее для лучшего контраста.
• Теперь содержимое панели навигации должно быть заключено в контейнер. Например, в Bootstrap 4:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  ...
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    ...
  </div>
</nav>

• .arrowКласс поповера компонентов теперь заменен.popover-arrow, и класс.arrowв Tooltip компонентов теперь заменен.tooltip-arrow.
• Опция всплывающего окна whiteListбыла переименована в allowList.
• Продолжительность тоста по умолчанию изменена на 5 секунд.
• Значение по умолчанию для fallbackPlacementsкомпонентов всплывающей подсказки, раскрывающегося списка и всплывающего окна было изменено на массив [‘top’, ‘right’, ‘bottom’, ‘left’].
• .text-monospaceбыл переименован в.font-monospace.
• .font-weight-*был переименован в.fw-*и.font-style-*в.fst-*.
• .rounded-smи.rounded-lgтеперь заменены диапазоном округленных классов.rounded-*от 0 до 3.

What’s Been Dropped

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

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

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

• Как упоминалось в предыдущем разделе, поддержка IE полностью прекращена.
• Цветовые классы значков (например,.badge-primary) были отброшены в пользу использования служебных классов цвета (например,.bg-primary).
• Класс.badge-pillзначка, который придавал значку стиль таблетки, был отменен в пользу использования.rounded-pill, что дает тот же результат.
• Класс.btn-blockкнопки был удален, так как того же результата можно достичь с помощью таких служебных классов отображения, как.d-block.
• .card-columnsРанее доступный макет карты Masonry был удален из-за множества побочных эффектов.
• flipВариант для раскрывающихся компонентов были удалены, в пользу конфигураций Поппера.
• Компонент 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.

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

<div class="input-group">
  <span class="input-group-text">First and last name</span>
  <input type="text" aria-label="First name" class="form-control">
  <input type="text" aria-label="Last name" class="form-control">
</div>

• .form-group,,.form-rowи.form-inlineбыли отброшены в пользу классов макета.
• .form-textбольше не имеет установленного displayсвойства. Отображение элемента будет зависеть от того, является ли сам элемент блоком или встроенным элементом.
• Значки проверки были удалены для <select>элементов с multiple.
• .card-deckКласс был удален в пользу классов сетки.
• Отрицательные поля по умолчанию отключены.
• .embed-responsive-item элементы теперь удаляются в пользу применения стиля ко всем дочерним элементам ratios, что ранее было адаптивным встраиванием (подробнее об этом в следующем разделе).

Что нового

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

Адаптивный размер шрифта теперь включен по умолчанию.

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

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

Если вы используете файлы Сасс для 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 RTL Bootstrap:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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 для каждого компонента на его странице. Раньше была просто страница темы, на которой были некоторые подробности о том, как изменить переменные темы в Bootstrap. Теперь есть отдельный раздел настройки, в котором есть более подробная информация о том, как настроить тему Bootstrap.

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

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

Accordion

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

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in felis dignissim, imperdiet nulla vitae, condimentum nulla. Ut scelerisque a nisl sit amet facilisis. Etiam blandit iaculis tellus, vitae condimentum leo congue a. Vivamus in vehicula massa. Pellentesque libero libero, commodo lacinia volutpat non, tincidunt at lectus. Maecenas ipsum turpis, viverra vitae lacus eu, fringilla ultricies erat. Aenean hendrerit maximus sodales.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Quisque sapien augue, ornare id leo a, tristique elementum justo. Praesent non nulla sagittis, sollicitudin justo id, varius erat. Nunc sed pharetra nisl. Cras et suscipit felis, in lacinia sapien. Integer venenatis sagittis massa, eu eleifend nibh venenatis in. Pellentesque a aliquet urna. Curabitur tortor metus, ultrices sed mi at, sagittis imperdiet turpis. Suspendisse nec luctus nunc. Fusce in arcu quis lacus mollis ultrices.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Item #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Praesent nec ipsum scelerisque dui condimentum pellentesque eu at lectus. Vivamus purus purus, bibendum in vestibulum ac, pharetra sit amet sapien. Nunc luctus, orci vel luctus cursus, nibh nisl ullamcorper ipsum, eu malesuada arcu augue id nisi. In auctor mi ac ante tincidunt tincidunt.
      </div>
    </div>
  </div>
</div>

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

Offcanvas

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

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#leftOffcanvas" aria-controls="leftOffcanvas">
  Left Offcanvas (default)
</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#topOffcanvas" aria-controls="topOffcanvas">
  Top Offcanvas
</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#rightOffcanvas" aria-controls="rightOffcanvas">
  Right Offcanvas
</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#bottomOffcanvas" aria-controls="bottomOffcanvas">
  Bottom Offcanvas
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="leftOffcanvas" aria-labelledby="leftOffcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="leftOffcanvasLabel">Left Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <ul>
      <li>
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">Posts</a>
      </li>
      <li>
        <a href="#">Settings</a>
      </li>
    </ul>
  </div>
</div>

<div class="offcanvas offcanvas-top" tabindex="-1" id="topOffcanvas" aria-labelledby="topOffcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="topOffcanvasLabel">Top Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <ul>
      <li>
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">Posts</a>
      </li>
      <li>
        <a href="#">Settings</a>
      </li>
    </ul>
  </div>
</div>

<div class="offcanvas offcanvas-end" tabindex="-1" id="rightOffcanvas" aria-labelledby="rightOffcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="rightOffcanvasLabel">Right Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <ul>
      <li>
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">Posts</a>
      </li>
      <li>
        <a href="#">Settings</a>
      </li>
    </ul>
  </div>
</div>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="bottomOffcanvas" aria-labelledby="bottomOffcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="bottomOffcanvasLabel">Bottom Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <ul>
      <li>
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">Posts</a>
      </li>
      <li>
        <a href="#">Settings</a>
      </li>
    </ul>
  </div>
</div>

Floating Label

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

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="email" placeholder="name@example.com">
  <label for="email">Email address</label>
</div>

<div class="form-floating mb-3">
  <select class="form-select" id="occupation" aria-label="Occupation">
    <option selected>Designer</option>
    <option value="1">Developer</option>
    <option value="2">Writer</option>
    <option value="3">Other</option>
  </select>
  <label for="floatingSelect">Occupation</label>
</div>

<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="message" style="height: 100px"></textarea>
  <label for="message">Message</label>
</div>

Other additions

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

• .row-cols-autoБыл добавлен класс, который позволяет столбцам принимать естественную ширину.
• Добавлен новый служебный класс для обоснования вызываемого содержимого.justify-content-evenly.
• Раньше желоба между колоннами выполнялись с помощью распорок. Теперь вы можете установить промежуток между столбцами с помощью новой утилиты макета Gutter layout. Чтобы установить горизонтальный желоб, используйте.gx-*. Чтобы установить вертикальный желоб, используйте.gy-*. Чтобы установить желоб как по горизонтали, так и по вертикали, используйте.g-*.
• startСценарий был добавлен в пакет Bootstrap при установке с НПМ или пряжей. startСценарий компилирует CSS и файлы JavaScript, строит документацию, а затем запускает локальный сервер.
• С таблицами теперь можно использовать служебные классы вертикального выравнивания.
• Добавлен новый класс.caption-top, который позволяет размещать заголовок таблицы вверху, а не внизу.
• Теперь есть возможность изменить разделитель в Breadcrumb с помощью переменной CSS —bs-breadcrumb-divider.

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

<nav style="--bs-breadcrumb-divider: '>>';" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

• Есть новый темный вариант для каруселей, использующих этот класс.carousel-dark, и новый темный вариант для использования выпадающих списков.dropdown-menu-dark.
• В раскрывающемся списке есть новый параметр автоматического закрытия, который может изменить поведение по умолчанию при закрытии раскрывающегося меню. По умолчанию раскрывающиеся меню закрываются при нажатии вне раскрывающегося списка или одного из раскрывающихся элементов. Вы можете изменить это, установив для data-bs-auto-closeатрибута data значение inside, которое закрывает раскрывающийся список при нажатии на один из раскрывающихся элементов, но не при щелчке снаружи. Вы также можете установить его outside, чтобы раскрывающийся список закрывался только при щелчке за пределами раскрывающегося списка. Наконец, вы можете установить его так, чтобы falseон закрывался только при повторном нажатии кнопки раскрывающегося списка. Если вы инициализируете раскрывающийся список с помощью JavaScript, вы можете использовать этот autoCloseпараметр вместо атрибута данных. Вот пример его использования:
• Улучшен стиль ввода файлов в формах.
• Был добавлен новый ввод цвета с использованием класса.form-control-color.
• Был добавлен новый тип ввода списков данных, который имитирует поле выбора с опережением ввода. Вот пример:

<div class="btn-group">
  <button class="btn btn-primary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

• В переменные Sass добавлены новые цветовые оттенки и оттенки.
• Есть два новых размера заголовка дисплея.display-5и.display-6.
• Появился новый белый вариант кнопок закрытия.btn-close-white.
• Выпадающие списки теперь могут быть.dropdown-itemsобернуты <li>элементами.
• Элементы в группах списков теперь можно нумеровать с помощью нового класса.list-group-numbered.
• В transitionкомпоненте Pagination есть свойства для ссылок, улучшающие его стиль.
• Есть новый.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-16×9.
• Новая опция popperConfigбыла добавлена ​​в раскрывающиеся списки, всплывающие окна и всплывающие подсказки. Эту опцию можно использовать для внесения изменений в конфигурации Поппера.
• Есть.fs-*утилиты для размеров шрифтов, так как RFS теперь включен по умолчанию.

Заключение

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