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

Tutoriales básicos de Bootstrap

Plugin de Bootstrap

Grupo de campos de entrada de Bootstrap

Este capítulo explicará otra característica admitida por Bootstrap, el grupo de cuadros de entrada. El grupo de cuadros de entrada se extiende desde Controles de formularioPuede agregar fácilmente texto o botones como prefijo y sufijo a los cuadros de entrada basados en texto utilizando el grupo de cuadros de entrada.

Agregue elementos comunes a la entrada del usuario mediante el contenido prefijo y sufijo en el dominio de entrada. Por ejemplo, puede agregar el símbolo de dólar, o agregar @ antes del nombre de usuario de Twitter, o otros elementos comunes necesarios para las interfaces de aplicación.

Hacia .form-control Los pasos para agregar elementos prefijo o sufijo son los siguientes:

  • Coloque los elementos prefijo o sufijo en un class .input-group del <div>.

  • Luego, dentro del mismo <div>, en el class .input-group-addon Coloque contenido adicional dentro del <span>.

  • Coloque este <span> delante o detrás del elemento <input>.

Para mantener la compatibilidad entre navegadores, evite usar elementos <select>, ya que no se pueden renderizar completamente en los navegadores WebKit. Tampoco aplique directamente la clase del grupo de cuadros de entrada al grupo de formulario, el grupo de cuadros de entrada es un componente aislado.

Grupo de cuadros de entrada básico

El siguiente ejemplo muestra el grupo de cuadros de entrada básico:

ejemplo en línea

<!DOCTYPE html>
<html>
<cabecera>
	<meta charset="utf-8>
	<título>Bootstrap ejemplo　-　Grupo de cuadros de entrada básico</título>
	<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>
</cabecera>
<body>
<div style="padding:　100px　100px　10px;">
	<form class="bs-ejemplo bs-ejemplo-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-control">
			<span class="input-group-addon">.00</span>
		</div>
		<br>
		<div class="input-grupo">
			<span class="input-group-addon">$</span>
			<input type="text" class="form-control">
			<span class="input-group-addon">.00</span>
		</div>
	</form>
</div>
</body>
</html>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

Tamaño del grupo de cuadros de entrada

