Bootstrap

Ing. Fernando Germán Arellano Ponce

Concepto

Bootstrap es un framework front-end utilizado para desarrollar aplicaciones web y

sitios mobile first, o sea, con un layout que se adapta a la pantalla del dispositivo
utilizado por el usuario.

Inicialmente, se llamó Twitter Blueprint y, un poco más tarde, en 2011, se

transformó en código abierto y su nombre cambió para Bootstrap. Desde
entonces fue actualizado varias veces y ya se encuentra en la versión 4.4.

El framework combina CSS y JavaScript para estilizar los elementos de una

página HTML. Permite mucho más que, simplemente, cambiar el color de los
botones y los enlaces.
Esta es una herramienta que proporciona interactividad en la página, por lo que ofrece
una serie de componentes que facilitan la comunicación con el usuario, como menús de
navegación, controles de página, barras de progreso y más.
Además de todas las características que ofrece el framework, su principal objetivo es
permitir la construcción de sitios web responsive para dispositivos móviles.
Esto significa que las páginas están diseñadas para funcionar en desktop, tablets y
smartphones, de una manera muy simple y organizada.
Bootstrap está constituido por una serie de archivos CSS y JavaScript responsables de
asignar características específicas a los elementos de la página.
Hay un archivo principal llamado bootstrap.css, que contiene una definición para todos
los estilos utilizados. Básicamente, la estructura del framework se compone de dos
directorios:
● css: contiene los archivos necesarios para la estilización de los elementos y una
alternativa al tema original;
● js: contiene la parte posterior del archivo bootstrap.js (original y minificado),
responsable de la ejecución de aplicaciones de estilo que requieren manipulación
interactiva.
Diseño Responsivo

Una de las características principales de Bootstrap es permitir que la adaptación

de la página se realice según el tipo de dispositivo utilizado.

Para garantizar la responsividad, el framework funciona con:

la estilización del elemento <div>;

el uso del class container.

En la práctica, el elemento <div>, funciona para crear una serie de notas, similar a
una tabla, capaz de estructurar la página de forma adaptable.
Ya hubo un intento de utilizar tablas para crear diseños responsivos, sin embargo
existían limitaciones para definir la longitud de las columnas lo que hizo imposible
su uso en dispositivos más pequeños, como smartphones.
El elemento <div> es más flexible, ya que permite definir y cambiar el tamaño de la
longitud fácilmente.
Bootstrap le ha asignado al elemento <div> una característica de class container,
que funciona para determinar las dimensiones apropiadas para los elementos
insertados en ese espacio.
Básicamente, o framework funciona con tres tipos de containers:
Container: como un conjunto con una propiedad de ancho máximo, que determina
qué tamaño de tela es ideal para crear el diseño de página.

Container fluid: considera la longitud total de la tela del dispositivo para definir el
diseño.

Para esto, se considera la propiedad width 100% en todos los límites de tamaño
de pantalla.

Container { breakpoint}: considera width 100% hasta alcanzar un cierto tamaño.

Biblioteca de Componentes
Alertas
O Bootstrap permite una configuración simple y rápida de diferentes tipos de alertas, con colores
específicos, según la situación.
Para mostrarle al usuario un alerta que indique atención, por ejemplo, simplemente debemos
usar .alert-danger y aparecerá un cuadro de texto con un fondo rojo:
¡Atención! ¡Cuidado mensaje de alerta!
Carrusel
Un componente ampliamente utilizado en Bootstrap es el Carrusel, una presentación de
diapositivas, es decir, una herramienta que permite la visualización de imágenes de manera
receptiva.
También permite la inclusión de efectos especiales para la transición de imágenes
y controles de visualización, como por ejemplo los indicadores de “siguiente” y
“anterior”.
Barra de navegación
Otro poderoso componente de la estructura es la NavBar (barra de navegación),
que permite la construcción de un sistema de navegación sensible.
Es posible configurar diferentes formas de presentar el menú, elegir entre
posicionamiento lateral o superior y, también, definir una forma de visualización
que se pueda extender o contraer.
Cómo descargar...
Hay diferentes formas de descargar este framework. Una de ellas es descargando
la versión compilada de los códigos CSS y JavaScript en la página de Bootstrap.

