Formularios de bootstrap | Explicado

Los formularios de arranque son una parte crucial de cualquier aplicación. Habilitan la interacción del usuario y la entrada en el sistema. Varias clases de bootstrap proporcionan controles de forma prediseñados y opciones de estilo para crear formularios receptivos y limpios. Más específicamente, las formas de arranque consisten en varios elementos de formulario, como campos de texto, áreas de texto, botones de radio, cuadros de selección y más.

Este artículo cubrirá:

• Cómo crear un formulario en línea en Bootstrap?
• Cómo establecer el espacio en forma en línea?
• Cómo crear una forma apilada en Bootstrap?
• Cómo crear un formulario usando filas de cuadrícula?
• Cómo crear un formulario de diseño compacto?
• Cómo crear una forma horizontal?
• Cómo establecer el tamaño de la etiqueta del formulario?

Cómo crear un formulario en línea en Bootstrap?

Los formularios en línea se crean utilizando el ".formulario en línea" clase. Esta clase tiene un CSS predefinido "mostrar"Propiedad con el valor"doblar"Con otras propiedades.

Ejemplo

Mira el ejemplo que demuestra cómo crear un formulario en línea en Bootstrap:

• Primero, agregue un ""Elemento con la clase"formulario en línea".
• Dentro de él, agregue dos ""Elementos con el"grupo de forma" clase.
• Cada elemento "" contiene el "" y ""Elementos.
• Por último, agregue un ""Elemento para crear un botón:

Correo electrónico



Contraseña

Entregar

Producción

Cómo establecer el espacio en forma en línea?

Las utilidades de espaciado de bootstrap ajustan el espacio de un formulario en línea. Éstas incluyen "ML-*"Para margen izquierda", "señor-*"Para el margen-derecha y muchos más. El "*"Representa el tamaño.

Para una demostración práctica, consulte el ejemplo a continuación.

Ejemplo

En el ejemplo en curso, agregue la clase "ml-2"Al elemento" ". Generará espacio a la izquierda de la etiqueta:

Correo electrónico



Contraseña

Entregar

Producción

Cómo crear una forma apilada en Bootstrap?

Las formas apiladas se refieren a las formas verticales. Este es un formulario predeterminado.

Mira el ejemplo a continuación.

Ejemplo

Siga las instrucciones dadas para crear una forma vertical:

• Agrega un "" elemento.
• Dentro de él, agregue un ""Etiqueta y asignarle una clase" grupo de formulario ".
• Este elemento "" contiene el "" y ""Elementos. Puede agregar los elementos de formulario de acuerdo con sus preferencias.
• Al final, agregue un ""A la forma:

Correo electrónico



Contraseña

Entregar

Producción

Cómo crear un formulario usando filas de cuadrícula?

Hacer un formulario con la cuadrícula de bootstrap es muy simple. Primero, especifique una fila y cree columnas para las entradas de formulario dentro de él.

Analice el ejemplo a continuación.

Ejemplo

Siga las instrucciones para crear un formulario usando Bootstrap Grid:

• Agrega un "" elemento.
• Dentro de él, agregue un ""Contenedor con la clase" fila ".
• Dentro de esto "fila"Container, especifique dos elementos más" "con la clase" col ".
• Añade el "<etiqueta> "Y"<aporte> "Elementos dentro de cada elemento" ":

Nombre



Correo electrónico

Producción

Cómo crear un formulario de diseño compacto?

Para diseños compactos y más estrictos, el "forma"La clase se utiliza en lugar de la"fila" clase:

Nombre



Correo electrónico

Producción

Cómo crear una forma horizontal?

Las formas horizontales se crean utilizando el "fila" y "columna-*-*"Clases. El "fila"La clase especifica una fila, y las clases" col-*-*"definen el ancho de las etiquetas y los controles, como"col-sm-2","Col-MD-6" o más. El "col-formel de forma" también debe agregarse al elemento "".

Ejemplo

Para crear una forma horizontal, pruebe las instrucciones dadas:

• Primero, agregue un "" elemento.
• Dentro de él, agregue un ""Elemento con las clases"grupo de forma" y "fila".
• Especifique los grupos de formulario dentro de este "" elemento. En nuestro caso, el "" y el "Se especifican los elementos.
• El ""El elemento se coloca dentro de otro""Tener clase"Col-SM-6". Especificará 6 columnas de cuadrícula para el "" elemento:

Nombre





DIRECCIÓN




Entregar

Producción

Cómo ajustar el tamaño de la etiqueta de la forma?

El tamaño del ""El elemento se puede ajustar fácilmente usando el"col-forma-etiqueta-sm" y "col-formel-label-lg". El "col-form-label-sm" tiene un CSS predefinido "tamaño de fuente"Propiedad con el valor"0.875rem"Con otras propiedades. El "col-form-label-lg" tiene un CSS predefinido "tamaño de fuente"Propiedad con el valor"1.25rem"Con otras propiedades.

Ejemplo

En el ejemplo continuo, agregue el "col-formel-label-sm" al primer elemento "" y "col-form-label-lg" al segundo para ver la diferencia:

Nombre





DIRECCIÓN




Entregar

Producción

Has aprendido con éxito sobre cómo crear formularios usando bootstrap.

Conclusión

Bootstrap ofrece un método simple para producir formas receptivas y consistentes. Hay principalmente tres tipos de formas de arranque: formas en línea, apiladas y horizontales. Se crea una forma en línea utilizando el "formulario en línea" clase. Para especificar estilos generales al grupo de controles de forma, el "grupo de formaSe usa la clase. Más específicamente, hay varias clases que ayudan a ajustar el tamaño de los componentes de formulario, como "Col-SM-4", "col-formel-etiqueta-sm" y muchos más. Este artículo ha demostrado cómo crear formularios usando bootstrap.