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

Tutoriales básicos de Bootstrap

Plugins de Bootstrap

Formularios de Bootstrap

En este capítulo, aprenderemos cómo crear formularios utilizando Bootstrap. Bootstrap permite crear diferentes estilos de formularios mediante algunas etiquetas HTML simples y clases extendidas.

Disposición del formulario

Bootstrap ofrece los siguientes tipos de disposiciones de formularios:

  • Formulario vertical (por defecto)

  • 内联表单

  • 水平表单

Formulario vertical o básico

La estructura básica del formulario es proporcionada por Bootstrap, y los controles individuales del formulario reciben algunos estilos globales automáticamente. A continuación, se enumeran los pasos para crear un formulario básico:

  • Agregar al elemento padre <form> role="form".

  • 把标签和控件放在一个带有 class .form-group en el <div> correspondiente. Esto es necesario para obtener el mejor espaciado.

  • Agregar la clase =" a todos los elementos de texto <input>、<textarea> y <select>form-control" 。

Ejemplo en línea

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Ejemplo Bootstrap　-　Formulario básico</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">Nombre</label>
		<input type="text" class="form-control"　id="name"　
			　　　placeholder="请输入名称">
	</div>
	<div class="form-group">
		<label for="inputfile">Ingreso de archivo</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>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

内联表单

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline.

Ejemplo en línea

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Ejemplo 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-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>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

  • 默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。

  • 使用 class .sr-only，您可以隐藏内联表单的标签。

水平表单

水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：

  • 向父 <form> 元素添加 class .form-horizontal.

  • 把标签和控件放在一个带有 class .form-group 的 <div> 中。

  • 向标签添加 class .control-label.

Ejemplo en línea

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Ejemplo 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>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

支持的表单控件

Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select.

输入框(Input)

cuadros de texto (Input)5 Los campos de texto más comunes en los formularios son los cuadros de texto input. Los usuarios pueden ingresar la mayoría de los datos necesarios en ellos. Bootstrap proporciona soporte para todos los tipos de HTMLsoporte para tipos de input, incluyendo:-text, password, datetime, datetime y local, date, month, time, week, number, email, url, search, tel。El color adecuado type declaración es obligatoria, de esta manera se puede input para obtener la estilo completo.

Ejemplo en línea

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Ejemplo Bootstrap　-　Cuadro de texto</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">Etiqueta</label>
		<input type="text" class="form-control" placeholder="Texto de entrada">
	</div>
　</form>
</body>
</html>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

Cuadro de texto (Textarea)

Al necesitar entrada de múltiples líneas, se puede usar el cuadro de texto textarea. Es posible cambiar rows propiedades (menos filas = caja más pequeña, más filas = caja más grande).

Ejemplo en línea

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Ejemplo Bootstrap　-　Cuadro de texto</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">Cuadro de texto</label>
		<textarea class="form-control" rows="3></textarea>
	</div>
</form>
</body>
</html>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

Casilla de verificación (Checkbox) y botón de opción (Radio)

Las casillas de verificación y los botones de opción se utilizan para permitir que el usuario seleccione de una serie de opciones preestablecidas.

  • Cuando cree un formulario, si desea que el usuario seleccione varias opciones de una lista, utilice checkbox。Si desea limitar que el usuario pueda seleccionar solo una opción, utilice radio.

  • para una serie de casillas de verificación y botones de opción .checkbox-inline o .radio-inline class, controla que se muestren en la misma línea.

A continuación, se muestra un ejemplo de ambos tipos (predeterminados e en línea):

Ejemplo en línea

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Ejemplo Bootstrap　-　Casilla de verificación y botón de opción</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">Ejemplo de casilla de verificación y botón de opción predeterminados</label>
<div class="checkbox">
	<label><input type="checkbox" value="">Opción　1</label>
</div>
<div class="checkbox">
	<label><input type="checkbox" value="">Opción　2</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios1" value="opción1" checked>opción　1
	</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios2" value="opción2">Opción　2　-　Al seleccionarlo, se deseleccionará la opción　1
	</label>
