Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 При использовании Bootstrap разработчики часто используют утилиты - небольшие классы, которые добавляют новые CSS-свойства к компоненту. Например, утилита d-* устанавливает один из видов отображения с помощью свойства display:

2 <ul><li>block</li>

3 <li>flex</li>

4 <li>inline</li>

5 <li>none</li>

6 <li>table</li>

7 </ul>Внутри фреймворка уже определены десятки утилит, которых хватит "на все случаи жизни". Но при разработке большого проекта может возникнуть потребность в создании новой утилиты или дополнения уже существующей.

8 Для этого в Bootstrap 5 используетсяUtility API- набор SASS функций, которые преобразуют массив свойств в утилиты.

9 В этом уроке рассмотрим создание новой утилиты cursor и изменим утилиту background. Мы научимся добавлять возможность менять цвет фона блока при наведении на него курсора мыши.

10 <h2>Utility API</h2>

11 Рассмотрим, как выглядит утилита в Bootstrap с точки зрения Utility API. Для этого достаточно открыть файл по пути _bootstrap/scss/utilities.scssи выбрать любую утилиту из массива. Для примера возьмем утилиту width:

12 Здесь представлена базовая структура любой утилиты:

13 <ul><li>property - CSS-свойство, которое будет изменяться</li>

14 <li>class - имя класса утилиты. Для ширины утилита будет иметь классы w-*</li>

15 <li>values - список CSS-значений. Это массив, где ключ - название, которое будет использовано в названии класса, а значение - содержание свойства</li>

16 </ul>После компиляции появятся классы:

17 Поля property и values - обязательные. Без них Bootstrap не скомпилируется и выдаст ошибку.

18 class является необязательным полем. Если его не указать, то в качестве названия утилиты, будет взято значение из поля property.

19 Старайтесь создавать утилиты с понятными именами. Конечное название класса должно быть понятным для разработчиков. Например, сокращать свойство background до b не лучший вариант, так как такое название неоднозначно.

20 Настало время создать новую утилиту.

21 <h2>Создание утилиты Cursor</h2>

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

23 В этой утилите мы будем добавлять для блока свойство cursor, которое изменяет внешний вид курсора. Свойство принимает множество значений, но выберем основные:

24 <ul><li>pointer</li>

25 <li>help</li>

26 <li>wait</li>

27 <li>progress</li>

28 <li>zoom-in</li>

29 <li>zoom-out</li>

30 <li>none</li>

31 </ul>Как и с компонентами, мы не будем изменять внутренние файлы Bootstrap, а создадим отдельный файл для утилит:

32 В файл добавим новую утилиту. Для этого смержим уже существующий массив с утилитами $utilities и новым массивом утилиты cursor:

33 В массиве values не используется схема "ключ-значение". Значит, в имени класса будет использоваться полное название значения свойства. Например, .cursor-pointer.

34 Схема подключения файла с генерацией утилит отличается от подключения файла с компонентами. Хитрость в том, что нужно подключить утилиты не до или после подключения Bootstrap, а между подключением файла утилит и генерацией самих классов.

35 Для этого используется такая структура подключения файлов:

36 Сгенерируем весь проект и получим новые классы утилит:

37 Теперь эти утилиты можно использовать в своем проекте и изменять их при необходимости. Например, использовать изменение курсора при наведении мыши на элемент.

38 Рассмотрим изменение утилиты на примере свойства background.

39 <h2>Изменение утилиты</h2>

40 Изменение утилиты не сильно отличается от создания новой. Нужно скопировать все значения старой утилиты и добавить в нее новое свойство.

41 Для примера изменим утилиту background и добавим возможность изменять цвет блока при наведении. За создание утилит, которые работают при псевдоклассе (:hover, :focus и т.д.) отвечает свойство Utility API state. Если добавить в него название псевдокласса, сгенерируются новые классы:

42 После компиляции проекта помимо классов bg-primary bg-seccondary появятся новые классы, которые работают при наведении на элемент:

43 Все возможные свойства Utility API указаны в документации. Не бойтесь экспериментировать и создавать новые утилиты.

44 <h2>Выводы</h2>

45 В этом уроке мы познакомились с возможностью Bootstrap под названием Utility API. Это АПИ позволяет генерировать новые и изменять уже существующие утилиты без ручного написания классов.

46 Utility API позволяет существенно расширять возможность утилит и добавлять им:

47 <ul><li>Работу для разных разрешений экрана</li>

48 <li>Работу для разных состояний элемента</li>

49 <li>Дополнять или удалять значения</li>

50 </ul>Это поможет составить грамотную дизайн-систему, которая легко расширяется и обновляется вместе с обновлением самого Bootstrap.