Зарегистрируйтесь для доступа к 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. ОТКРЫТЫЙ УРОК [Хекслет]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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