Адаптивные формы bootstrap 3

Адаптивные формы фреймворка bootstr

Подробное описание использования адаптивных форм фреймворка bootstrap 3, демонстрация применения служебных классов к элементам передачи данных.

Применение полей ввода и форм bootstrap-3

Применение возможностей форм и полей ввода фреймворка bootstrap 3, предоставлено описание всем имеющимся селекторам в этой версии.

Форма ввода и текстовая область

Для применения адаптивной формы ввода или текстовой области, достаточно добавить class="form-control" элементам управления. Состояние :focus имеет стилевое оформление, для него используется свойство box-shadow.


<input type="text" class="form-control" placeholder="Форма ввода">
<textarea class="form-control" rows="4"></textarea>

Блокировка ввода

Вы можете заблокировать поля ввода и текстовые области сделав их состояния неактивными. Для блокировки ввода используйте атрибут disabled.


<input type="text" class="form-control" placeholder="Форма ввода">
<input type="text" class="form-control" placeholder="Заблокированная форма ввода" disabled>
<textarea class="form-control" rows="4"></textarea>
<textarea class="form-control" rows="4" disabled></textarea>

Пример удаления атрибута disabled

Приводим пример изменения состояния disabled для элемента ввода путём использования скрипта. Пример используется как возможность применения, и не имеет прямого отношения к функционалу форм bootstrap-3.


<input type="text" class="form-control" placeholder="Заблокированная форма ввода" disabled>
<label><input id="activevvod" type="checkbox"> Снять блокировку</label>
<script>
$(function (){
$('#activevvod').click(function (){
$('input').removeAttr('disabled');
});
});
</script>

Радио и чекбоксы

Горизонтальное расположение

Для горизонтального расположения используйте class="checkbox" и class="radio".


<div class="checkbox">
<label>
<input type="checkbox" value="">
</label>
</div>
<div class="radio">
<label>
<input type="radio" value="">
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">
</label>
</div>
<div class="radio">
<label>
<input type="radio" value="">
</label>
</div>

Вертикальное расположение

Для вертикального расположения используйте class="checkbox-inline" и class="radio-inline".


<label class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
</label>

Размеры полей ввода

Вертикальные размеры

По умолчанию можно использовать 3 размера высоты полей ввода, если Вы укажите class="form-control", поле ввода будет иметь средний размер, если form-control input-lg, поле будет иметь больший размер высоты, а если class="form-control input-sm", тогда поле будет меньше среднего.


<input class="form-control" type="text" placeholder="Средний размер">
<input class="form-control input-lg" type="text" placeholder="Большой размер">
<input class="form-control input-sm" type="text" placeholder="Маленький размер">
<select class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
</select>
<select class="form-control input-lg">
 <option>1</option>
 <option>2</option>
 <option>3</option>
</select>
<select class="form-control input-sm">
 <option>1</option>
 <option>2</option>
 <option>3</option>
</select>

Горизонтальные размеры

Горизонтальные размеры указываются классами вёрстки bootstrap 3 class="col-xs-ЧИСЛО", class="col-lg-ЧИСЛО", class="col-md-ЧИСЛО", class="col-sm-ЧИСЛО", а так же используются классы смещения class="col-ТИП-offset-ЧИСЛО". Применение тех или иных классов сетки зависит от условий указанных значений родителю (если есть).


<div class="row">
<div class="col-md-4">
<input type="text" class="form-control" placeholder="col-md-4">
</div>
<div class="col-md-3">
<input type="text" class="form-control" placeholder="col-md-3">
</div>
<div class="col-md-2">
<input type="text" class="form-control" placeholder="col-md-2">
</div>
<div class="col-md-1">
<input type="text" class="form-control" placeholder="col-md-1">
</div>
</div>

<div class="row">
 <div class="col-md-4 col-md-offset-2">
 <input type="text" class="form-control" placeholder="col-md-4 col-md-offset-2">
 </div>
</div>

Комментарий для полей ввода

Если Вам нужно добавить комментарий к полям ввода используйте class="help-block".

Здесь Ваш комментарий для поля.
<input type="text" class="form-control" placeholder="Поле ввода">
<span class="help-block">Здесь Ваш комментарий для поля.</span>

Группы формы и полей

Группы полей ввода могут находится в форме, для этого используйте <div class="form-group">, но так же группа может состоять из самостоятельных полей, для них применяйте <div class="input-group">.

Группы полей формы

Группы полей ввода форм, должны быть помещены в <div class="form-group">.

Это первое поле группы формы.
Это второе поле группы формы.
Это третье поле группы формы.

<div class="form-group col-md-3">
 <input type="text" class="form-control" placeholder="Поле ввода 1">
 <span class="help-block">Это первое поле группы формы.</span>
</div>
<div class="form-group col-md-4">
 <input type="text" class="form-control" placeholder="Поле ввода 2">
 <span class="help-block">Это второе поле группы формы.</span>
</div>
<div class="form-group col-md-5">
 <input type="text" class="form-control" placeholder="Поле ввода 3">
 <span class="help-block">Это третье поле группы формы.</span>