También hay una opción para descargar el código fuente del framework, puesto
que es una herramienta de código abierto.

Aquellos que no quieran descargar los archivos pueden acceder a la estructura sin
necesidad de instalarlos en el servidor. En la práctica, los archivos de instalación
están en otro dominio, o sea en otro DNS.
Para eso, tan solo debemos usar los enlaces para acceder o Bootstrap CDN y, de
esa forma, agregar las referencias a los archivos necesarios para su uso.

Otra forma de descargar el framework es a través de los administradores de

paquetes. Es importante decir que Bootstrap se puede usar con diferentes
lenguajes de programación.

Por esta razón, puede ser descargado como npm, desde Node.js, con RubyGems,
Composer o Nuget, y usarse para crear un sitio web en WordPress, en sitios
desarrollados en Ruby on Rails, Asp.Net, etc.
INSTALACIÓN - DESCARGA
Por npm

npm install [email protected]

Por CDN

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJ
zQIu9" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgr
km" crossorigin="anonymous"></script>
DESCARGAR

https://getbootstrap.com/docs/5.3/getting-started/download/
Plantillas

Bootstrap, posee un sin número de modelos de páginas web que pueden ser
utilizadas, y así ahorrar muchas horas de programación.

También si eres un desarrollador, puedes crear algunas plantillas y venderlas, hay

un buen negocio en el mundo del diseño WEB, para las plantillas novedosas.

Ejemplo.

https://startbootstrap.com/themes
Usar Menu responsivo
En Bootstrap, todos los menú o barra de 1. En la sección del menú:
navegación son responsivos, para utilizar el <ul class="nav nav-pills">
<li class="nav-item">
código de uno de los ejemplos que tiene la
<a class="nav-link active" aria-current="page" href="#">Active</a>
documentación en su página oficial, solo </li>
<li class="nav-item dropdown">
debemos:
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
href="#" role="button" aria-expanded="false">Dropdown</a>
1. Insertar el codigo o librerias de bootstrap <ul class="dropdown-menu">
2. Añadir el código correspondiente. <li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
1. Dentro de la etiqueta Head. <li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<link href="bt4/css/bootstrap.min.css" <li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
rel="stylesheet" media="screen"> </li>
<li class="nav-item">
<script src="bt4/js/jquery.min.js"></script> <a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<script src="bt4/js/bootstrap.min.js"></script> <a class="nav-link disabled" href="#" tabindex="-1"
aria-disabled="true">Disabled</a>
</li>
</ul>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
 <li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Comandos básicos
Configuración predeterminada de Bootstrap 4
● Bootstrap 4 define por defecto un font-size de 16px y un line-height de 1.5 rem.
● Dispone de una font-family predeterminada de tipo «Helvetica Neue», Helvetica, Arial, sans-serif.
● Además, las etiquetas <p> tienen margin-top: 0 y margin-bottom: 1rem (16px por defecto).

Estilos de los encabezados <h1> – <h6>

Los encabezados <h1> – <h6> disponen de estilos predefinidos:
● h1 Bootstrap (2.5rem = 40px)
● h2 Bootstrap (2rem = 32px)
● h3 Bootstrap (1.75rem = 28px)
● h4 Bootstrap (1.5rem = 24px)
● h5 Bootstrap (1.25rem = 20px)
● h6 Bootstrap (1rem = 16px)
Clase display-x

Bootstrap nos ofrece diferentes clases para crear encabezados de mayor tamaño.
Hay cuatro clases:
.display-1 , .display-2 , .display-3 , .display-4
Ejemplo:
<h1 class="display-1">Encabezado Display-1</h1>
Clases h1, h2, h3…
Bootstrap nos ofrece diferentes clases para crear encabezados con los mismos
estilos que otros encabezados h1, h2, h3…
.h1 , .h2 , .h3 , .h4…
Ejemplo:
<h1 class="h2">Encabezado h1 con estilo h2</h1>
Etiqueta <small>

