Bootstrap Clases de utilidad
Este capítulo discutirá algunas clases de utilidad en Bootstrap que pueden resultar útiles.
Texto
Las siguientes clases diferentes muestran diferentes colores de texto. Si el texto es un enlace, al pasar el mouse sobre él se oscurecerá:
| Clase | Descripción | Ejemplo |
|---|---|---|
| .text-muted | Estilo de texto de la clase "text-muted" | Pruébalo |
| .text-primary | Estilo de texto de la clase "text-primary" | Pruébalo |
| .text-success | Estilo de texto de la clase "text-success" | Pruébalo |
| .text-info | Estilo de texto de la clase "text-info" | Pruébalo |
| .text-warning | Estilo de texto de la clase "text-warning" | Pruébalo |
| .text-danger | Estilo de texto de la clase "text-danger" | Pruébalo |
Fondo
Las siguientes clases diferentes muestran diferentes colores de fondo. Si el texto es un enlace, al pasar el mouse sobre él se oscurecerá:
| Clase | Descripción | Ejemplo |
|---|---|---|
| .bg-primary | La celda de la tabla usa la clase "bg-primary" | Pruébalo |
| .bg-success | La celda de la tabla usa la clase "bg-success" | Pruébalo |
| .bg-info | La celda de la tabla usa la clase "bg-info" | Pruébalo |
| .bg-warning | La celda de la tabla usa la clase "bg-warning" | Pruébalo |
| .bg-danger | La celda de la tabla usa la clase "bg-danger" | Pruébalo |
Otros
| Clase | Descripción | Ejemplo |
|---|---|---|
| .pull-left | Elemento flotando a la izquierda | Pruébalo |
| .pull-right | Elemento flotando a la derecha | Pruébalo |
| .center-block | Establecer el elemento como display:block y centrarlo | Pruébalo |
| .clearfix | Limpiar flotación | Pruébalo |
| .show | Forzar la visualización del elemento | Pruébalo |
| .hidden | Forzar la ocultación del elemento | Pruébalo |
| .sr-only | Ocultar el elemento en todos los dispositivos excepto en los lectores de pantalla | Pruébalo |
| .sr-only-focusable | Se usa junto con la clase .sr-only para mostrar el elemento cuando recibe el foco (por ejemplo, usuarios que usan el teclado) | Pruébalo |
| .text-hide | Reemplazar el contenido de texto del elemento de la página por una imagen de fondo | Pruébalo |
| .close | Mostrar botón de cerrar | Pruébalo |
| .caret | Mostrar funcionalidad desplegable | Pruébalo |
Más ejemplos
Icono de cerrar
Use el icono de cerrar genérico para cerrar modales y alertas. Use la claseclosepara obtener el icono de cerrar.
Ejemplo
Pruébalo »
El resultado es el siguiente:
aria-hidden="true"Sirve principalmente para ayudar a personas con discapacidad (como ceguera) que usan dispositivos de lectura (que leen el contenido automáticamente y lo reproducen); al reproducir contenido con este atributo, se omitirá automáticamente para evitar confusión en personas con discapacidad.
Caret
Use el caret para indicar la funcionalidad y dirección del menú desplegable. Use un elemento <span> con la clasecaretpara obtener esta funcionalidad.
El resultado es el siguiente:
Flotación rápida
Puede usar las clasespull-leftopull-rightpara flotar el elemento hacia la izquierda o hacia la derecha. El siguiente ejemplo demuestra esto.
Ejemplo
Pruébalo »
El resultado es el siguiente:
Para alinear componentes en la barra de navegación, use.navbar-lefto.navbar-righten su lugar. ConsulteBootstrap Barra de navegación。
Centrar contenido
Use la clasecenter-blockpara centrar el elemento.
Ejemplo
Pruébalo »
El resultado es el siguiente:
Limpiar flotación
Para limpiar la flotación de un elemento, use.clearfix class.
Ejemplo
Pruébalo »
El resultado es el siguiente:
Mostrar y ocultar contenido
Puede forzar la visualización u ocultación de un elemento (incluidos los lectores de pantalla) usando la clase.showy.hiddenpara forzar la visualización u ocultación del elemento (incluidos los lectores de pantalla).
Ejemplo
Pruébalo »
El resultado es el siguiente:
Lector de pantalla
Puede usar la clase.sr-onlypara ocultar el elemento en todos los dispositivos, excepto en los lectores de pantalla.
Ejemplo
Pruébalo »
El resultado es el siguiente:
Aquí, vemos que las dos etiquetas label de tipo input tienen la clasesr-only, por lo que las etiquetas solo serán visibles para los lectores de pantalla.
Otras extensiones