</div>

Группы полей ввода и размеры

Индивидуальные поля ввода в группе дополняются <div class="input-group">, им устанавливаются размеры class="input-group" как средний, class="input-group input-group-lg" большой и class="input-group input-group-sm" маленький.


<div class="input-group col-md-5">
 <input type="text" class="form-control" placeholder="Среднее поле ввода">
</div>
<div class="input-group input-group-lg col-md-4">
 <input type="text" class="form-control" placeholder="Большое поле ввода">
</div>
<div class="input-group input-group-sm col-md-6">
 <input type="text" class="form-control" placeholder="Маленькое поле ввода">
</div>

Определение полей ввода

Чтобы пользователь смог определить предназначение поля ввода используйте class="control-label".


<div class="form-group">
 <label class="control-label">Это поле 1</label>
 <input type="text" class="form-control">
</div>
<div class="form-group">
 <label class="control-label">Это поле 2</label>
 <input type="text" class="form-control">
</div>
<div class="form-group">
 <label class="control-label">Это поле 3</label>
 <input type="text" class="form-control">
</div>

Проверка состояния полей ввода

Можно добавить стилевое оформления состояниям полей ввода через class="has-success", class="has-warning" и class="has-error". Состояния так же будут наследовать элементы селекторов class="control-label", class="form-control" и class="help-block".


<div class="form-group has-success">
 <label class="control-label" for="inputSuccess1">Отлично</label>
 <input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
 <label class="control-label" for="inputWarning1">Внимание</label>
 <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
 <label class="control-label" for="inputError1">Ошибка</label>
 <input type="text" class="form-control" id="inputError1">
</div>

Проверка состояния полей ввода с иконками

Для использования иконок полям ввода с возможностью проверки, добавьте группе class="has-feedback" и class="form-control-feedback" селекторам иконок.


<div class="form-group has-success has-feedback">
 <label class="control-label" for="inputSuccess2">Отлично</label>
 <input type="text" class="form-control" id="inputSuccess2">
 <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
 <label class="control-label" for="inputWarning2">Внимание</label>
 <input type="text" class="form-control" id="inputWarning2">
 <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
 <label class="control-label" for="inputError2">Ошибка</label>
 <input type="text" class="form-control" id="inputError2">
 <span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>

Дополнение полей ввода

Используйте маркировку полей ввода применяя class="input-group-addon".

@
@
@
@
@
@

<div class="row">
<div class="input-group col-md-6">
 <span class="input-group-addon">@</span>
 <input type="text" class="form-control" placeholder="Ваше Е-майл">
</div>

<div class="input-group input-group-lg col-md-6">
 <span class="input-group-addon">@</span>
 <input type="text" class="form-control" placeholder="Ваше Е-майл">
</div>

<div class="input-group input-group-sm col-md-6">
 <span class="input-group-addon">@</span>
 <input type="text" class="form-control" placeholder="Ваше Е-майл">
</div>
</div>

<div class="row">
<div class="input-group">
 <input type="text" class="form-control" placeholder="Ваше Е-майл">
 <span class="input-group-addon">@</span>
</div>

<div class="input-group input-group-lg">
 <input type="text" class="form-control" placeholder="Ваше Е-майл">
 <span class="input-group-addon">@</span>
</div>

<div class="input-group input-group-sm">
 <input type="text" class="form-control" placeholder="Ваше Е-майл">
 <span class="input-group-addon">@</span>
</div>
</div>

Дополнение флажками и переключателями

Дополняйте поля ввода флажками и переключателями type="checkbox" и type="radio" как альтернативу вводимому тексту.


<div class="row">

 <div class="col-md-6">
 <div class="input-group">
 <span class="input-group-addon">
 <input type="checkbox">
 </span>
 <input type="text" class="form-control">
 </div>
 </div>

 <div class="col-md-6">
 <div class="input-group">
 <span class="input-group-addon">
 <input type="radio">
 </span>
 <input type="text" class="form-control">
 </div>
 </div>

</div>

Дополнение кнопками

Используйте кнопки в качестве дополнения полей type="input-group-btn" и type="button".


<div class="row">

 <div class="col-md-6">
 <div class="input-group">
 <span class="input-group-btn">
 <button class="btn btn-default" type="button">ЖМИ</button>
 </span>
 <input type="text" class="form-control">
 </div>
 </div>

 <div class="col-md-6">
 <div class="input-group">
 <input type="text" class="form-control">
 <span class="input-group-btn">
 <button class="btn btn-default" type="button">ЖМИ</button>
 </span>
 </div>
 </div>

</div>

Дополнение выпадающим списком

Дополните поля ввода выпадающим списком, для возможности использования альтернативных способов ввода.