Gracias a la etiqueta <small> podemos crear un texto secundario más claro en

cualquier encabezado:
Ejemplo:
<h1>h1 Encabezado <small>texto secundario</small></h1>
Etiqueta <mark>
La etiqueta <mark> es representada con un color de fondo amarillo y algo de
relleno:
Ejemplo:
<p>Párrafo con <mark>etiqueta de marcado</mark> en un texto.</p>
Etiqueta <abbr>
La etiqueta <abbr> es representada mediante un borde inferior punteado:
Ejemplo:
<p>Esto es una etiqueta <abbr title="La etiqueta abbr se representa con un borde inferior
punteado">abbr</abbr> en Bootstrap.</p>
Etiqueta <blockquote>
Agregando la clase .blockquote a <blockquote> obtenemos un estilo personalizado.
Ejemplo:
<blockquote class="blockquote">
<p>Un buen desarrollador de software trabaja con disciplina y constancia desde el primer
día.</p>
<footer class="blockquote-footer">Omar Bradley</footer>
</blockquote>
Más clases para tipografías

Las siguientes clases de Bootstrap 4 se pueden agregar a los elementos HTML de

estilo:
● .font-weight-bold Negrita
● .font-weight-normal Normal
● .font-weight-light Fina
● .font-italic Itálica
● .lead Destaca un párrafo
● .small Más pequeño (85% del tamaño del padre)
● .text-left Alineado izquierda
● .text-center Alineado centro
Más clases para tipografías
Las siguientes clases de Bootstrap 4 se pueden agregar a los elementos HTML de estilo:
● .text-right Alineado derecha
● .text-justify Justificado
● .text-nowrap Texto nowrap
● .text-lowercase Texto en minúsculas
● .text-uppercase Texto en mayúsculas.text-capitalize Texto capitalizado
● .initialism Muestra el texto en un elemento <abbr> con tamaño más pequeño
● .list-unstyled Quita el list-style y margin-left en elementos de lista (funciona en <ul> y
<ol> ).
● .list-inline Coloca todos los elementos de una lista en una única línea.
Colores de texto y fondo

Colores de texto
Las clases para los colores del texto son: .text-primary, .text-secondary,
.text-muted, .text-success, .text-danger, .text-warning, .text-info, .text-white,
.text-dark y .text-light.
Las clases anteriores también se pueden usar en enlaces y tendrán un color más
oscuro al hacer :hover con el ratón.
<p class="p-2 text-dark"> Este es un texto de prueba negro.</p>
<p class="p-2 text-white"> Este es un texto de prueba blanco.</p>
Colores de fondo

Las clases de colores de fondo son: .bg-primary , .bg-success , .bg-info ,

.bg-warning , .bg-danger , .bg-secondary , .bg-dark y .bg-light .

Cuando utilizamos los colores de fondo es muy usual combinarlo junto con las
clases de los colores de texto para configurar un buen contraste entre ellos.

<p class="p-2 bg-light text-dark">bg-light: Este es un texto de prueba.</p>

<p class="p-2 bg-dark text-white">bg-dark: Este es un texto de prueba.</p>

Imágenes

Bootstrap ofrece la clase .img-fluid para que las imágenes se adapten

correctamente a los distintos dispositivos.
< img src="sistemas.jpg" class="img-fluid" alt="Sistemas">
Imagen con esquinas redondeadas
La clase .rounded agrega esquinas redondeadas a una imagen:
Ejemplo:
<img src="sistemas.jpg" class="rounded" alt="Sistemas">
Imagen con forma de círculo

La clase .rounded-circle da forma de círculo a la imagen:

Ejemplo:
<img src="sistemas.jpg" class="rounded-circle" alt="Sistemas">
Imagen tipo miniatura
La clase .img-thumbnail da forma de miniatura a la imagen:
Ejemplo:
<img src="sistemas.jpg" class="img-thumbnail" alt="Sistemas">
Alineación de imágenes

