С помощью фреймворка Bulma мы можем очень легко и быстро оформлять элементы форм на веб-страницах сайта.
Подробнее об этом можно почитать в разделе документации Form.
https://bulma.io/documentation/form/general/
Давайте рассмотрим, какие здесь есть возможности.
Начнем с самого простого, с элемента input. Это текстовое поле и метка (label), которая к нему относится.
Такой элемент на фреймворке Bulma можно сверстать следующим образом:
<div class="field"> <label class="label">Name</label> <div class="control"> <input class="input" type="text" placeholder="Text input"> </div> </div>
Первое, на что нужно обратить внимание, что все элементы форм, с которыми мы будем работать, располагаются в элементе div с классом field. Т.е. это некое поле формы (field).
Далее идет элемент label. Чтобы применить к нему стили Bulma, добавляем для него класс label.
Далее внутри элемента с классом control мы размещаем сам элемент input, простое текстовое поле.
Ниже на странице документации вы можете посмотреть, как можно добавлять различные иконки для элемента input.
Давайте еще создадим выпадающий список.
<div class="field"> <label class="label">Subject</label> <div class="control"> <div class="select"> <select> <option>Select dropdown</option> <option>With options</option> </select> </div> </div> </div>
Здесь мы видим аналогичные элементы field и label. Выпадающий список (элемент select) обрамляется в элемент div с классом select.
Далее вы можете посмотреть здесь примеры как оформляются кнопки, как создаются радио-кнопки, переключатели и.т.д.
Мы просто добавляем соответствующий класс, который применяет соответствующие стили для элементов формы.
В документации вы можете найти подробные примеры по каждому элементу формы, как это можно создавать. Для элементов списка, для кнопки, как можно добавлять иконки, в этом могут помочь модификаторы has-icon-left и has-icon-right (имеет иконку слева и справа).
Модификаторы is-small и is-large позволяют уменьшить/увеличить размер модификатора элемента формы.
Это основы, как создаются элементы формы в фреймворке Bulma. Попробуйте тоже на основании этих примеров создать элементы формы.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Email - зарегистрироваться / войти