Principe
Possibilité de styliser les liens suivant plusieurs critères avec prise en charge des :hover et :focus.
Opacité
<p><a class="link-opacity-10" href="#">Link opacity 10</a></p> <p><a class="link-opacity-25" href="#">Link opacity 25</a></p> <p><a class="link-opacity-50" href="#">Link opacity 50</a></p> <p><a class="link-opacity-75" href="#">Link opacity 75</a></p> <p><a class="link-opacity-100" href="#">Link opacity 100</a></p>
:hover
<p><a class="link-opacity-10-hover" href="#">Link hover opacity 10</a></p> <p><a class="link-opacity-25-hover" href="#">Link hover opacity 25</a></p> <p><a class="link-opacity-50-hover" href="#">Link hover opacity 50</a></p> <p><a class="link-opacity-75-hover" href="#">Link hover opacity 75</a></p> <p><a class="link-opacity-100-hover" href="#">Link hover opacity 100</a></p>
Soulignement
Couleur
Modification de la couleur de soulignement indépendamment de la couleur du texte du lien.
<p><a href="#" class="link-underline-primary">Primary underline</a></p> <p><a href="#" class="link-underline-secondary">Secondary underline</a></p> <p><a href="#" class="link-underline-success">Success underline</a></p> <p><a href="#" class="link-underline-danger">Danger underline</a></p> <p><a href="#" class="link-underline-warning">Warning underline</a></p> <p><a href="#" class="link-underline-info">Info underline</a></p> <p><a href="#" class="link-underline-light">Light underline</a></p> <p><a href="#" class="link-underline-dark">Dark underline</a></p>
Décalage
Modification de la distance entre le soulignement et le texte (en em).
<p><a href="#">Default link</a></p> <p><a class="link-offset-1" href="#">Offset 1 link</a></p> <p><a class="link-offset-2" href="#">Offset 2 link</a></p> <p><a class="link-offset-3" href="#">Offset 3 link</a></p>
Opacité
Modification de l'opacité du soulignement.
<p><a class="link-offset-2 link-underline link-underline-opacity-0" href="#">Underline opacity 0</a></p> <p><a class="link-offset-2 link-underline link-underline-opacity-10" href="#">Underline opacity 10</a></p> <p><a class="link-offset-2 link-underline link-underline-opacity-25" href="#">Underline opacity 25</a></p> <p><a class="link-offset-2 link-underline link-underline-opacity-50" href="#">Underline opacity 50</a></p> <p><a class="link-offset-2 link-underline link-underline-opacity-75" href="#">Underline opacity 75</a></p> <p><a class="link-offset-2 link-underline link-underline-opacity-100" href="#">Underline opacity 100</a></p>
Couleur
Modification de la couleur des liens.
<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>
Mais encore