Зарегистрируйтесь для доступа к 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 создайте карточки товара в ваш макет. Внизу карточек расположите кнопки «Заказать» и «В корзину»


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

  1. Компонент Buttons
  2. Компонент Card

Аватары экспертов Хекслета

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

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

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

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

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

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

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Верстальщик
Профессия
с нуля
Верстка с использованием последних стандартов CSS
в любое время 5 месяцев

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»