Поля ввода

Типы полей ввода

Наиболее распространены текстовые поля. В Bootstrap включена поддержка всех HTML5 типов: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. Для многострочных текстовых полей используется тег textarea

Поля для ввода текста

Для оформления текстовых полей используется класс form-control. Так, поле займет всю доступную ширину. Чуть позже мы еще научимся располагать поля и кнопки в одну строку.

Исходный код:

<input type="text" class="form-control" placeholder="Введите текст">

Тег для ввода многострочного текста textarea допускает использование атрибута row. С помощью него задается количество строк:

Исходный код:

<textarea class="form-control" rows="3"></textarea>

Чекбоксы и radio-переключатели

Главное отличие: чекбоксы позволяют сделать множественный выбор (отметить несколько значений), а radio — только одно. Для размещения текста рядом с переключателями используется тег <label>:

Первый переключатель

Второй переключатель, недоступен для изменения

Первый переключатель

Второй переключатель

Третий переключатель, недоступен для выбора

Здесь используются классы checkbox и radio. Обратите внимание, как используются классы и атрибуты disabled и какой эффект при этом достигается:

<div class="checkbox">
 <label>
 <input type="checkbox" value="">
 Первый переключатель
 </label>
</div>
<div class="checkbox disabled">
 <label>
 <input type="checkbox" value="" disabled>
 Второй переключатель, недоступен для изменения
 </label>
</div>

<div class="radio">
 <label>
 <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
 Первый переключатель
 </label>
</div>
<div class="radio">
 <label>
 <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
 Второй переключатель
 </label>
</div>
<div class="radio disabled">
 <label>
 <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
 Третий переключатель, недоступен для выбора 
 </label>
</div>

Чтобы иконка указателя мыши изменилась, нужно для родительского div добавить класс disabled.

Чтобы разместить переключатели в одной строке, используйте класс checkbox-inline и radio-inline:

<label class="checkbox-inline">
 <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
 <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
 <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
 <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
 <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
 <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

Тогда вы добьетесь следующего:

1 2 3 1 2 3

Выпадающие списки

Выпадающие списки размещаются с помощью тега select. Ему, как и текстовым полям задается класс form-control. Бывает потребность в списках с множественным выбором. Тогда добавляется атрибут multiple .

1 2 3 4 5
1 2 3 4 5

Чтобы выбрать несколько значений, зажмите клавишу Ctrl.

Исходный код:

<select class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
</select>

<select multiple class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
</select>

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

Поля и выпадающие списки, как и кнопки, имеют свою сетку размеров. При этом регулируется размер шрифта и отступов, а не ширина. Для этого используются классы input-lg и input-sm:

Поля для ввода текста:

Выпадающие списки:

.input-lg по умолчанию .input-sm

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>