Bootstrap базовый курс

Bootstrap плагины

Элементы навигации Bootstrap Выпадающие меню кнопок Bootstrap

Группы полей ввода Bootstrap

Эта глава расскажет о другой функции Bootstrap, поддерживаемой группами полей ввода. Группы полей ввода расширены из Форма управления. Используя группу ввода, вы можете легко добавить текст или кнопку в качестве префикса и суффикса к текстовому вводу.

Добавляя префикс и суффикс в область ввода, вы можете добавить общие элементы к вводу пользователя. Например, вы можете добавить символ доллара, или добавить @ перед именем пользователя Twitter, или другие общие элементы, необходимые для интерфейса приложения.

Добавьте .form-control Шаги по добавлению префикса или суффикса элементов:

Поместите префикс или суффикс в класс .input-group внутри <div>.
Затем, в том же <div>, в классе .input-group-addon Внутри <span> поместите дополнительный контент.
Поместите этот <span> перед или после элемента <input>.

Чтобы обеспечить跨浏览器的兼容ность, избегайте использования элемента <select>, так как они не могут быть полностью отрендерены в браузерах WebKit. Не применяйте класс ввода группы напрямую к группе формы, вводная группа является изолированным компонентом.

Базовая группа ввода

Ниже приведен пример базовой группы ввода:

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

Пример

<!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>
<div style="padding: 100px 100px 10px;">
	<form class="bs-example bs-example-form" role="form">
		<div class="input-group">
			<span class="input-group-addon">@</span>
			<input type="text" class="form-control" placeholder="twitterhandle">
		</div>
		<br>
		<div class="input-group">
			<input type="text" class="form-control">
			<span class="input-group-addon">.00</span>
		</div>
		<br>
		<div class="input-group">
			<span class="input-group-addon">$</span>
			<input type="text" class="form-control">
			<span class="input-group-addon">.00</span>
		</div>
	</form>
</div>
</body>
</html>

Проверьте, посмотрите ‹/›

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

Размер ввода группы

