Dimensionamiento de entrada de bootstrap
Al crear formularios en una aplicación web, requerimos una variedad de componentes, incluidos campos de entrada, botones de radio, casillas de verificación y más. Más específicamente, se utilizan varias clases de arranque para ajustar el tamaño de estos componentes de formulario, como "formulario-control-*" y "Group de entrada-*". El "*"Simboliza las clases que definen el tamaño, donde"lg"Representa grande y"sm"Se refiere a pequeño.
Esta publicación guiará:
- Método 1: Cómo especificar el tamaño de entrada usando "control de forma" clase?
- Método 2: Cómo especificar el tamaño de la entrada usando "grupo de entrada" clase?
- Método 3: Cómo especificar el tamaño de la entrada usando el ancho "w" clase?
Método 1: Cómo especificar el tamaño de entrada utilizando la clase "Control de formulario"?
El "control de forma"La clase en Bootstrap se utiliza para estilo controles de forma textual como" "", "" y "". Proporciona un estilo general a los elementos de entrada, como apariencia, dimensionamiento y más.
Para ajustar el tamaño de los controles de formulario, el "formulario-control-*Se usa la clase. El asterisco "*" simboliza la clase de tamaño. Además, el "forma-control-lg"Indica un gran control de forma", "formulario-control-SM"Define el pequeño control de forma, y sin mencionar ninguna clase, el tamaño mediano se aplicará al campo de entrada.
Ejemplo
En este ejemplo, crearemos tres entradas especificando el "control de forma" y diferente "formulario-control-*"Clases:
Producción
Método 2: Cómo especificar el tamaño de entrada utilizando la clase "Group de entrada"?
El "grupo de entradaLa clase se utiliza para proporcionar un estilo general a los grupos de entrada. Los grupos de entrada se refieren a los campos de entrada que tienen un icono, botón, texto o más.
Para ajustar el tamaño del grupo de entrada, la clase "Group de entrada-*"Se utiliza, donde el asterisco"*"El símbolo indica el tamaño especificando el"lg" para grande, "sm"Para pequeño, de lo contrario medio.
Ejemplo
El siguiente ejemplo representa los dos grupos de entrada separados por un "
" etiqueta. Cada uno consiste en un campo de entrada y un botón:
Producción
Método 3: Cómo especificar el tamaño de la entrada usando la clase de ancho "W"?
La anchura "W-*La clase se utiliza para ajustar el ancho de los campos de entrada de la siguiente manera:
- "W-25"Establece el ancho de la entrada al 25% de los padres.
- "W-50"Establece el ancho de la entrada al 50% de los padres.
- "W-75"Establece el ancho de la entrada al 75% de los padres.
- "W-100"Establece el ancho de la entrada al 100% de los padres.
Ejemplo
En este ejemplo, los campos de entrada se especifican con el "control de forma" y "W-*"Clases:
Producción
Se puede observar que el ancho especificado se ha aplicado al campo de entrada agregado.
Conclusión
Para ajustar el tamaño de los campos de entrada textuales, el "formulario-control-*Se utiliza la clase. Para establecer el tamaño de los grupos de entrada, el "Group de entrada-*Se utiliza la clase. Mientras que el "W-*La clase se usa para determinar el ancho de los campos de entrada. El asterisco "*"Indica las clases como"lg","sm", Y cualquier número, respectivamente. Esta publicación ha explicado cómo ajustar el tamaño de las entradas en Bootstrap.