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

Tutorial básico do Bootstrap

Plugin do Bootstrap

Grupo de Caixas de Entrada Bootstrap

Este capítulo explicará outra característica suportada pelo Bootstrap, o grupo de caixas de entrada. O grupo de caixas de entrada é expandido a partir de Controles de formulárioUtilize o grupo de caixas de entrada, você pode facilmente adicionar texto ou botões como prefixo e sufixo às caixas de entrada baseadas em texto.

Ao adicionar conteúdo de prefixo e sufixo ao campo de entrada, você pode adicionar elementos comuns ao entrada do usuário. Por exemplo, você pode adicionar o símbolo de dólar, ou adicionar @ antes do nome de usuário do Twitter, ou outros elementos comuns necessários para a interface de aplicativo.

Para .form-control Os passos para adicionar elementos de prefixo ou sufixo são os seguintes:

  • Coloque o elemento de prefixo ou sufixo em um <div> com a classe .input-group Dentro do <div>.

  • Dentro do <div> com a classe .input-group-addon Coloque conteúdo adicional dentro do <span>.

  • Coloque o <span> antes ou depois do elemento <input>.

Para manter a compatibilidade entre navegadores, evite usar o elemento <select>, pois eles não renderizam completamente o efeito no navegador WebKit. Também não aplique diretamente a classe do grupo de caixas de entrada ao grupo de formulários, o grupo de caixas de entrada é um componente isolado.

Grupo básico de caixas de entrada

O exemplo a seguir demonstra o grupo básico de caixas de entrada:

Exemplo online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8>
	<title>Exemplo Bootstrap<　-　Grupo básico de caixas de entrada</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-exemplo bs-exemplo-form" role="form">
		<div class="input-grupo">
			<span　class="input-group-addon">@</span>
			<input type="text" class="form-control"　placeholder="twitterhandle">
		</div>
		<br>
		<div class="input-grupo">
			<input type="text" class="form-controle">
			<span　class="input-group-addon">.00</span>
		</div>
		<br>
		<div class="input-grupo">
			<span　class="input-group-addon">$</span>
			<input type="text" class="form-controle">
			<span　class="input-group-addon">.00</span>
		</div>
	</form>
</div>
</body>
</html>
Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

Tamanho do grupo de caixas de entrada