Desplace una imagen hacia la derecha con la clase .float-right o hacia la izquierda con
.float-left:
Ejemplo:
<img src="sistemas.jpg" class="float-left" alt="Sistemas">
<img src="sistemas.jpg" class="float-right" alt="Sistemas">
<div class=container>
<img class=”border m-4 d-flex justify-content-center aling-items-center
src=”gato.jpg””>
</div>
Tablas

Tabla con filas en colores alternos

Con la clase .table-striped agregamos filas con colores alternos:
<div class="container">
<div class="row">
<div class="col">
<table class="table table-striped">
<thead>
<tr>
<th>Producto</th> <th>Cantidad</th> <th>Precio</th>
</tr>
</thead>
Tablas
<tbody>
<tr>
<td>Ratón</td> <td>15</td> <td>100</td>
</tr>
<tr>
<td>Teclado</td> <td>34</td> <td>340</td>
</tr>
<tr>
<td>Pantalla</td> <td>10</td> <td>400</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Tabla con efecto Hover
<div class="container">
<div class="row">
<div class="col">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Producto</th> <th>Cantidad</th> <th>Precio</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ratón</td> <td>15</td> <td>100</td>
</tr>
<tr>
<td>Teclado</td> <td>34</td> <td>340</td>
</tr>
<tr>
<td>Pantalla</td> <td>10</td> <td>400</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Tablas responsive
La clase .table-responsive crea una tabla responsive: se agrega una barra de
desplazamiento horizontal a la tabla en pantallas que tienen menos de 992px de
ancho (si es necesario).
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
La Grilla
Bootstrap permite diseñar las páginas mediante un sistema de columnas o rejillas que nos ayudan en la
disposición del contenido y su adaptación a los diferentes dispositivos. Este sistema, creado con flexbox,
consiste en dividir la pantalla en filas, donde cada fila puede dividirse en 12 columnas o espacios (también
permite diseños de más columnas, pero como base se tiene en cuenta una división estándar de 12
columnas). De esta forma podemos, por ejemplo, crear un diseño con dos columnas, una que ocupe 5
espacios y otra que ocupe 7 espacios, tal y como se muestra a continuación:

<div class="container">

<div class="row">

<div class="col-5">Contenedor de 5 columnnas</div>

<div class="col-7">Contenedor de 7 columnna</div>

</div>

</div>
.container: el contenido aparece centrado y con un ancho fijo.
<div class="container">

</div>
.container-fluid: el contenido ocupa todo el ancho disponible (100%).
<div class="container-fluid">

</div>

Por lo tanto, lo primero que necesitamos para comenzar es definir un contenedor

principal con la clase .container o .container-fluid que recoja nuestra página: filas y
columnas.
Dentro de este container se creará filas “row” y dentro de
ellas, las columnas “col”. A continuación creamos un
contenedor y una fila que contiene tres columnas:
<div class="container">
<div class="row">
<div class="col">
Primera de tres columnas
</div>
 <div class="col">
Segunda de tres columnas
</div>
<div class="col">
Tercera de tres columnas
</div>
</div>
</div>
Botones

Los botones son uno de los controles que se utilizan más para consolidadr un
proceso en nuestra página web.

En bootstrap, se tienen clases que permiten crear y utilizar los botones de

maneras diversas.
Ejemplo
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
Las clases .btn están diseñadas para usarse con el elemento <button>. Sin
embargo, también puede usar estas clases en elementos <a> o <input> (aunque
algunos navegadores pueden aplicar una representación ligeramente diferente).

Al usar clases de botones en elementos <a> que se usan para activar la

funcionalidad en la página (como el contenido colapsado), en lugar de vincular a
nuevas páginas o secciones dentro de la página actual, estos enlaces deben tener
un rol = "botón" para que sean apropiados. transmitir su propósito a las
tecnologías de asistencia, como los lectores de pantalla.
<a class="btn btn-primary" href="#" role="button">Link</a>

<button class="btn btn-primary" type="submit">Button</button>

<input class="btn btn-primary" type="button" value="Input">

<input class="btn btn-primary" type="submit" value="Submit">

<input class="btn btn-primary" type="reset" value="Reset">

Botones outline
¿Necesita un botón, pero no los fuertes colores de fondo que traen? Reemplace las clases de
modificador predeterminadas con las .btn-outline-* para eliminar todas las imágenes y colores
de fondo en cualquier botón.

