English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Основной курс Bootstrap

Bootstrap плагины

Формы Bootstrap

В этой главе мы рассмотрим, как использовать Bootstrap для создания форм. Bootstrap позволяет создавать различные стили форм с помощью простых тегов HTML и расширенных классов.

Layout формы

Bootstrap предоставляет следующие типы layouts для форм:

  • Вертикальная форма (по умолчанию)

  • Inline форма

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

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

Основная структура формы встроена в Bootstrap, отдельные элементы формы автоматически получают некоторые глобальные стили. Ниже приведены шаги по созданию основной формы:

  • Добавьте к родительскому элементу <form>. role="form".

  • Разместите этикетку и элемент управления в одном блоке с классом .form-group В <div>. Это необходимо для получения оптимального интервала.

  • Добавьте класс =" к всем текстовым элементам <input>, <textarea> и <select>.form-control"。

Онлайн пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Основная форма</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
	<div class="form-group">
		<label for="name">Имя</label>
		<input type="text" class="form-control" id="name">　
			　　　placeholder="Введите имя">
	</div>
	<div class="form-group">
		<label for="inputfile">Файл ввода</label>
		<input type="file" id="inputfile">
		<p class="help-block">Это пример блочного текста помощи.</p>
	</div>
	<div class="checkbox">
		<label>
			<input type="checkbox"> отметить
		</label>
	</div>
	<button type="submit" class="btn btn-default">Отправить</button>
</form>
</body>
</html>
Проверьте, пожалуйста,‹/›

Результаты показаны ниже:

Inline форма

Если вам нужно создать форму, все элементы которой выровнены по левому краю и подписи расположены рядом, добавьте класс в тег <form>. .form-inline.

Онлайн пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Inline форма</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-inline" role="form">
	<div class="form-group">
		<label class="sr-only" for="name">Имя</label>
		<input type="text" class="form-control" id="name">　
			　　　placeholder="Введите имя">
	</div>
	<div class="form-group">
		<label class="sr-only" for="inputfile">Файл ввода</label>
		<input type="file" id="inputfile">
	</div>
	<div class="checkbox">
		<label>
			<input type="checkbox"> отметить
		</label>
	</div>
	<button type="submit" class="btn btn-default">Отправить</button>
</form>
</body>
</html>
Проверьте, пожалуйста,‹/›

Результаты показаны ниже:

  • По умолчанию, в Bootstrap input, select и textarea имеют ширину 100%. При использовании INLINE форм, вам нужно установить ширину на элементах управления формой.

  • Используйте класс .sr-onlyВы можете скрыть этикетки INLINE форм.

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

Горизонтальные формы отличаются не только количеством тегов, но и внешним видом форм. Чтобы создать горизонтальную форму, следуйте следующим шагам:

  • Добавьте класс к родительскому <form> элементу .form-horizontal.

  • Разместите этикетку и элемент управления в одном блоке с классом .form-group в <div>.

  • Добавьте класс к этикетке .control-label.

Онлайн пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Вертикальная форма</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-horizontal" role="form">
	<div class="form-group">
		<label for="firstname" class="col-sm-2 control-label">Имя</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="firstname">　
				　　　placeholder="Введите имя">
		</div>
	</div>
	<div class="form-group">
		<label for="lastname" class="col-sm-2 control-label">Фамилия</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="lastname">　
				　　　placeholder="Введите фамилию">
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<div class="checkbox">
				<label>
					<input type="checkbox"> запомнить меня
				</label>
			</div>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<button type="submit" class="btn btn-default">Войти</button>
		</div>
	</div>
</form>
</body>
</html>
Проверьте, пожалуйста,‹/›

Результаты показаны ниже:

Поддерживаемые элементы управления формами

Bootstrap поддерживает наиболее распространенные элементы управления формами,主要是 input, textarea, checkbox, radio и select.

Поле ввода (Input)

Самыми распространенными текстовыми полями форм являются поля ввода input. Пользователь может вводить в них большинство необходимых данных для формы. Bootstrap предоставляет поддержку для всех типов input, поддерживаемых nativ HTML5, включая:text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel и color. Примерный type Указание является обязательным, чтобы input Получите полный стиль.

Онлайн пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Входной блок</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
	<div class="form-group">
		<label for="name">Метка</label>
		<input type="text" class="form-control" placeholder="Ввод текста">
	</div>
