Bootstrap4 Tutoriales básicos

Bootstrap4 Controles de formulario Bootstrap4 Navegación de pan de navegación

Bootstrap4 Formulario

El formulario HTML es una parte integral de las páginas web y aplicaciones, pero crear manualmente la disposición de los formularios o establecer estilos de controles de formulario utilizando CSS uno por uno suele ser aburrido. Bootstrap simplifica significativamente el proceso de estilo y alineación de controles de formulario (como etiquetas, campos de entrada, cuadros de selección, áreas de texto, botones, etc.) mediante un conjunto predefinido de clases.

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

Elementos del formulario <input>, <textarea>, y <select> elementos Al usar .form-en el caso de la clase .form 100%.

Bootstrap4 Disposición del formulario

Formulario apilado (ancho completo de la pantalla): dirección vertical
Formulario en línea: dirección horizontal

Bootstrap ofrece dos tipos de disposiciones de formularios:

Formulario apilado

A continuación se muestra un ejemplo de formulario apilado utilizando dos campos de entrada, una casilla de verificación y un botón de envío:

Ejemplo

<!DOCTYPE html>
<html>
<head>
　　<title> Ejemplo de 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>Formulario apilado</h2>
　　<form>
　　　　<div class="form-group">
　　　　　　<label for="email">Correo electrónico:</label/label>
　　　　　　<input type="email" class="form-control" id="email" placeholder="Introduce email">
　　　　</div>
　　　　<div class="form-group">
　　　　　　<label for="pwd">Contraseña:</label/label>
　　　　　　<input type="password" class="form-control" id="pwd" placeholder="Introduce la contraseña">
　　　　</div>
　　　　<div class="form-check">
　　　　　　<label class="form-check-label">
　　　　　　　　<input class="form-check-input" type="checkbox">　Recuérdame
　　　　　　</label>
　　　　</div>
　　　　<button type="submit" class="btn btn-primary">Enviar</button>
　　</form>
</div>
</body>
</html>

Prueba y observa ‹/›

El efecto después de ejecutar es el siguiente:

Formulario en línea

Todos los elementos de los formularios en línea están alineados a la izquierda.

Nota: Cuando el ancho de la pantalla es menor que 576px se mostrarán apilados verticalmente, si el ancho de la pantalla es mayor o igual que576px, los elementos del formulario se mostrarán en la misma línea horizontal.

El formulario en línea debe tener la clase .form-clase .inline.

A continuación se muestra un ejemplo de formulario en línea utilizando dos campos de entrada, una casilla de verificación y un botón de envío:

Ejemplo

<!DOCTYPE html>
<html>
<head>
　　<title> Ejemplo de 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>Formulario en línea</h2>
　　<p>El ancho de la pantalla es mayor o igual que　576px时才会水平显示。如果小于　576px则会生成堆叠表单。</br>/p>
　　<form class="form-inline">
　　　　<label for="email">Correo electrónico:</label/label>
　　　　<input type="email" class="form-control" id="email" placeholder="Introduce email">
　　　　<label for="pwd">Introduce la contraseña:</label>
　　　　<input type="password" class="form-control" id="pwd" placeholder="Introduce la contraseña">
　　　　<div class="form-check">
　　　　　　<label class="form-check-label">
　　　　　　　　<input class="form-check-input" type="checkbox">　Recuérdame
　　　　　　</label>
　　　　</div>
　　　　<button type="submit" class="btn btn-primary">Enviar</button>
　　</form>
</div>
</body>
</html>

Prueba y observa ‹/›

El efecto después de ejecutar es el siguiente:

Bootstrap4 Controles de formulario Bootstrap4 Navegación de pan de navegación