</div>
<label for="name">Ejemplo de casilla de verificación y botón de opción en línea</label>
<div>
	<label class="checkbox-inline">
		<input type="checkbox" id="inlineCheckbox"}1" value="opción1">opción　1
	</label>
	<label class="checkbox-inline">
		<input type="checkbox" id="inlineCheckbox"}2" value="opción2">opción　2
	</label>
	<label class="checkbox-inline">
		<input type="checkbox" id="inlineCheckbox"}3" value="opción3">opción　3
	</label>
	<etiqueta class="radio-inline">
		<input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="opción1" checked>opción　1
	</label>
	<etiqueta class="radio-inline">
		<input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="opción2">opción　2
	</label>
</div>
</body>
</html>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

caja de selección (Select)

Cuando desee que el usuario seleccione múltiples opciones, pero por defecto solo se pueda seleccionar una opción, utilice la caja de selección.

  • utilice <select> para mostrar opciones de lista, que suelen ser listas de selección que los usuarios conocen bien, como estados o números.

  • utilice multiple="multiple" permite que el usuario seleccione múltiples opciones.

El siguiente ejemplo muestra estos dos tipos (select y multiple):

Ejemplo en línea

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Ejemplo Bootstrap　-　caja de selección</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">
		<etiqueta for="name">lista de selección</label>
		<select class="form-control">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
		<etiqueta for="name">lista de selección múltiple deshabilitada</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>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

control de entrada estático

Cuando necesite colocar texto puro después de la etiqueta del formulario en un formulario horizontal, utilice la clase <p>. .form-control-estática.

Ejemplo en línea

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Ejemplo Bootstrap　-　control de entrada estático</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-etiqueta">Correo electrónico</label>
		<div class="col-sm-10">
			<p class="form-control-estática">[email protected]</p>
		</div>
	</div>
	<div class="form-group">
		<label　for="inputPassword"　class="col-sm-2　control-etiqueta">contraseña</label>
		<div class="col-sm-10">
			<input type="password" class="form-control" id="inputPassword"　
				　　　placeholder="Ingrese la contraseña">
		</div>
	</div>
</form>
</body>
</html>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

estado de control del formulario

Además :focus estado (es decir, cuando el usuario hace clic en input o usa la tecla tab para enfocar input), Bootstrap también define estilos para cuadros de entrada deshabilitados y proporciona clases para la validación del formulario.

foco del cuadro de entrada

cuando el cuadro de entrada input recibe :focus en ese momento, el contorno del cuadro de entrada se eliminará y se aplicará caja-sombra.

cuadro de entrada deshabilitado input

Si desea deshabilitar un cuadro de entrada input, simplemente agregue deshabilitado esta propiedad no solo deshabilita el cuadro de entrada, sino que también cambia el estilo del cuadro de entrada y el estilo del puntero del ratón cuando el puntero del ratón se coloca sobre el elemento.

conjunto de campos deshabilitados

向 <fieldset> 添加 disabled 属性以禁用 <fieldset> 内的所有控件。

验证状态

Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-警告、 .has-错误或 .has-成功）即可使用验证状态。

下面的示例演示了所有控件状态：

Ejemplo en línea

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Ejemplo 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 禁用）
			</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 禁用）
			</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">
			Error de entrada
		</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="inputError">
		</div>
	</div>
</form>
</body>
</html>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

Tamaño de los controles de formulario

Puede usar las clases .input-lg y .col-lg-* para establecer la altura y anchura del formulario. A continuación, se muestra un ejemplo de esto:

Ejemplo en línea

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Ejemplo Bootstrap　-　Tamaño de los controles de formulario</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="Entrada predeterminada">
	</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="">Selección predeterminada</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>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

Texto de ayuda del formulario

Bootstrap puede tener un texto de ayuda en bloque en el campo de entrada input. Para agregar un bloque de contenido que ocupe toda la anchura, utilice .help-block。A continuación, se muestra un ejemplo de esto:

Ejemplo en línea

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Ejemplo Bootstrap　-　Texto de ayuda del formulario</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>Ayuda de texto de ejemplo</span>
	<input class="form-control" type="text" placeholder="">
	<span class="help-block">Un bloque de texto de ayuda largo, que excede una línea,<
		Necesita extenderse a la siguiente línea. El texto de ayuda de este ejemplo tiene dos líneas.</span>
</form>
</body>
</html>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

Botones de BootstrapTablas de Bootstrap