Enlaces de colores
Enlaces de colores con estados de desplazamiento.
Colores de enlace
Puedes usar las clases .link-* para colorear enlaces. A diferencia de las .text-* (clases), estas clases tienen un estado :hover y :focus. Algunos de los estilos de enlace utilizan un color de primer plano relativamente claro y solo deben usarse sobre un fondo oscuro para tener suficiente contraste.
¡Atención! .link-body-emphasis es actualmente el único enlace de color que se adapta a los modos de color. Se trata como un caso especial hasta que llegue la versión 6 y podamos reconstruir más a fondo los colores de nuestro tema para los modos de color. Hasta entonces, es un color de enlace único y de alto contraste con estilos personalizados :hover y :focus. Sin embargo, todavía responde a las nuevas utilidades de enlace.
<p><a href="#" class="link-primary">Enlace principal</a></p>
<p><a href="#" class="link-secondary">Enlace secundario</a></p>
<p><a href="#" class="link-success">Enlace de éxito</a></p>
<p><a href="#" class="link-danger">Enlace de peligro</a></p>
<p><a href="#" class="link-warning">Enlace de advertencia</a></p>
<p><a href="#" class="link-info">Enlace de información</a></p>
<p><a href="#" class="link-light">Enlace claro</a></p>
<p><a href="#" class="link-dark">Enlace oscuro</a></p>
<p><a href="#" class="link-body-emphasis">Enlace de énfasis</a></p>Consejo de accesibilidad: El uso de colores para agregar significado solo proporciona una indicación visual, que no se transmitirá a los usuarios de tecnologías de asistencia como lectores de pantalla. Asegúrate de que el significado sea obvio a partir del contenido mismo (por ejemplo, el texto visible con un suficiente contraste de color) o se incluye a través de medios alternativos, como texto adicional oculto con la clase .visually-hidden.
Utilidades de enlace
Agregado en v5.3.0
Los enlaces de colores también pueden modificarse mediante nuestras utilidades de enlaces.
<p><a href="#" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Enlace principal</a></p>
<p><a href="#" class="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Enlace secundario</a></p>
<p><a href="#" class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Enlace de éxito</a></p>
<p><a href="#" class="link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Enlace de peligro</a></p>
<p><a href="#" class="link-warning link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Enlace de advertencia</a></p>
<p><a href="#" class="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Enlace de información</a></p>
<p><a href="#" class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Enlace claro</a></p>
<p><a href="#" class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Enlace oscuro</a></p>
<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Enlace de énfasis</a></p>