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

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

Третьей возможностью использования стилей Bootstrap являются утилиты. Утилиты являются главным союзником при создании макетов и чаще всего представлены в виде атомарных классов.

Атомарный класс — класс, состоящий из одного свойства и имеющий в названии описание свойства, которое использует класс. Например, d-block указывает на свойство display со значением block. Класс overflow-hidden указывает на свойство overflow со значением hidden.

Преимущество таких классов — скорость работы. Для интерпретации таких классов браузеру не надо обрабатывать длинные селекторы и множество свойств внутри, которые необходимо применить к элементам. Это рождает так же и недостаток: атомарные классы вынуждают использовать множество классов внутри HTML, что может сказаться на читаемости HTML.

Все утилиты в Bootstrap можно условно разделить на две основные группы:

  1. Структурные утилиты. К ним относятся классы влияющие на ширину/высоту, способ отображения, отступы, позицию.

  2. Утилиты оформления. К ним относятся классы влияющие на цвет, тени.

В качестве примера в этом уроке мы разберём утилиту для работы с цветом текста. Она почти полностью покрывает все возможные сценарии вёрстки текста на странице и позволяет не использовать отдельный CSS. Остальные утилиты имеют схожий принцип работы. Все их можно найти в официальной документации Bootstrap.

Одной из особенностей утилит в Bootstrap является использование флага !important внутри CSS кода. Данная практика хоть и является порицаемой, так как нарушает нормальную каскадность CSS, но у этого решения есть своя цель. Утилиты используются для переопределения текущего CSS и добавления нового. Так как нельзя дать гарантии на то, что пользовательский CSS код будет находиться выше утилит, то для переопределения стилей необходимо использовать !important. Это необходимо учитывать при написании своего CSS — если внутри пользовательского селектора использовать флаг !important, то есть вероятность того, что связанные с этим свойством утилиты не будут работать. Это нарушит стандартное поведение фреймворка. Следовательно, использование флага !important допускается только при создании пользовательских утилит. Остальные классы не должны использовать этот флаг.

Цвета

В уроке про компоненты было показано, что Bootstrap имеют свою «карту цветов» с помощью которой генерируются классы связанные с цветами. Эти же цвета доступны и для текста. После компиляции создаются следующие классы:

<p class="text-primary">Primary</p>
<p class="text-secondary">Secondary</p>
<p class="text-success">Success</p>
<p class="text-danger">Danger</p>
<p class="text-warning">Warning</p>
<p class="text-info">Info</p>
<p class="text-light">Light</p>
<p class="text-dark">Dark</p>

Изменяя массив $theme-colors можно добавлять любые пользовательские цвета:

$theme-colors: (
  "brand": #66bb6a
);

После компиляции будет доступен новый класс .text-brand.

Важно: Помимо добавления цветов для текста, изменение $theme-colors создаст новые классы для других утилит и компонентов, таких как .bg-, .border-, alert-* и так далее. Это увеличит размер итогового CSS файла. Если цвет не является частью вашего бренда и нужен только для некоторых элементов, то целесообразнее добавить его в массив $colors. После компиляции эти цвета доступны в виде глобальных CSS переменных.

Создание пользовательских утилит

При вёрстке макетов не всегда хватает утилит, которые представлены по умолчанию. Разработчики зачастую добавляют необходимый код самостоятельно в файлы CSS, что не является хорошей практикой. Любая утилита может быть создана средствами Bootstrap, что позволит не отходить от средств фрейморка, а так же ускорит создание пользовательских утилит.

Создадим утилиту, позволяющую менять тип курсора при наведении на HTML элемент. Для начала стоит определить, какие классы будут нужны в качестве значений утилит. В основном на веб-сайтах используется курсор pointer. Так же создадим значения default и none.

Получатся следующие классы:

  • cursor-pointer

  • cursor-default

  • cursor-none

Начиная с версии Bootstrap 5 генерация всех утилит происходит автоматически. Для этого добавляются необходимые значения в переменную $utilities. После компиляции всех исходных файлов утилиты появятся в основном файле CSS. Чтобы проще разобраться в том, как именно генерируются утилиты стоит взглянуть на уже существующий файл utilities.scss. В нём собраны все утилиты, которые генерируются _Bootstrap по-умолчанию. Для примера рассмотрим как создана утилита justify-content:

"justify-content": (
  responsive: true,
  property: justify-content,
  values: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
    evenly: space-evenly,
  )
)

Вначале такое количество разных значений может запутать или напугать, но стоит один раз создать свою утилиту и вы поймёте, насколько это API облегчает жизнь разработчикам. Какие ключи массива здесь представлены?

  • responsive — создавать утилиты для разных разрешений экрана? Если значение true, то будут созданы утилиты с префиксами -sm-, -md-, -lg- и так далее

  • property — название свойства CSS. В данном случае это justify-content

  • values — значения, которые может принимать свойство. Здесь возможно несколько вариаций того, как могут быть указаны значения. Для свойства justify-content дополнительно указываются алиасы, то есть альтернативные имена, чтобы при генерации утилит получить читаемые названия классов. Сравните:

/* Без указания алиаса */
.justify-content-space-around {
  justify-content: space-around;
}

/* С указанием алиаса */
.justify-content-around {
  justify-content: space-around;
}

Помимо этих ключей существует ещё несколько:

  • class — альтернативное именование класса. По умолчанию в качестве названия класса используется название самой утилиты. Иногда оно бывает достаточно громоздким

"justify-content": (
  responsive: true,
  property: justify-content,
  class: jc,
  values: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
    evenly: space-evenly,
  )
)
.jc-around {
  justify-content: space-around;
}
  • state — возможность добавления утилит для псевдоклассов, таких как :hover, :focus

"justify-content": (
  responsive: true,
  property: justify-content,
  state: hover,
  values: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
    evenly: space-evenly,
  )
)
.justify-content-around-hover:hover {
  justify-content: space-around;
}

Важно: обязательными являются только ключи property и values. Другие ключи используются исходя из потребностей разработчика


Теперь создание утилиты cursor является достаточно простой задачей — необходимо добавить новую утилиту в переменную $utilities и скомпилировать проект. Обратите внимание, что создание утилиты происходит через функцию map-merge

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      values: pointer grab help progress,
    ),
  )
);

После компиляции в основной файл CSS добавятся следующие классы:

.cursor-pointer {
  cursor: pointer !important;
}

.cursor-grab {
  cursor: grab !important;
}

.cursor-help {
  cursor: help !important;
}

.cursor-progress {
  cursor: progress !important;
}

Самостоятельная работа

Создайте утилиту opacity со значениями:

  • 0

  • 0.25

  • 0.5

  • 0.75

  • 1

Добавьте для неё возможность реализации на разных разрешениях, то есть должны сгенерироваться классы для префиксов -sm-, -md- и так далее. Сделайте утилиту работающей при наведении на элемент (состояние hover)


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

  1. Bootstrap Utilities API
  2. Разрабатываем утилиту на Bootstrap. ОТКРЫТЫЙ УРОК [Хекслет]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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