　</form>
</body>
</html>
Проверьте, пожалуйста,‹/›

Результаты показаны ниже:

Текстовое поле (Textarea)

Используйте текстовое поле textarea для многострочного ввода. В случае необходимости можно изменить rows Атрибуты (меньше строк = kleinerer Kasten, mehr Zeilen = größerer Kasten).

Онлайн пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Текстовое поле</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
	<div class="form-group">
		<label for="name">Текстовое поле</label>
		<textarea class="form-control" rows="3"></textarea>
	</div>
</form>
</body>
</html>
Проверьте, пожалуйста,‹/›

Результаты показаны ниже:

Флажки (Checkbox) и радиокнопки (Radio)

Флажки и радиокнопки позволяют пользователю выбирать из ряда предварительно установленных вариантов.

  • При создании формы, если вы хотите, чтобы пользователь选择了多个 элементы из списка, используйте checkbox. Если вы ограничиваете пользователя только одним выбором, используйте radio.

  • Для группы флажков и радиокнопок используйте .checkbox-inline или .radio-inline class, контролирует их отображение на одной строке.

Ниже приведен пример этих типов (по умолчанию и внутренний):

Онлайн пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Флажки и радиокнопки</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<label for="name">Пример по умолчанию для флажков и радиокнопок</label>
<div class="checkbox">
	<label><input type="checkbox" value="">Опция 1</label>
</div>
<div class="checkbox">
	<label><input type="checkbox" value="">Опция 2</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>　Опция 1
	</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Опция 2 - выберите её, чтобы取消选出 Опция 1
	</label>
</div>
<label for="name">Пример инлайн-чекбоксов и радио-кнопок</label>
<div>
	<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="optionsRadiosinline" id="optionsRadios3" value="option1" checked>　Опция 1
	</label>
	<label class="radio-inline">
		<input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2">　Опция 2
	</label>
</div>
</body>
</html>
Проверьте, пожалуйста,‹/›

Результаты показаны ниже:

Список выбора (Select)

Если вы хотите, чтобы пользователь мог выбирать из нескольких вариантов, но по умолчанию можно выбрать только один вариант, используйте список выбора.

  • Использование <select> для отображения списка вариантов, обычно это списки выбора, с которыми пользователи знакомы, например, штаты или числа.

  • Использование multiple="multiple" Позволяет пользователю выбрать несколько вариантов.

Ниже приведены примеры этих типов (select и multiple):

Онлайн пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример Bootstrap - Выбор списка</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
	<div class="form-group">
		<label for="name">Выберите список</label>
		<select class="form-control">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
		<label for="name">Список выбора с множественным выбором</label>
		<select multiple class="form-control">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
	</div>
</form>
</body>
</html>
Проверьте, пожалуйста,‹/›

Результаты показаны ниже:

Статические элементы управления

Когда вам нужно поместить чистый текст после этикетки формы в горизонтальной форме, используйте класс <p>. .form-control-static.

Онлайн пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример Bootstrap - статические элементы управления</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-horizontal" role="form">
	<div class="form-group">
		<label class="col-sm-2 control-label">Email</label>
		<div class="col-sm-10">
			<p class="form-control-static">[email protected]</p>
		</div>
	</div>
	<div class="form-group">
		<label for="inputPassword" class="col-sm-2 control-label">Пароль</label>
		<div class="col-sm-10">
			<input type="password" class="form-control" id="inputPassword">　
				　　　placeholder="Введите пароль">
		</div>
	</div>
</form>
</body>
</html>
Проверьте, пожалуйста,‹/›

Результаты показаны ниже:

состояния элементов управления форм

Кроме того :focus состояние (то есть, пользователь нажимает на input или использует клавишу tab, чтобы сосредоточиться на input), Bootstrap также определяет стили для заблокированных полей ввода и предоставляет классы для проверки форм.

фокус ввода

когда ввод input получает :focus в момент, когда курсор мыши находится над полем ввода, контур поля ввода будет удален, и будет применен box-shadow.

Заблокированный ввод input

Если вы хотите заблокировать поле ввода input, просто добавьте disabled атрибут, который не только блокирует поля ввода, но и изменяет стиль поля ввода и стиль курсора мыши при наведении на элемент.

Заблокированный набор полей fieldset

Добавьте атрибут disabled к <fieldset>, чтобы заблокировать все элементы управления внутри <fieldset>.