Вы можете изменить размер ввода группы, добавив .input-group Добавьте класс, определяющий относительный размер формы (например .input-group-lg, input-group-smИзмените размер ввода группы с помощью ( ). Содержимое ввода автоматически изменится в размер.

Ниже приведен пример для демонстрации этой возможности:

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

Пример

<!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>
<div style="padding: 100px 100px 10px;">
	<form class="bs-example bs-example-form" role="form">
		<div class="input-group input-group-lg">
			<span class="input-group-addon">@</span>
			<input type="text" class="form-control" placeholder="Twitterhandle">
		</div><br>
		<div class="input-group">
			<span class="input-group-addon">@</span>
			<input type="text" class="form-control" placeholder="Twitterhandle">
		</div><br>
		<div class="input-group input-group-sm">
			<span class="input-group-addon">@</span>
			<input type="text" class="form-control" placeholder="Twitterhandle">
		</div>
	</form>
</div>
</body>
</html>

Проверьте, посмотрите ‹/›

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

Флажки и радиокнопки

Вы можете использовать плагины для флажков и радиокнопок в качестве префикса или суффикса элемента группы полей ввода, как показано в следующем примере:

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

Пример

<!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>
<div style="padding: 100px 100px 10px;">
	<form class="bs-example bs-example-form" role="form">
		<div class="row">
			<div class="col-lg-6">
				<div class="input-group">
					<span class="input-group-addon">
						<input type="checkbox">
					</span>
					<input type="text" class="form-control">
				</div><!--　/input-group　-->
			</div><!-- /.col-lg-6 --><br>
			<div class="col-lg-6">
				<div class="input-group">
					<span class="input-group-addon">
						<input type="radio">
					</span>
					<input type="text" class="form-control">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>

Проверьте, посмотрите ‹/›

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

Плагин для кнопки

Вы также можете использовать кнопку как префикс или суффикс элемента группы полей ввода, в этом случае вы не добавляете .input-group-addon класс, вам нужно использовать класс .input-group-btn Чтобы обернуть кнопку, вам нужно использовать класс. Это необходимо, так как стандартные стили браузера не будут перезаписаны. Следующий пример демонстрирует это:

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

Пример

<!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>
<div style="padding: 100px 100px 10px;">
	<form class="bs-example bs-example-form" role="form">
		<div class="row">
			<div class="col-lg-6">
				<div class="input-group">
					<span class="input-group-btn">
						<button class="btn btn-default" type="button">
							Go!
						</button>
					</span>
					<input type="text" class="form-control">
				</div><!--　/input-group　-->
			</div><!-- /.col-lg-6 --><br>
			<div class="col-lg-6">
				<div class="input-group">
					<input type="text" class="form-control">
					<span class="input-group-btn">
						<button class="btn btn-default" type="button">
							Go!
						</button>
					</span>
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>

Проверьте, посмотрите ‹/›

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

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

Добавьте кнопку с выпадающим меню в группу полей ввода, просто оберните её в .input-group-btn Оберните кнопку и выпадающее меню классом, как показано в следующем примере:

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

Пример

<!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>
<div style="padding: 100px 100px 10px;">
	<form class="bs-example bs-example-form" role="form">
		<div class="row">
			<div class="col-lg-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="#">Функция</a></li>
							<li><a href="#">Другая функция</a></li>
							<li><a href="#">Другое</a></li>
							<li class="divider"></li>
							<li><a href="#">Отдельная ссылка</a></li>
						</ul>
					</div><!--　/btn-group　-->
					<input type="text" class="form-control">
				</div><!--　/input-group　-->
			</div><!-- /.col-lg-6 --><br>
			<div class="col-lg-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="#">Функция</a></li>
							<li><a href="#">Другая функция</a></li>
							<li><a href="#">Другое</a></li>
							<li class="divider"></li>
							<li><a href="#">Отдельная ссылка</a></li>
						</ul>
					</div><!--　/btn-group　-->
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>

Проверьте, посмотрите ‹/›

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

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

Добавьте кнопку с выпадающим меню в группу полей ввода, используя стиль, примерно такой же, как у кнопок меню, но добавьте основные функции, как показано в следующем примере:

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

Пример

<!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>
<div style="padding: 100px 100px 10px;">
	<form class="bs-example bs-example-form" role="form">
		<div class="row">
			<div class="col-lg-6">
				<div class="input-group">
					<div class="input-group-btn">
						<button type="button" class="btn btn-default" tabindex="-1">Выпадающее меню
						</button>
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
							<span class="caret"></span>
							<span class="sr-only">Переключение выпадающего меню</span>
						</button>
						<ul class="dropdown-menu">
							<li><a href="#">Функция</a></li>
							<li><a href="#">Другая функция</a></li>
							<li><a href="#">Другое</a></li>
							<li class="divider"></li>
							<li><a href="#">Отдельная ссылка</a></li>
						</ul>
					</div><!--　/btn-group　-->
					<input type="text" class="form-control">
				</div><!--　/input-group　-->
			</div><!-- /.col-lg-6 --><br>
			<div class="col-lg-6">
				<div class="input-group">
					<input type="text" class="form-control">
					<div class="input-group-btn">
						<button type="button" class="btn btn-default" tabindex="-1">Выпадающее меню
						</button>
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
							<span class="caret"></span>
							<span class="sr-only">Переключение выпадающего меню</span>
						</button>
						<ul class="dropdown-menu pull-right">
							<li><a href="#">Функция</a></li>
							<li><a href="#">Другая функция</a></li>
							<li><a href="#">Другое</a></li>
							<li class="divider"></li>
							<li><a href="#">Отдельная ссылка</a></li>
						</ul>
					</div><!--　/btn-group　-->
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>

Проверьте, посмотрите ‹/›

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

Элементы навигации Bootstrap Выпадающие меню кнопок Bootstrap