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

Утилиты Bootstrap 5: Основы верстки

Если использовать 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 и измените его внешний вид с помощью утилит


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

  1. Утилита Colors

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

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

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

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

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

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

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

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

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

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

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

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы
профессия
Верстка с использованием последних стандартов CSS
5 месяцев
с нуля
Старт в любое время

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

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

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

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