Puede cambiar el tamaño del grupo de cuadros de entrada mediante .input-group Agregar clase relativa al tamaño del formulario (por ejemplo .input-group-lg、input-group-sm）para cambiar el tamaño del grupo de cuadros de entrada. El contenido del cuadro de entrada se ajustará automáticamente en tamaño.

El siguiente ejemplo demuestra esto:

ejemplo en línea

<!DOCTYPE html>
<html>
<cabecera>
	<meta charset="utf-8>
	<título>Bootstrap ejemplo　-　Tamaño del grupo de cuadros de entrada</título>
	<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>
</cabecera>
<body>
<div style="padding:　100px　100px　10px;">
	<form class="bs-ejemplo bs-ejemplo-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>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

casilla de verificación y plugin de opción

Puede usar la casilla de verificación y el plugin de opción como elemento prefijo o sufijo del grupo de cuadros de entrada, como se muestra en el siguiente ejemplo:

ejemplo en línea

<!DOCTYPE html>
<html>
<cabecera>
	<meta charset="utf-8>　
	<título>Bootstrap ejemplo　-　Plugin de casilla de verificación y opción del grupo de cuadros de entrada</título>
	<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>
</cabecera>
<body>
<div style="padding:　100px　100px　10px;">
	<form class="bs-ejemplo bs-ejemplo-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-control">
				</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-control">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

plugin de botón

También puede usar el botón como elemento prefijo o sufijo del grupo de cuadros de entrada, en este caso no es agregar .input-group-addon class, debe usar class .input-group-btn para envolver el botón. Esto es obligatorio, ya que el estilo predeterminado del navegador no se puede sobrescribir. El siguiente ejemplo demuestra esto:

ejemplo en línea

<!DOCTYPE html>
<html>
<cabecera>
	<meta charset="utf-8>　
	<título>Bootstrap ejemplo　-　Plugin de botón del grupo de cuadros de entrada</título>
	<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>
</cabecera>
<body>
<div style="padding:　100px　100px　10px;">
	<form class="bs-ejemplo bs-ejemplo-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">
							¡Vamos!
						</botón>
					</span>
					<input type="text" class="form-control">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　--><br>
			<div class="col-lg-6>
				<div class="input-grupo">
					<input type="text" class="form-control">
					<span class="input-group-btn">
						<button class="btn btn-default" type="button">
							¡Vamos!
						</botón>
					</span>
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

botón con menú desplegable

Agregar un botón con menú desplegable en el grupo de cuadros de entrada, simplemente se necesita agregar en un .input-group-btn class que envuelve el botón y el menú desplegable, como se muestra en el siguiente ejemplo:

ejemplo en línea

<!DOCTYPE html>
<html>
<cabecera>
	<meta charset="utf-8>　
	<título>Bootstrap ejemplo　-　Botón desplegable del grupo de campos de entrada</título>
	<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>
</cabecera>
<body>
<div style="padding:　100px　100px　10px;">
	<form class="bs-ejemplo bs-ejemplo-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-descripción predeterminada dropdown-toggle" data-toggle="dropdown">
							Menú desplegable　
							<span class="caret"></span>
						</botón>
						<ul class="dropdown-menú">
							<li><a href="#">Función</a></li>
							<li><a href="#">Otra función</a></li>
							<li><a href="#">Otro</a></li>
							<li class="divider"></li>
							<li><a href="#">Enlace separado</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-grupo">
					<input type="text" class="form-control">
					<div class="input-group-btn">
						<button type="button" class="btn btn-descripción predeterminada dropdown-toggle" data-toggle="dropdown">
							Menú desplegable　
							<span class="caret"></span>
						</botón>
						<ul class="dropdown-menú desplegable-derecha">
							<li><a href="#">Función</a></li>
							<li><a href="#">Otra función</a></li>
							<li><a href="#">Otro</a></li>
							<li class="divider"></li>
							<li><a href="#">Enlace separado</a></li>
						</ul>
					</div><!--　/btn-group　-->
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

Botón desplegable separado

Añada un botón separado con un menú desplegable al grupo de campos de entrada, utilice un estilo similar al del botón del menú desplegable, pero agregue la funcionalidad principal del menú desplegable, como se muestra en el siguiente ejemplo:

ejemplo en línea

<!DOCTYPE html>
<html>
<cabecera>
	<meta charset="utf-8>　
	<título>Bootstrap ejemplo　-　Botón desplegable separado en el grupo de campos de entrada</título>
	<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>
</cabecera>
<body>
<div style="padding:　100px　100px　10px;">
	<form class="bs-ejemplo bs-ejemplo-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">Menú desplegable
						</botón>
						<button type="button" class="btn btn-descripción predeterminada dropdown-toggle" data-toggle="dropdown" tabindex="-1>
							<span class="caret"></span>
							<span class="sr-sólo">Cambiar el menú desplegable</span>
						</botón>
						<ul class="dropdown-menú">
							<li><a href="#">Función</a></li>
							<li><a href="#">Otra función</a></li>
							<li><a href="#">Otro</a></li>
							<li class="divider"></li>
							<li><a href="#">Enlace separado</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-grupo">
					<input type="text" class="form-control">
					<div class="input-group-btn">
						<button type="button" class="btn btn-default" tabindex="-1">Menú desplegable
						</botón>
						<button type="button" class="btn btn-descripción predeterminada dropdown-toggle" data-toggle="dropdown" tabindex="-1>
							<span class="caret"></span>
							<span class="sr-sólo">Cambiar el menú desplegable</span>
						</botón>
						<ul class="dropdown-menú desplegable-derecha">
							<li><a href="#">Función</a></li>
							<li><a href="#">Otra función</a></li>
							<li><a href="#">Otro</a></li>
							<li class="divider"></li>
							<li><a href="#">Enlace separado</a></li>
						</ul>
					</div><!--　/btn-group　-->
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

Elementos de navegación de BootstrapMenú desplegable de botones de Bootstrap