Bootstrap4 Tutoriales básicos

Bootstrap4 Grupo de cuadros de entrada Bootstrap4 Formulario

Bootstrap4 Controles de formulario

Bootstrap4 Supporta los siguientes controles de formulario:

input
textarea
checkbox
radio
select

Bootstrap Input

Bootstrap admite todos los HTML5 Tipo de entrada: text, password, datetime, datetime-local, fecha, mes, hora, semana, número, email, url, búsqueda, tel, y color.

Nota: Si no se declara correctamente el atributo type de input, el estilo del cuadro de entrada no se mostrará.

El siguiente ejemplo utiliza dos elementos input, uno es text y el otro password:

ejemplo

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div class="container">
　　<h2>Control de formulario: input</h2>
　　<p>El siguiente ejemplo utiliza dos elementos input, uno es text y el otro password:</p>/p>
　　<form>
　　　　<div class="form-group">
　　　　　　<label for="usr">Nombre de usuario:</label>/label>
　　　　　　<input tipo="text" class="form-control" id="usr">
　　　　</div>
　　　　<div class="form-group">
　　　　　　<label for="pwd">Contraseña:</label>/label>
　　　　　　<input tipo="password" class="form-control" id="pwd">
　　　　</div>
　　</form>
</div>
</body>
</html>

Prueba aquí ‹/›

Textarea Bootstrap

El siguiente ejemplo muestra el estilo de textarea.

ejemplo

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div class="container">
　　<h2>Control de formulario: textarea</h2>
　　<p>El siguiente ejemplo muestra el estilo de textarea.</p>/p>
　　<form>
　　　　<div class="form-group">
　　　　　　<label for="comment">Comentario:</label>/label>
　　　　　　<textarea class="form-control" filas="5" id="comment"></textarea>
　　　　</div>
　　</form>
</div>
</body>
</html>

Prueba aquí ‹/›

Casilla de verificación Bootstrap (checkbox)

Las casillas de verificación se utilizan para permitir que el usuario seleccione una o más opciones preestablecidas.

Los siguientes ejemplos incluyen tres opciones. La última está deshabilitada:

ejemplo

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div class="container">
　　<h2>Control de formulario: checkbox</h2>
　　<p>Los siguientes ejemplos incluyen tres opciones. La última está deshabilitada: </p>
　　<form>
　　　　<div class="form-check">
　　　　　　<label class="form-comprobación-">
　　　　　　　　<input tipo="checkbox" class="form-comprobación-input" valor="">Opción　1
　　　　　　</label>
　　　　</div>
　　　　<div class="form-check">
　　　　　　<label class="form-comprobación-">
　　　　　　　　<input tipo="checkbox" class="form-comprobación-input" valor="">Opción　2
　　　　　　</label>
　　　　</div>
　　　　<div class="form-check disabled">
　　　　　　<label class="form-comprobación-">
　　　　　　　　<input tipo="checkbox" class="form-comprobación-input"　value=""　disabled>Option　3
　　　　　　</label>
　　　　</div>
　　</form>
</div>
</body>
</html>

Prueba aquí ‹/›

usando .form-comprobación-clase inline permite que las opciones se muestren en la misma línea:

ejemplo

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div class="container">
　　<h2>Control de formulario: checkbox</h2>
　　<p>El siguiente ejemplo incluye tres opciones. La última está deshabilitada, usando .form-comprobación-inline clase permite que las opciones se muestren en la misma línea: </p>
　　<form>
　　　　<div class="form-check form-comprobación-inline">
　　　　　　<label class="form-comprobación-">
　　　　　　　　<input tipo="checkbox" class="form-comprobación-input" valor="">Opción　1
　　　　　　</label>
　　　　</div>
　　　　<div class="form-check form-comprobación-inline">
　　　　　　<label class="form-comprobación-">
　　　　　　　　<input tipo="checkbox" class="form-comprobación-input" valor="">Opción　2
　　　　　　</label>
　　　　</div>
　　　　<div class="form-check form-comprobación-inline disabled">
　　　　　　<label class="form-comprobación-">
　　　　　　　　<input tipo="checkbox" class="form-comprobación-input"　value=""　disabled>Option　3
　　　　　　</label>
　　　　</div>
　　</form>
</div>
</body>
</html>

Prueba aquí ‹/›

Bootstrap Botones de opción (Radio)

Los botones de opción se utilizan para permitir que el usuario seleccione una opción de una serie de opciones preestablecidas, solo se puede seleccionar una.

Los siguientes ejemplos incluyen tres opciones. La última está deshabilitada:

ejemplo

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div class="container">
　　<h2>Control de formulario: radio</h2>
　　<p>Los siguientes ejemplos incluyen tres opciones. La última está deshabilitada: </p>
　　<form>
　　　　<div　class="radio">
　　　　　　<label><input　type="radio"　name="optradio">Option　1</label>
　　　　</div>
　　　　<div　class="radio">
　　　　　　<label><input　type="radio"　name="optradio">Option　2</label>
　　　　</div>
　　　　<div　class="radio　disabled">
　　　　　　<label><input　type="radio"　name="optradio"　disabled>Option　3</label>
　　　　</div>
　　</form>
</div>
</body>
</html>

Prueba aquí ‹/›

Utilice .radio-clase inline permite que las opciones se muestren en la misma línea:

ejemplo

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div class="container">
　　<h2>Control de formulario: radio</h2>
　　<p>Los siguientes ejemplos incluyen tres opciones. La última está deshabilitada, utilizando .radio-inline　clase permite que las opciones se muestren en la misma línea: </p>
　　<form>
　　　　<label　class="radio-inline"><input　type="radio"　name="optradio">Option　1</label>
　　　　<label　class="radio-inline"><input　type="radio"　name="optradio">Option　2</label>
　　　　<label　class="radio-inline"><input　type="radio"　name="optradio"　disabled>Option　3</label>
　　</form>
</div>
</body>
</html>

Prueba aquí ‹/›

Menú desplegable Bootstrap select

Cuando desee que el usuario seleccione una opción de varias opciones, pero por defecto solo pueda seleccionar una opción, utilice el cuadro de selección.

Los siguientes ejemplos incluyen dos menús desplegables:

ejemplo

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div class="container">
　　<h2>Controles de formulario: select</h2>
　　<p>El siguiente formulario contiene dos menús desplegables (listas select):</p>
　　<form>
　　　　<div class="form-group">
　　　　　　<label for="sel1">Menú desplegable de selección única:</label>
　　　　　　<select class="form-control" id="sel1">
　　　　　　　　<option>1</option>
　　　　　　　　<option>2</option>
　　　　　　　　<option>3</option>
　　　　　　　　<option>4</option>
　　　　　　</select>
　　　　　　<br>
　　　　　　<label for="sel2">Menú desplegable de selección múltiple (mantén pulsada la tecla shift para seleccionar múltiples opciones):</label>
　　　　　　<select multiple class="form-control" id="sel2">
　　　　　　　　<option>1</option>
　　　　　　　　<option>2</option>
　　　　　　　　<option>3</option>
　　　　　　　　<option>4</option>
　　　　　　　　<option>5</option>
　　　　　　</select>
　　　　</div>
　　</form>
</div>
</body>
</html>

Prueba aquí ‹/›

Bootstrap4 Grupo de cuadros de entrada Bootstrap4 Formulario