Опубликовано от — Оставить комментарий

Bootstrap формы

Bootstrap формы
Bootstrap формы

Отдельные элементы управления  Bootstrap формы получают глобальные стили. Все элементы <input>, <textarea>, <select> с классом .form-control  получают стопроцентную ширину по умолчанию (width:100%). Для получения оптимального расстояния между элементами рекомендуется все метки и управляющие элементы оборачивать в класс и .form-group. Чтобы форма стала горизонтальной, HTML-элементу <form> добавляется класс .form-inline. При этом всегда рекомендутся добавлять метки каждому полю управления, иначе могут возникнуть проблемы с программами-читалками.

Bootstrap формы


Пример оформления формы в Bootstrap:

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Пароль</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Пароль">
  </div>
</form>

При оформлении флажков и чекбоксов в Bootstrap, элементы управления оборачиваются в родительский элемент с одноименным классом. Т.е. <input type="radio" ... /> получает родительский элемент div с классом .radio. При этом добавление класса .disabled создает оформление блокировки элемента. Примечание: атрибут disabled в input:radio также прописывается.

Свойство outline при фокусировке на элементе формы (:focus) заменено на box-shadow. Для выключения элементов управления или fieldset, используется атрибут disabled (обещаны проблемы с IE 11 и ниже при работе disabled с fieldset).

Для указания состояние валидации элементов формы, используются классы .has-warning, .has-error, или .has-success — уведомление, ошибка или подтверждение ввода (указываются внутри элементов с .control-label, .form-control, и .help-block)
Указание класса .has-feedback для элементов, родительских и предков для <input class=»form-control»…> позволяет указать пиктограмму для поля, например:

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>

Увеличить размер элемента управления можно добавив класс input-lg:

<input class="form-control input-lg" type="text" placeholder=".input-lg">
Добавить комментарий