<button type="button" class="btn

btn-outline-primary">Primary</button> <button type="button" class="btn
<button type="button" class="btn btn-outline-info">Info</button>
btn-outline-secondary">Secondary</butt <button type="button" class="btn
on>
btn-outline-light">Light</button>
<button type="button" class="btn
btn-outline-success">Success</button> <button type="button" class="btn
<button type="button" class="btn btn-outline-dark">Dark</button>
btn-outline-danger">Danger</button>
<button type="button" class="btn
btn-outline-warning">Warning</button>
Tamaño de los Botones

<button type="button" class="btn btn-primary btn-lg">Large button</button>

<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>

<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Botones en Bloque

Cree bloques de botones responsivos "botones de bloque" de ancho completo como los
de Bootstrap 4 con una combinación de nuestras utilidades de visualización y espacios.
Al usar utilidades en lugar de clases específicas de botones, tenemos un control mucho
mayor sobre el espaciado, la alineación y los comportamientos de respuesta.
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
Botones con enlace o link
Los botones deben ejecutar alguna acción, al momento de presionarlos, generalmente esta
acción suele ser que nos envíe a otra página. Para ello se puede utilizar la etiqueta <a href=””>

Pero también podemos utilizar el evento onclik con la etiqueta input

<input type="button" value="SALIR" onclick="location.href='busca.php'" style="

margin-left:50px;width:150px;height:45px; font-size:16px; color:white; background-color:blue;">

<button onclick="location.href='https://www.facebook.com'">Veamos el FAce</button>

Imágenes

Las imágenes en Bootstrap se hacen responsivas con .img-fluid. Esto aplica

max-width: 100%; y altura: automático; a la imagen para que se escale con el
elemento principal.

<img src="..." class="img-fluid" alt="...">

Alineación de Imágenes

Alinee las imágenes con las clases flotantes auxiliares o las clases de alineación
de texto. las imágenes a nivel de bloque se pueden centrar utilizando la clase de
utilidad de margen .mx-auto.

<img src="..." class="rounded float-start" alt="...">

<img src="..." class="rounded float-end" alt="...">

<img src="..." class="rounded mx-auto d-block" alt="...">

Carrusel
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Formularios

Los Formularios son documentos web que se utilizan para establecer la

comunicación entre dos o más personas con la empresa, organización, etc..

Un formulario contiene controles que permiten obtener datos de tipo texto,

numérico, fecha, contraseñas, etc, también se pueden usar controles como
botones radio, casillas de verificación, listas desplegables.

En Bootstrap, se tiene un conjunto de modelos listos para ser utilizados, solo es

necesario obtener el código del sitio web.
Elementos de un formulario

Un formulario está compuesto por varios elementos, el número de estos

dependerá del propósito que el usuario tiene para cada formulario.
Básicamente los formularios tienen:
- Etiquetas - Cajas de edición de Texto
- Cajas de edición de Contraseña - Calendarios
- Spin - Botones
- Listas desplegables - Casillas de verificación
- Botones Radio
Estructura de un Formulario

Un formulario está formado por una etiqueta <FORM>, controles o elementos, y

tambien la etiqueta FORM tiene algunos parámetros como ser:

- Target:
- Action
- Name
- Class
-
Action

Se utiliza para indicar a qué archivo se enviarán los datos del formulario,
generalmente se coloca solo el nombre del archivo destino.

Ejemplo

<form action=”lee.php” method=”POST” >

INPUT
Los campos de texto <input> son los controles de formulario más básicos. Son un modo muy cómodo de permitir al usuario introducir
cualquier tipo de datos.

Todos los controles de texto básicos comparten algunos comportamientos comunes:

