Core · Ayudas
Clases de utilidad
Clases pequeñas u-* que hacen una sola cosa cada una, para los casos que no cubre un componente.
Archivos: utilities/_utilities.css
Esta traducción la ha escrito una IA y todavía no la ha revisado ninguna persona. Leer esta página en inglés
Usa una clase de utilidad para un ajuste puntual. Si añades una y otra vez las mismas clases de utilidad al mismo elemento, necesitas un componente o una clase propios.
- Las clases de utilidad prevalecen sobre los componentes: van al final de la cascada.
.u-sr-onlyoculta el texto en pantalla, pero no a los lectores de pantalla..u-hiddenlo oculta de ambas formas..u-no-eventssolo bloquea el puntero: el teclado aún puede llegar al elemento y usarlo. No la uses nunca para desactivar un control.
Todas las 16 clases de utilidad
| Clase | Efecto | Ejemplo |
|---|---|---|
.u-hidden | Elimina el elemento de la página | Oculto(no se muestra nada) |
.u-sr-only | Visible solo para lectores de pantalla | Leído por lectores de pantalla(solo para lectores de pantalla) |
.u-text-mono | Fuente monoespaciada | 0123 abc |
.u-text-primary | Texto principal | Texto principal |
.u-text-muted | Texto secundario | Texto atenuado |
.u-truncate | Una línea, con puntos suspensivos si se desborda | Una línea larga que se corta |
.u-flex | Contenedor flex | ab |
.u-flex-center | Flex, centrado en ambos ejes | a |
.u-flex-between | Flex, con los elementos en los extremos | ab |
.u-flex-1 | Ocupa el espacio restante | aflex 1 |
.u-mb-0 .u-mb-sm .u-mb-md .u-mb-lg | Margen inferior: 0, 8px, 16px, 32px | 0smmdlg |
.u-select-all | Un clic selecciona todo el texto | click-selects-all |
.u-no-events | Ignora los eventos del puntero |