Enlaces de colores
Enlaces de colores con estados de desplazamiento
😎 Esta traducción es parte del proyecto esdocu.com.
En esta página
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">Primary link</a></p>
<p><a href="#" class="link-secondary">Secondary link</a></p>
<p><a href="#" class="link-success">Success link</a></p>
<p><a href="#" class="link-danger">Danger link</a></p>
<p><a href="#" class="link-warning">Warning link</a></p>
<p><a href="#" class="link-info">Info link</a></p>
<p><a href="#" class="link-light">Light link</a></p>
<p><a href="#" class="link-dark">Dark link</a></p>
<p><a href="#" class="link-body-emphasis">Emphasis link</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.0Los 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">Primary link</a></p>
<p><a href="#" class="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Secondary link</a></p>
<p><a href="#" class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Success link</a></p>
<p><a href="#" class="link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Danger link</a></p>
<p><a href="#" class="link-warning link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Warning link</a></p>
<p><a href="#" class="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Info link</a></p>
<p><a href="#" class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Light link</a></p>
<p><a href="#" class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Dark link</a></p>
<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p>