● Se pueden marcar como readonly (el usuario no puede modificar el valor de entrada, pero este se envía con el resto de los
datos del formulario) o disabled (el valor de entrada no se puede modificar y nunca se envía con el resto de los datos del
formulario).
● Pueden tener un placeholder; se trata de un texto que aparece dentro de la caja de entrada de texto y que se usa para
describir brevemente el propósito de la caja de texto.
● Es posible asignarle un valor previo usando la orden value,
● Si es necesario “obligar ” un valor se usa required, esto obliga al navegador a que este campo de llene
● Si debemos darle un formato de ingreso de datos podemos usar: pattern=[A-Za-z0-9\s]{8,60}
Etiquetas
Se usa la etiqueta <label>, los atributos o parámetros que usa son:

accesskey
Una tecla de atajo para acceder a este elemento desde el teclado.

for
El ID del elemento de formulario etiquetable relacionado en el mismo documento que el elemento label. El primer
elemento en el documento con tal ID que coincida con el dispuesto en el atributo for será el control etiquetado para
este elemento.
Ejemplo
<label for=”jefe” > El Jefe </label>
INPUT

Un campo de texto de una sola línea se crea utilizando un elemento <input> cuyo valor de
atributo type se establece en text, u omitiendo por completo el atributo type (text es el
valor predeterminado). El valor text de este atributo también es el valor alternativo si el
navegador no reconoce el valor que has especificado para el atributo type (por ejemplo, si
especificas type="color" y el navegador no está dotado en origen de un control de
selección de colores).

<input type="text" id="cm" name="cm" value="Comentario">

Atributos de input

- Readonly:Sirve para especificar que un input no se puede cambiar

- disabled:El input queda deshabilitado, no se puede clicar, y el valor no se envía
cuando se envía el formulario.
- size:Especifica cómo de ancho tiene que ser el input, en número de caracteres.
- maxlength:Establece el máximo número de caracteres en el input
- required: obliga a que el campo esté lleno
- width / height: define el ancho y alto de la caja
- placeholder: asigna un texto indicativo
- min y max: Establecen el mínimo y máximo valor que puede tomar el input. Funciona con los tipos: number, range,
date, datetime-local, month, time y week.
- pattern: Define una expresión regular que se usará para validar el input. Funciona con los tipos: text, search, url, tel,
email y password. pattern="[A-Za-z]{3}"
Campo de contraseña

Uno de los tipos de entrada originales era el tipo de campo de texto password:

<input type="password" id="pwd" name="pwd">

El valor de la contraseña no añade restricciones especiales al texto que se

introduce, pero oculta el valor que se introduce en el campo (por ejemplo, con
puntos o asteriscos) para impedir que otros puedan leerlo.
Lista

Para crear una lista desplegable se usa la etiqueta <select>. ejemplo:

<select id="fruta" name="fruta">

<option>Banana</option>

<option selected>Naranja</option>

<option>Limon</option>

</select>
Creando categorías con optgroup
Si lo que requerimos es tener opciones formadas en categorías, podemos usar:

<select id="grupo" name="grupo">

<optgroup label="frutas">
<option>Banana</option>
<option selected>Naranja</option>
<option>Limon</option>
</optgroup>
<optgroup label="vegetales">
<option> Cebolla</option>
<option>Brocoli</option>
<option>Papa</option>
</optgroup>
</select>
Botones

Los formularios concluyen cuando se hace clic en un botón, este se puede crear
usando la etiqueta input y el tipo submit. ejemplo:

<input type=”submit” value=” Enviar “>

Resetear

El atributo reset, restablece los valores por defecto a todos los controles del
formulario. Ejemplo:
<button type="reset">
Este es un <strong>botón de reinicio</strong>
</button>
<input type="reset" value="Este es un botón de reinicio">
Con Bootstrap

Usar select
<select class="form-select" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Input

<input class="form-control form-control-lg" type="text"

placeholder=".form-control-lg" aria-label=".form-control-lg example">

<input class="form-control" type="text" placeholder="Default input"

aria-label="default input example">

<input class="form-control form-control-sm" type="text"

placeholder=".form-control-sm" aria-label=".form-control-sm example">
<form class="row g-3">
<div class="col-auto">
<label for="staticEmail2" class="visually-hidden">Email</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
</div>
<div class="col-auto">
<label for="inputPassword2" class="visually-hidden">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-3">Confirm identity</button>
</div>
</form>