Principe
L'idée est de disposer de nombreuses possibilités de couleurs de liens avec effet hover prédéfinies.
Il suffit d'ajouter la classe .link-* et les états hover et focus seront pris en charge.
<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>
Avec des classes utilitaires
Les liens colorés peuvent être modifiés par des classes utilitaires.
<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>