Модификаторы is- и has-
Почти каждый элемент Bulma описывается двумя видами классов. Основной класс говорит, что это за элемент: button, notification, card. Модификатор меняет его вид или состояние: цвет, размер, «активен». Модификаторы начинаются с is- или has- и сами по себе ничего не делают — только вместе с основным классом.
Модификатор is-
is- отвечает на вопрос «какой он?»: какого цвета, размера, в каком состоянии.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<button class="button">Обычная</button>
<button class="button is-primary">Основная</button>
<button class="button is-primary is-large">Крупная</button>
<button class="button is-primary is-rounded">Скруглённая</button>Все четыре — кнопки, отличаются только модификаторами. На одном элементе можно сочетать сколько угодно модификаторов: цвет, размер и форму сразу.
| Группа | Примеры |
|---|---|
| Цвет | is-primary, is-link, is-info, is-success, is-warning, is-danger |
| Размер | is-small, is-medium, is-large |
| Состояние | is-active, is-loading, is-static |
| Форма | is-rounded, is-fullwidth, is-outlined |
Цвета и размеры одинаковы для всех элементов: выучив is-danger для кнопки, вы уже знаете, как сделать красным уведомление или метку.
Модификатор has-
has- отвечает на вопрос «что у него есть?». Чаще всего это хелперы — классы-помощники на одно свойство, которые работают на любом элементе:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<p class="has-text-centered">Текст по центру</p>
<p class="has-text-danger has-text-weight-bold">Нет в наличии</p>
<p class="has-background-light">Блок со светлым фоном</p>Первая строка выровнена по центру, вторая — красная и жирная, у третьей светлый фон. Также has- описывает «приложения» к элементу: has-addons (поле с прикреплённой кнопкой), has-icons-left (поле с иконкой слева).
Суффиксы экранов
Многие классы принимают суффикс ширины экрана — контрольной точки, после которой правило начинает или перестаёт действовать:
| Суффикс | Ширина экрана |
|---|---|
-mobile | до 768 px |
-tablet | от 769 px |
-touch | до 1023 px (телефоны и планшеты) |
-desktop | от 1024 px |
-widescreen | от 1216 px |
-fullhd | от 1408 px |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<p class="has-text-centered-mobile has-text-right-tablet">Часы работы: 12:00–23:00</p>На узком экране строка по центру, на широком — справа. В превью шириной меньше 769 px она по центру; откройте пример в широком окне, чтобы увидеть выравнивание вправо.
Частая ошибка
Писать модификатор без основного класса: <a class="is-primary">. Правила Bulma привязаны к паре классов, например .button.is-primary, поэтому одинокий is-primary не даст ничего. Сначала основной класс, потом модификаторы: class="button is-primary".