В прошлых уроках мы научились использовать классы Bootstrap для оформления текста, создания таблиц и сеток, внутри которых располагаются элементы.
Эти небольшие классы уже позволяют создавать полноценные страницы, например блоги. Но в больших проектах требуется больший функционал, например, шапка страницы или боковое меню.
Для создания таких элементов используются компоненты — готовые классы для создания блоков на странице.
В этом уроке разберем особенности компонентов и на примере компонента кнопки рассмотрим сценарии использования.
Компоненты в Bootstrap
Компоненты — это готовые блоки, которые содержат частоиспользуемые элементы страницы. Например: карточки товара, формы, кнопки.
Так как компоненты являются частью Bootstrap, то они хорошо оптимизированы и имеют разные варианты использования.
Основные особенности готовых компонентов в Bootstrap:
-
Адаптивность. Компоненты адаптированы для разных разрешений экрана в рамках сетки Bootstrap
-
Модульность. Компоненты независимы и могут комбинироваться друг с другом в разных последовательностях. Их часто можно использовать внутри друг друга. Например, внутри компонента шапки могут использоваться компоненты кнопок
-
Настройка. Для многих компонентов существует несколько вариантов использований и дизайна. Для этого используются дополнительные классы, которые описаны в документации
Рассмотрим использование компонентов на примере кнопок.
Компонент «Кнопка»
Кнопки — одни из самых распространенных компонентов в Bootstrap. Они используются по всему сайту: от шапки до самого футера.
Как и большинство компонентов, кнопки создаются с помощью нескольких типов классов:
-
Базовый или структурный класс компонента
-
Класс варианта компонента
Так достигается отделение структуры компонента от его оформления. Такой подход в способах организации стилей называется OOCSS или Объектно-ориентированный CSS. Подробнее о подходе вы можете прочитать в нашем блоге, ссылка на статью будет в конце урока.
Структурный класс для кнопок — btn. Применив его на любой участок верстки, вы добавите стили, которые характерны для кнопок в Bootstrap: отступы, стили при наведении и нажатии, размер шрифта, выравнивание:
<button type="button" class="btn">Я — базовая кнопочка</button>See the Pen bootstrap_basic_course_utilities_example by Hexlet (@hexlet) on CodePen.
Нажмите на кнопку, чтобы увидеть стили, которые применяются при активном псевдоклассе :active.
Такая кнопка вряд ли будет использоваться на странице, хотя дизайнерская жилка может выдать что угодно. Для оформления кнопок используются специальные классы, которые отвечают только за оформление.
Например, чтобы покрасить кнопку, используется дополнительный класс btn-цвет. В Bootstrap используется несколько основных цветов, которые названы по их смыслу:
-
primary -
secondary -
success -
danger -
warning -
info -
light -
dark
Подставим разные классы и посмотрим, как изменится внешний вид кнопок:
See the Pen bootstrap_basic_course_components_button-2 by Hexlet (@hexlet) on CodePen.
Второстепенные классы могут менять не только расцветку компонента, но и изменять его общую структуру. Для кнопок одни из таких классов — это btn-lg и btn-sm. Они изменяют отступы, размер шрифта и их базовый размер:
See the Pen bootstrap_basic_course_components_button-2 by Hexlet (@hexlet) on CodePen.
На примере выше видно, что классы можно комбинировать. Это позволяет придавать разную стилистику компонентам как в расцветке, так и в размерах.
Выводы
В этом уроке мы разобрали, что такое компоненты в Bootstrap и их особенности:
-
Адаптивность
-
Модульность
-
Настраиваемость
Эти три аспекта позволяют использовать компоненты в любом месте макета в рамках Bootstrap и не бояться плохого результата.
На примере компонента кнопок мы узнали, что компоненты состоят из нескольких основных частей:
-
Главный структурный класс, который указывает на сам компонент
-
Классы оформления, которые позволяют добавить стили компонентам и изменять их в разных частях макета
Самостоятельная работа
Используя компонент .card, создайте карточки товара в ваш макет. Внизу карточек расположите кнопки «Заказать» и «В корзину».
Дополнительные материалы
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