Состояние проверки

Bootstrap включает в себя стили проверки для сообщений об ошибках, предупреждениях и успехе. Достаточно просто добавить соответствующий класс к родительскому элементу (.has-warning, .has-error или .has-successи можно использовать состояние проверки.

Пример показывает все состояния элементов управления:

Онлайн пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Состояние контролей формы</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-horizontal" role="form">
	<div class="form-group">
		<label class="col-sm-2 control-label">Фокус</label>
		<div class="col-sm-10">
			<input class="form-control" id="focusedInput" type="text" value="Этот флажок фокусируется...">
		</div>
	</div>
	<div class="form-group">
		<label for="inputPassword" class="col-sm-2 control-label">
			Запрещено
		</label>
		<div class="col-sm-10">
			<input class="form-control" id="disabledInput" type="text" placeholder="Запрещено вводить в это поле..." disabled>
		</div>
	</div>
	<fieldset disabled>
		<div class="form-group">
			<label for="disabledTextInput" class="col-sm-2 control-label">Запрещено вводить (Fieldset disabled)
			</label>
			<div class="col-sm-10">
				<input type="text" id="disabledTextInput" class="form-control" placeholder="Запрещено вводить">
			</div>
		</div>
		<div class="form-group">
			<label for="disabledSelect" class="col-sm-2 control-label">Запрещено выбирать меню (Fieldset disabled)
			</label>
			<div class="col-sm-10">
				<select id="disabledSelect" class="form-control">
					<option>Запрещено выбирать</option>
				</select>
			</div>
		</div>
	</fieldset>
	<div class="form-group has-success">
		<label class="col-sm-2 control-label" for="inputSuccess">
			Ввод успешен
		</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="inputSuccess">
		</div>
	</div>
	<div class="form-group has-warning">
		<label class="col-sm-2 control-label" for="inputWarning">
			Предупреждение ввода
		</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="inputWarning">
		</div>
	</div>
	<div class="form-group has-error">
		<label class="col-sm-2 control-label" for="inputError">
			Ошибка ввода
		</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="inputError">
		</div>
	</div>
</form>
</body>
</html>
Проверьте, пожалуйста,‹/›

Результаты показаны ниже:

Размеры контролей формы

Вы можете использовать классы отдельно: .input-lg и .col-lg-* Настройте высоту и ширину формы. Ниже приведен пример:

Онлайн пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap пример - Размеры контролей формы</title>
	<link rel="stylesheet" href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
	<div class="form-group">
		<input class="form-control input-lg" type="text" placeholder=".input-lg">
	</div>
	<div class="form-group">
		<input class="form-control" type="text" placeholder="默认输入">
	</div>
	<div class="form-group">
		<input class="form-control input-sm" type="text" placeholder=".input-sm">
	</div>
	<div class="form-group">
	</div>
	<div class="form-group">
		<select class="form-control input-lg">
			<option value="">.input-lg</option>
		</select>
	</div>
	<div class="form-group">
		<select class="form-control">
			<option value="">Выберите по умолчанию</option>
		</select>
	</div>
	<div class="form-group">
		<select class="form-control input-sm">
			<option value="">.input-sm</option>
		</select>
	</div>
	<div class="row">
		<div class="col-lg-2">
			<input type="text" class="form-control" placeholder=".col-lg-2">
		</div>
		<div class="col-lg-3">
			<input type="text" class="form-control" placeholder=".col-lg-3">
		</div>
		<div class="col-lg-4">
			<input type="text" class="form-control" placeholder=".col-lg-4">
		</div>
	</div>
</form>
</body>
</html>
Проверьте, пожалуйста,‹/›

Результаты показаны ниже:

Текст помощи в форме

Bootstrap контроллеры форм могут иметь блоковую текстовую помощь для поля ввода input. Чтобы добавить блок, занимающий всю ширину, используйте после <input> .help-block.Ниже приведен пример:

Онлайн пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Текст помощи в форме</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
	<span>Пример текста помощи</span>
	<input class="form-control" type="text" placeholder="">
	<span class="help-block">Длинный текст помощи, превышающий одну строку,</span>
		Необходимо расширить на следующую строку. В этом примере текст помощи составляет две строки.</span>
</form>
</body>
</html>
Проверьте, пожалуйста,‹/›

Результаты показаны ниже:

Кнопки BootstrapТаблицы Bootstrap