Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

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

Помимо небольших классов для работы со стандартными HTML элементами Bootstrap предоставляет готовые блоки, которые можно использовать на странице. Такие блоки называются компонентами и позволяют быстро добавить новые элементы на странице.

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

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

Кнопки

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

.btn {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .25rem;
  transition: color .15s ease-in-out,
              background-color .15s ease-in-out,
              border-color .15s ease-in-out,
              box-shadow .15s ease-in-out;
}

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

Внутри фреймворка эти правила записаны намного сложнее, так как используют функции и переменные всего проекта.

.btn {
  display: inline-block;
  font-family: $btn-font-family;
  font-weight: $btn-font-weight;
  color: $body-color;
  text-align: center;
  text-decoration: if($link-decoration == none, null, none);
  white-space: $btn-white-space;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: $btn-border-width solid transparent;
  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
  @include transition($btn-transition);
}

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

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

Добавим три кнопки, на примере которых будет разобран механизм использования компонентов.

Как видно из стилей кнопки, по умолчанию они не имеют никаких визуальных эффектов, хотя и обладают большинством структурных стилей. Это похоже на подход OOCSS, при котором разделяются стили для структуры и стили для оформления. Они указываются отдельным классом. Для придания визуальных стилей кнопкам необходимо добавить модификатор.

Модификаторы

Для большинства компонентов стилевые модификаторы похожи. Они представляют собой классы вида названиеКомпонента-цвет. Кнопки не являются исключением. По умолчанию таких классов у кнопок восемь:

.btn-primary
.btn-secondary
.btn-success
.btn-danger
.btn-warning
.btn-info
.btn-light
.btn-dark

Каждый из этих классов добавляет определенный цвет, соответствующий названию. Добавим в пример классы для кнопок.

Эти цвета возможно менять и добавлять используя переменную $theme-colors в файле _variables.scss.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
) !default;

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

Ключевыми моментами при работе с компонентами являются:

Отсутствие привязки к тегам
Использование функций для генерации стилей
Использование общих переменных фреймворка
Использование индивидуальных переменных для кастомизации компонента

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

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

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

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Об обучении на Хекслете

Статья «Как учиться и справляться с негативными мыслями»
Статья «Ловушки обучения»
Статья «Сложные простые задачи по программированию»
Урок «Как эффективно учиться на Хекслете»
Вебинар «Как самостоятельно учиться»

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ

130

курсов

1000

упражнений

2000+

часов теории

3200

тестов