Компоненты — Bootstrap 5: Основы верстки

• Компоненты в Bootstrap
  • Компонент «Кнопка»
• Выводы

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

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

Для создания таких элементов используются компоненты — готовые классы для создания блоков на странице.

В этом уроке разберем особенности компонентов и на примере компонента кнопки рассмотрим сценарии использования.

Компоненты в Bootstrap

Компоненты — это готовые блоки, которые содержат частоиспользуемые элементы страницы. Например: карточки товара, формы, кнопки.

Так как компоненты являются частью Bootstrap, то они хорошо оптимизированы и имеют разные варианты использования.

Основные особенности готовых компонентов в Bootstrap:

• Адаптивность. Компоненты адаптированы для разных разрешений экрана в рамках сетки Bootstrap
• Модульность. Компоненты независимы и могут комбинироваться друг с другом в разных последовательностях. Их часто можно использовать внутри друг друга. Например, внутри компонента шапки могут использоваться компоненты кнопок
• Настройка. Для многих компонентов существует несколько вариантов использований и дизайна. Для этого используются дополнительные классы, которые описаны в документации

Рассмотрим использование компонентов на примере кнопок.

Компонент «Кнопка»

Кнопки — одни из самых распространенных компонентов в Bootstrap. Они используются по всему сайту: от шапки до самого футера.

Как и большинство компонентов, кнопки создаются с помощью нескольких типов классов:

• Базовый или структурный класс компонента
• Класс варианта компонента

Так достигается отделение структуры компонента от его оформления. Такой подход в способах организации стилей называется OOCSS или Объектно-ориентированный CSS. Подробнее о подходе вы можете прочитать в нашем блоге, ссылка на статью будет в конце урока.

Структурный класс для кнопок — btn. Применив его на любой участок верстки, вы добавите стили, которые характерны для кнопок в Bootstrap: отступы, стили при наведении и нажатии, размер шрифта, выравнивание:

<button type="button" class="btn">Я — базовая кнопочка</button>

Codepen

Нажмите на кнопку, чтобы увидеть стили, которые применяются при активном псевдоклассе :active.

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

Например, чтобы покрасить кнопку, используется дополнительный класс btn-цвет. В Bootstrap используется несколько основных цветов, которые названы по их смыслу:

• primary
• secondary
• success
• danger
• warning
• info
• light
• dark

Подставим разные классы и посмотрим, как изменится внешний вид кнопок:

<div class="btn-group-vertical gap-2">
  <button type="button" class="btn btn-primary">Я — кнопочка</button>
  <button type="button" class="btn btn-secondary">Я — кнопочка</button>
  <button type="button" class="btn btn-success">Я — кнопочка</button>
  <button type="button" class="btn btn-danger">Я — кнопочка</button>
  <button type="button" class="btn btn-warning">Я — кнопочка</button>
  <button type="button" class="btn btn-info">Я — кнопочка</button>
  <button type="button" class="btn btn-light">Я — кнопочка</button>
  <button type="button" class="btn btn-dark">Я — кнопочка</button>
</div>

Codepen

Второстепенные классы могут менять не только расцветку компонента, но и изменять его общую структуру. Для кнопок одни из таких классов — это btn-lg и btn-sm. Они изменяют отступы, размер шрифта и их базовый размер:

<div class="btn-group-vertical gap-2">
  <button type="button" class="btn btn-lg btn-primary">Я — большая кнопочка</button>
  <button type="button" class="btn btn-primary">Я — обычная кнопочка</button>
  <button type="button" class="btn btn-sm btn-primary">Я — маленькая кнопочка</button>
</div>

Codepen

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

Выводы

В этом уроке мы разобрали, что такое компоненты в Bootstrap и их особенности:

• Адаптивность
• Модульность
• Настраиваемость

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

На примере компонента кнопок мы узнали, что компоненты состоят из нескольких основных частей:

• Главный структурный класс, который указывает на сам компонент
• Классы оформления, которые позволяют добавить стили компонентам и изменять их в разных частях макета

Самостоятельная работа

Используя компонент .card, создайте карточки товара в ваш макет. Внизу карточек расположите кнопки «Заказать» и «В корзину».

Дополнительные материалы

1. Компонент Buttons
2. Что верстальщик должен знать про OOCSS и организацию CSS