Você pode alterar o tamanho do grupo de caixas de entrada .input-group Adicione a classe relativa ao tamanho do formulário (por exemplo .input-group-lg、input-group-sm）para alterar o tamanho do grupo de caixas de entrada. O conteúdo da caixa de entrada se ajustará automaticamente ao tamanho.

O exemplo a seguir demonstra isso:

Exemplo online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8>
	<title>Exemplo Bootstrap<　-　Tamanho do grupo de caixas de entrada</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-exemplo bs-exemplo-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-grupo">
			<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>
Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

caixa de seleção e opção única

Você pode usar a caixa de seleção e a opção única como elemento prefixo ou sufixo do grupo de caixas de entrada, conforme exemplo a seguir:

Exemplo online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8>　
	<title>Exemplo Bootstrap<　-　plugin de caixa de seleção e opção única do grupo de caixas de entrada</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-exemplo bs-exemplo-form" role="form">
		<div class="row">
			<div class="col-lg-6>
				<div class="input-grupo">
					<span　class="input-group-addon">
						<input　type="checkbox">
					</span>
					<input type="text" class="form-controle">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　--><br>
			<div class="col-lg-6>
				<div class="input-grupo">
					<span　class="input-group-addon">
						<input　type="radio">
					</span>
					<input type="text" class="form-controle">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>
Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

plugin de botão

Você também pode usar o botão como elemento prefixo ou sufixo do grupo de caixas de entrada, neste caso você não está adicionando .input-group-addon class，você precisa usar class .input-group-btn para envolver o botão. Isso é necessário porque o estilo padrão do navegador não será reescrito. O exemplo a seguir demonstra isso:

Exemplo online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8>　
	<title>Exemplo Bootstrap<　-　plugin de botão do grupo de caixas de entrada</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-exemplo bs-exemplo-form" role="form">
		<div class="row">
			<div class="col-lg-6>
				<div class="input-grupo">
					<span　class="input-group-btn">
						<button　class="btn　btn-default"　type="button">
							Go!
						</botão>
					</span>
					<input type="text" class="form-controle">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　--><br>
			<div class="col-lg-6>
				<div class="input-grupo">
					<input type="text" class="form-controle">
					<span　class="input-group-btn">
						<button　class="btn　btn-default"　type="button">
							Go!
						</botão>
					</span>
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>
Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

botão com menu suspenso

Adicione um botão com menu suspenso no grupo de caixas de entrada, basta simplesmente em um .input-group-btn class" que envolve o botão e o menu de arrasto, conforme o exemplo a seguir:

Exemplo online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8>　
	<title>Exemplo Bootstrap<　-　Botão de menu de arrasto da caixa de entrada</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-exemplo bs-exemplo-form" role="form">
		<div class="row">
			<div class="col-lg-6>
				<div class="input-grupo">
					<div class="input-group-btn">
						<button type="button" class="btn btn-padrão dropdown-toggle" data-toggle="dropdown">
							Menu de arrasto　
							<span class="caret"></span>
						</botão>
						<ul class="dropdown-menu">
							<li><a href="#">Funcionalidade</a></li>
							<li><a href="#">Outra funcionalidade</a></li>
							<li><a href="#">Outro</a></li>
							<li class="divider"></li>
							<li><a href="#">Link Separado</a></li>
						</ul>
					</div><!--　/btn-group　-->
					<input type="text" class="form-controle">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　--><br>
			<div class="col-lg-6>
				<div class="input-grupo">
					<input type="text" class="form-controle">
					<div class="input-group-btn">
						<button type="button" class="btn btn-padrão dropdown-toggle" data-toggle="dropdown">
							Menu de arrasto　
							<span class="caret"></span>
						</botão>
						<ul class="dropdown-menu de arrasto-direita">
							<li><a href="#">Funcionalidade</a></li>
							<li><a href="#">Outra funcionalidade</a></li>
							<li><a href="#">Outro</a></li>
							<li class="divider"></li>
							<li><a href="#">Link Separado</a></li>
						</ul>
					</div><!--　/btn-group　-->
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>
Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

Botão de menu de arrasto separado

Adicione um botão de separação com menu de arrasto na caixa de entrada, use um estilo semelhante ao botão do menu de arrasto, mas adicione funcionalidades principais ao menu de arrasto, conforme o exemplo a seguir:

Exemplo online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8>　
	<title>Exemplo Bootstrap<　-　Botão de menu de arrasto separado na caixa de entrada</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-exemplo bs-exemplo-form" role="form">
		<div class="row">
			<div class="col-lg-6>
				<div class="input-grupo">
					<div class="input-group-btn">
						<button type="button" class="btn btn-default" tabindex="-1">Menu de arrasto<
						</botão>
						<button type="button" class="btn btn-padrão dropdown-toggle" data-toggle="dropdown" tabindex="-1>
							<span class="caret"></span>
							<span class="sr-apenas">Alternar menu de arrasto</span>
						</botão>
						<ul class="dropdown-menu">
							<li><a href="#">Funcionalidade</a></li>
							<li><a href="#">Outra funcionalidade</a></li>
							<li><a href="#">Outro</a></li>
							<li class="divider"></li>
							<li><a href="#">Link Separado</a></li>
						</ul>
					</div><!--　/btn-group　-->
					<input type="text" class="form-controle">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　--><br>
			<div class="col-lg-6>
				<div class="input-grupo">
					<input type="text" class="form-controle">
					<div class="input-group-btn">
						<button type="button" class="btn btn-default" tabindex="-1">Menu de arrasto<
						</botão>
						<button type="button" class="btn btn-padrão dropdown-toggle" data-toggle="dropdown" tabindex="-1>
							<span class="caret"></span>
							<span class="sr-apenas">Alternar menu de arrasto</span>
						</botão>
						<ul class="dropdown-menu de arrasto-direita">
							<li><a href="#">Funcionalidade</a></li>
							<li><a href="#">Outra funcionalidade</a></li>
							<li><a href="#">Outro</a></li>
							<li class="divider"></li>
							<li><a href="#">Link Separado</a></li>
						</ul>
					</div><!--　/btn-group　-->
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>
Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

Elementos de Navegação BootstrapMenu Suspensível de Botão Bootstrap