<div class="row">

 <div class="col-md-6">
 <div class="input-group">
 <div class="input-group-btn">
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Список <span class="caret"></span></button>
 <ul class="dropdown-menu">
 <li><a href="#">Пункт 1</a></li>
 <li><a href="#">Пункт 2</a></li>
 <li><a href="#">Пункт 3</a></li>
 <li class="divider"></li>
 <li><a href="#">Отдельный пункт</a></li>
 </ul>
 </div>
 <input type="text" class="form-control">
 </div>
 </div>

 <div class="col-md-6">
 <div class="input-group">
 <input type="text" class="form-control">
 <div class="input-group-btn">
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Список <span class="caret"></span></button>
 <ul class="dropdown-menu pull-right">
 <li><a href="#">Пункт 1</a></li>
 <li><a href="#">Пункт 2</a></li>
 <li><a href="#">Пункт 3</a></li>
 <li class="divider"></li>
 <li><a href="#">Отдельный пункт</a></li>
 </ul>
 </div>
 </div>
 </div>

</div>

Управление формами

Для формирования обычной формы для отдельного позиционирования используется тег <form>, для онтологического определения формы используйте в комплекте с атрибутом role="form".

Не более метра


<form role="form">

<div class="form-group">
<label for="exampleInputEmail1">Е-майл</label>
<input type="email" class="form-control" placeholder="Ваш Е-майл" disabled>
</div>

<div class="form-group">
<label>Пароль</label>
<input type="password" class="form-control" placeholder="Ваш пароль">
</div>

<div class="form-group">
<label>Ваш файл</label>
<input type="file">
<p class="help-block">Не более метра</p>
</div>

<div class="checkbox">
<label>
<input type="checkbox" id="nebot"> Я не бот
</label>
</div>

<button type="submit" class="btn btn-default">Отправить </button>
</form>

<script>
$(function (){
$('#nebot').click(function (){
$('input[type="email"]').removeAttr('disabled');
});
});
</script>

Встраиваемая форма и невидимые ярлыки

Для встраиваемой формы, имеющей ориентацию смещения к левому краю, используйте class="form-inline", если Вы хотите чтобы скрин ридеры фиксировали ярлыки обозначений полей ввода, но при этом они были бы не доступны для визуального просмотра, используйте class="sr-only".


<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only">Е-майл</label>
<input type="email" class="form-control" placeholder="Ваш Е-майл">
</div>
<div class="form-group">
<label class="sr-only">Пароль</label>
<input type="password" class="form-control" placeholder="Ваш пароль">
</div>
<button type="submit" class="btn btn-default">Войти</button>
</form>

Горизонтальная форма

Для встраиваемой формы, имеющей ориентацию смещения к левому краю, используйте class="form-inline", если Вы хотите чтобы скрин ридеры фиксировали ярлыки обозначений полей ввода, но при этом они были бы не доступны для визуального просмотра, используйте class="sr-only".


<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-md-2 control-label">Е-майл</label>
<div class="col-md-10">
<input type="email" class="form-control" placeholder="Ваш Е-майл">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Пароль</label>
<div class="col-md-10">
<input type="password" class="form-control" placeholder="Ваш пароль">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div class="checkbox">
<label>
<input type="checkbox"> Запомнить
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-10">
<button type="submit" class="btn btn-default">Войти</button>
</div>
</div>
</form>

Статическое дополнение ярлыкам форм

Для добавления ярлыкам горизонтальных форм статического дополнения применяйте class="form-control-static", для тега <p>.

e-mail@yandex.ru


<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-md-2 control-label">Е-майл</label>
<div class="col-md-6">
<p class="form-control-static">e-mail@yandex.ru</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-md-2 control-label">Пароль</label>
<div class="col-md-6">
<input type="password" class="form-control" id="inputPassword" placeholder="Ваш пароль">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn btn-default">Войти</button>
</div>
</div>
</form>

Видимость и скрытность элементов форм

Используйте служебные классы скрытности и видимости для различных разрешений устройств. Ниже предоставлена таблица, показывающая определение классами размеры дисплеев и мониторов. Селекторы могут быть применены как к отдельным элементам форм и полей, так и целиком к форме.

class="" Устройства (<768px) Устройства (≥768px) Устройства (≥992px) Устройства (≥1200px)
.visible-xs Видно Скрыто Скрыто Скрыто
.visible-sm Скрыто Видно Скрыто Скрыто
.visible-md Скрыто Скрыто Видно Скрыто
.visible-lg Скрыто Скрыто Скрыто Видно
.hidden-xs Скрыто Видно Видно Видно
.hidden-sm Видно Скрыто Видно Видно
.hidden-md Видно Видно Скрыто Видно
.hidden-lg Видно Видно Видно Скрыто

Видимость форм при печати

Определите при необходимости видимость форм, или их элементам видимость для печатающих устройств, путём применения селекторов описанных в таблице ниже.

class="" В браузере При печати
.visible-print Скрыто Видно
.hidden-print Видно Скрыто

Проверьте себя

Проверьте свои знания в использовании форм и полей фреймворка bootstrap 3, вносите изменения в демо поле и получайте результат в реальном виде. Если окно результата не будет закрыто, новые данные введённые Вами в редактор обновятся.


Рейтинг: 5.0/5 из 5



Добавлено Автор Ник Источник Просмотров Комментариев Теги
03-11-2014 Михаил Меренков aTmpl © 7390 0 адаптивные формы, bootstrap 3, adaptive forms