Переменные формы Bulma

Bulma — это адаптивный фреймворк с открытым исходным кодом для CSS, основанный на Flexbox, и он абсолютно бесплатный. Основными особенностями этой структуры являются то, что она очень совместима, хорошо документирована и богата компонентами. В целях проектирования Bulma использует классы.

Платформа Bulma поддерживает и позволяет пользователям создавать формы с помощью элементов управления формы Bulma. Фреймворк поддерживает <form>, <button>, <input>, <textarea> и элементы <label> HTML. Пользователь может создать полную форму с помощью Bulma, поскольку он обеспечивает лучший дизайн пользовательского интерфейса. Bulma использует контейнер управления для поддержания потока формы. Он использует класс поля в качестве контейнера для добавления равного интервала между элементами формы. Существуют различные классы, используемые в элементах управления формы, и они обсуждаются ниже.

Классы формы Бульма:

• поле: это контейнер, в котором метка, элемент управления и т. д. используются для создания формы.
• control: этот класс используется как блок-контейнер, состоящий из элементов input, level, textarea и select.
• метка: этот класс используется для добавления метки для элемента ввода.
• input: этот класс используется для ввода текста пользователем.
• textarea: этот класс используется для ввода большого текста от пользователя.
• select: этот класс используется для выбора одного параметра из списка в раскрывающемся меню.
• radio: этот класс используется для добавления переключателей в форму Bulma.
• button: этот класс используется для добавления кнопок в форму Bulma.
• флажок: этот класс используется для добавления флажка в форму Bulma для выбора нескольких вариантов ввода.

Используемая переменная:

• $label-color: эта переменная используется для определения цвета метки.
• $label-weight: Эта переменная используется для определения веса этикетки.
• $help-size: эта переменная используется для определения размера метки.

Пример 1: В приведенном ниже коде мы будем использовать одну из вышеуказанных переменных, чтобы продемонстрировать использование формы. Здесь используется переменная $label-color .

Код СКСС:

$label-color:green;
.title {
   color:$label-color;
   
}

Скомпилированный CSS-код:

.title {
 color: green; }

Выход:

Пример 2: В приведенном ниже коде мы будем использовать одну из вышеуказанных переменных, чтобы продемонстрировать использование формы.

Код СКСС:

$label-color:lightgreen;
body {
   background-color:$label-color;   
}

Скомпилированный CSS-код:

body {
 background-color: lightgreen; 
}

Выход:

Ссылка: https://bulma.io/documentation/form/general/