Зарегистрируйтесь для доступа к 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

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

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

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

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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