Если использовать Bootstrap только в качестве готовых компонентов, можно столкнуться с тем, что все проекты будут идентичны. Такое случается редко, и в этом нет ничего плохого. Зачастую нужно уже готовым элементам дать отличные стили или создать блок, который отсутствует в шаблонных компонентах.
Чтобы изменить уже готовые компоненты или создать нечто уникальное, в Bootstrap используются утилиты.
В этом уроке мы разберем, что такое утилиты, и по какой методологии они строятся. Также рассмотрим принцип работ на примере утилит для текста и узнаем, когда стоит использовать утилиты.
Что такое утилиты
Утилиты в Bootstrap — набор готовых классов, которые позволяют изменить или дополнить существующий стиль элементов на странице. Например, с помощью утилит можно изменить цвет текста, размер шрифта, отступы, выравнивание, добавить тени и границы.
Каждая утилита в Bootstrap — это атомарный класс. Такой класс устанавливает только один стиль для элемента, например:
-
Цвет текста
-
Выравнивание
-
Тип отображения
Атомарный класс позволяет переиспользовать стили без их повторения в CSS.
Вот пример атомарного класса:
.text-center {
text-align: center;
}Класс text-center отвечает за один стиль — центрирование текста. Из таких «кирпичиков» можно строить большие дизайны и создавать свои уникальные элементы в Bootstrap или изменять дизайн уже готовых компонентов.
В качестве примера рассмотрим утилиты для изменения цвета текста в Bootstrap. В Bootstrap используется десять основных цветов:
-
primary -
secondary -
success -
danger -
warning -
info -
light -
dark -
black -
white
Синтаксис утилиты для изменения цвета текста — text-название_цвета. Если подставить любое из названий цветов в шаблон text-название_цвета, мы получим текст определенного цвета.
В этом уроке мы не будем описывать сами цвета, так как они могут меняться в зависимости от настроек проекта. Используем утилиту для текста, чтобы задать разнообразные цвета для текста:
See the Pen bootstrap_basic_course_table_4 by Hexlet (@hexlet) on CodePen.
В этом примере так же использовалась утилита для установки фона. Она выглядела так: bg-название_цвета. Цвета здесь используются те же, значит, можно комбинировать различные варианты фона и текста в своем проекте.
Утилиты, в отличие от компонентов, не имеют собственного внешнего вида или функциональности. Они лишь дополнение к компонентам, хоть и позволяют верстать новые компоненты. Но в этом случае лучше сделать свой новый компонент. Для этого нужно знать препроцессор SASS и структуру Bootstrap.
Рассмотрим пример, как утилиты позволяют изменить стандартный вид компонента Bootstrap:
See the Pen bootstrap_basic_course_utilities_color by Hexlet (@hexlet) on CodePen.
В этом примере сверху находится компонент так, как он указан в документации. Снизу — тот же компонент, но разбавленный утилитами.
Когда использовать утилиты
Нельзя сказать точно, когда стоит использовать утилиты, а когда нет. Здесь работает принцип «Не навреди». Их стоит использовать, когда компонент не позволяет это сделать уже с готовыми классами.
В работе с утилитами стоит придерживаться следующих рекомендаций:
-
Используйте утилиты для создания нового дизайна уже знакомых компонентов
-
Не злоупотребляйте утилитами. Если нужно нечто уникальное, то стоит подумать о создании нового компонента, а не верстки его с помощью утилит. Это усложнит HTML, если добавить в него множество классов
-
Изучайте документацию Bootstrap. В ней большое количество вариантов использования компонентов и их дополнительные настройки. Всегда старайтесь найти ответ в уже готовых классах перед тем, как использовать утилиты
Выводы
В этом уроке мы рассмотрели утилиты Bootstrap и узнали, что они представляют собой атомарные классы. Это классы, которые выполняют только одну функцию, например, установка цвета фона или изменение типа отображения элемента.
Bootstrap дает большое количество утилит для работы, поэтому стоит почаще заглядывать в документацию, чтобы не забывать о возможностях.
Используйте утилиты для изменения внешнего вида стандартных компонентов, но не злоупотребляйте утилитами. Их большое количество усложняет HTML и делает его плохочитаемым. Перед тем, как использовать утилиту внутри компонента, проверьте, нет ли нужного внешнего вида в дополнительных классах компонента.
Самостоятельная работа
Используйте любой компонент из документации Bootstrap и измените его внешний вид с помощью утилит
Дополнительные материалы
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
