Descubra cómo puede usar las funciones más recientes de Bootstrap, incluidos detalles de grandes cambios en los controles de formulario.
Bootstrap es un marco front-end popular que ha revolucionado el desarrollo web. Con su última versión, Bootstrap 5.3.0, el marco ha introducido una gran cantidad de características nuevas y emocionantes. y mejoras que le permiten crear aplicaciones y sitios web asombrosos, receptivos y ricos en funciones.
Alternar modo oscuro
Uno de los notables Adiciones de Bootstrap 5.3.0 es un conmutador para modo oscuro. Esta opción permite a los usuarios de su sitio web cambiar sin esfuerzo entre los modos claro y oscuro, lo que facilita el uso continuo de su sitio web o aplicación en diversas condiciones de iluminación.
Para usar esta característica, simplemente agregue el data-bs-toggle="modo-oscuro" atribuir a cualquier botón o elemento de enlace.
Aquí hay un ejemplo:
<botóntipo="botón"clase="btn btn-primario"datos-bs-alternar="modo oscuro">
Alternar modo oscuro
botón>Utilidades de escala de fuentes
Bootstrap 5.3.0 presenta un conjunto de utilidades de escala de fuente que le permiten ajustar rápidamente el tamaño de su texto en función de escalas predefinidas, sin tener que elija valores de fuente específicos usted mismo.
Puede usar estas utilidades en combinación con otras clases de tipografía de Bootstrap para lograr una tipografía escalable y consistente en su sitio web o aplicación.
Aquí hay algunos ejemplos de cómo puede usar las utilidades de escala de fuente:
<pagclase="fs-1">Este es el tamaño de letra más grandepag>
<pagclase="fs-2">Este es un tamaño de fuente un poco más pequeño.pag>
<pagclase="fs-3">Este es un tamaño de letra medianopag>
<pagclase="fs-4">Este es un tamaño de fuente pequeñopag>
<pagclase="fs-5">Este es el tamaño de fuente más pequeño.pag>Utilidades de canalón
Otra nueva incorporación en Bootstrap 5.3.0 es la introducción de utilidades de canaleta. Estas utilidades facilitan la adición de canales entre columnas en el diseño de cuadrícula de Bootstrap sin tener que escribir CSS personalizado.
Aquí hay un ejemplo de cómo puede usar las utilidades de canalón:
<divisiónclase="fila gx-3">
<divisiónclase="columna">columna 1división>
<divisiónclase="columna">columna 2división>
división>Este ejemplo utiliza el gx-3 clase para agregar una canaleta de 3 unidades (o 1,5 rem) entre las dos columnas.
Controles de formulario actualizados
El controles de formulario en Bootstrap se han actualizado en la versión 5.3.0 para mejorar la coherencia y la facilidad de uso. Los nuevos controles de formulario incluyen estilos actualizados para casillas de verificación, botones de radio y cuadros de selección, así como comentarios de validación mejorados.
Casillas de verificación y botones de opción
Bootstrap 5.3.0 presenta nuevos estilos para casillas de verificación y botones de radio que los hacen más fáciles de usar y más accesibles. El nuevo diseño presenta áreas de impacto más grandes e indicadores de enfoque mejorados, lo que facilita la interacción con estas entradas.
Aquí hay un ejemplo de cómo puede usar los nuevos estilos de casilla de verificación:
<divisiónclase="verificación de formulario">
<aporteclase="formulario-comprobar-entrada"tipo="caja"valor=""identificación="cheque1">
<etiquetaclase="formulario-verificar-etiqueta"para="cheque1">Casilla de verificación predeterminadaetiqueta>
división>Y aquí hay un ejemplo de cómo puede usar los nuevos estilos de botones de opción:
<divisiónclase="verificación de formulario">
<aporteclase="formulario-comprobar-entrada"tipo="radio"nombre="ejemploRadios"identificación="radio1"valor="Opción 1">
<etiquetaclase="formulario-verificar-etiqueta"para="radio1"> Opción 1 etiqueta>
división>Observe cómo este marcado utiliza el .form-check-input clase para diseñar el elemento de entrada en sí mismo, y el .form-check-label class para darle estilo a la etiqueta.
Seleccionar cajas
Los cuadros de selección también se han actualizado en Bootstrap 5.3.0 con nuevos estilos para una mejor coherencia y facilidad de uso. Los nuevos estilos de cuadro de selección presentan áreas de acceso más grandes e indicadores de enfoque mejorados, lo que facilita la interacción con estas entradas.
Aquí hay un ejemplo de cómo puede usar los nuevos estilos de cuadro de selección:
<seleccionarclase="seleccionar formulario"etiqueta aria="Ejemplo de selección predeterminada">
<opciónseleccionado>Abrir este menú de selecciónopción>
<opciónvalor="1">Unoopción>
<opciónvalor="2">Dosopción>
<opciónvalor="3">Tresopción>
seleccionar>Observe cómo puede utilizar el .form-select class para diseñar el propio cuadro de selección.
Comentarios de validación
Bootstrap 5.3.0 también introduce nuevos estilos de retroalimentación de validación para controles de formulario. Estos estilos facilitan proporcionar comentarios visuales a los usuarios de su sitio web cuando completan un formulario incorrectamente.
Aquí hay un ejemplo de cómo puede usar los nuevos estilos de validación:
<divisiónclase="grupo de forma">
<etiquetapara="ejemploEntradaContraseña1">Contraseñaetiqueta>
<aportetipo="contraseña"clase="el control de formulario no es válido"identificación="ejemploEntradaContraseña1"marcador de posición="Contraseña"requerido>
<divisiónclase="retroalimentación no válida"> Proporcione una contraseña válida. división>
división>Fíjate cómo el .es inválido clase indica que el campo de entrada no es válido, y el .invalid-feedback La clase muestra un mensaje al usuario.
Con estos nuevos estilos, es más fácil que nunca crear formularios accesibles y coherentes para su sitio web o aplicación.
Mejoras emocionantes en Bootstrap 5.3.0
Bootstrap 5.3.0 es una actualización significativa del popular marco CSS que trae varias características nuevas y mejoras a la mesa. Desde el cambio de modo oscuro hasta las utilidades de escala de fuentes y utilidades de medianil, hay muchas herramientas nuevas a su disposición para ayudarlo a crear mejores sitios web y aplicaciones.
