Lien
Les utilitaires de liens sont utilisés pour styliser vos ancres afin d'ajuster leur couleur, leur opacité, le décalage de soulignement, la couleur de soulignement, etc.
Opacité du lien
Modifiez l'opacité alpha de la rgba()valeur de couleur du lien avec des utilitaires. Veuillez noter que les modifications de l'opacité d'une couleur peuvent conduire à des liens avec un contraste insuffisant.
<p><a class="opacity-10" href="#">Link opacity 10</a></p>
<p><a class="opacity-25" href="#">Link opacity 25</a></p>
<p><a class="opacity-50" href="#">Link opacity 50</a></p>
<p><a class="opacity-75" href="#">Link opacity 75</a></p>
<p><a class="opacity-100" href="#">Link opacity 100</a></p>
Vous pouvez même modifier le niveau d'opacité en survol.
<p><a class="link-opacity-10" href="#">Link hover opacity 10</a></p>
<p><a class="link-opacity-25" href="#">Link hover opacity 25</a></p>
<p><a class="link-opacity-50" href="#">Link hover opacity 50</a></p>
<p><a class="link-opacity-75" href="#">Link hover opacity 75</a></p>
<p><a class="link-opacity-100" href="#">Link hover opacity 100</a></p>
Le lien souligne
Couleur de soulignement
Modifiez la couleur du 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>
<!--code CSS respondant-->
.link-underline-primary{
--bs-link-underline-opacity: 1;
text-decoration:underline!important;
text-decoration-color: #0d6efd!important;
}
.link-underline-secondary{
--bs-link-underline-opacity: 1;
text-decoration:underline!important;
text-decoration-color: #6c757d!important;
}
.link-underline-success{
text-decoration:underline!important;
text-decoration-color: #198754!important;
}
.link-underline-danger {
--bs-link-underline-opacity: 1;
text-decoration:underline!important;
text-decoration-color: #dc3545!important;
}
.link-underline-warning {
--bs-link-underline-opacity: 1;
text-decoration:underline!important;
text-decoration-color: #ffc107!important;
}
.link-underline-info {
--bs-link-underline-opacity: 1;
text-decoration:underline!important;
text-decoration-color: #0dcaf0!important;
}
.link-underline-light {
--bs-link-underline-opacity: 1;
text-decoration:underline!important;
text-decoration-color: #f8f9fa!important;
}
.link-underline-dark {
--bs-link-underline-opacity: 1;
text-decoration:underline!important;
text-decoration-color: #212529!important;
}
Décalage de soulignement
Modifiez la distance entre le soulignement et votre texte. Le décalage est défini en emunités pour s'adapter automatiquement à la valeur actuelle de l'élément font-size.
<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>
Souligner l'opacité
Modifiez l'opacité du soulignement. Nécessite d'ajouter .link-underline pour définir d'abord une rgba() couleur que nous utilisons pour ensuite modifier l'opacité alpha.
<p><a class="link-offset-2 link-underline-primary link-underline-opacity-0" href="#">Underline opacity 0</a></p>
<p><a class="link-offset-2 link-underline-primary link-underline-opacity-10" href="#">Underline opacity 10</a></p>
<p><a class="link-offset-2 link-underline-primary link-underline-opacity-25" href="#">Underline opacity 25</a></p>
<p><a class="link-offset-2 link-underline-primary link-underline-opacity-50" href="#">Underline opacity 50</a></p>
<p><a class="link-offset-2 link-underline-primary link-underline-opacity-75" href="#">Underline opacity 75</a></p>
<p><a class="link-offset-2 link-underline-primary link-underline-opacity-100" href="#">Underline opacity 100</a></p>
Variantes de survol
Tout comme les .link-opacity-*-hover utilitaires, .link-offset les .link-underline-opacity utilitaires incluent :hover des variantes par défaut. Mélangez et assortissez pour créer des styles de liens uniques.
<a class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-25 link-underline-opacity-75-hover" href="#">
Underline opacity 0
</a>
Liens colorés
Les assistants de liens colorés ont été mis à jour pour s'associer à nos utilitaires de liens. Utilisez les nouveaux utilitaires pour modifier l'opacité du lien, l'opacité du soulignement et le décalage du soulignement.
<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>
l'utilisation de la couleur pour ajouter du sens ne fournit qu'une indication visuelle, qui ne sera pas transmise aux utilisateurs de technologies d'assistance telles que les lecteurs d'écran. Veuillez vous assurer que la signification est évidente à partir du contenu lui-même (par exemple, le texte visible avec un contraste de couleurs suffisant ) ou qu'elle est incluse par des moyens alternatifs, tels qu'un texte supplémentaire masqué avec la .visually-hiddenclasse.
CSS
En plus des fonctionnalités Sass suivantes, pensez à lire nos propriétés personnalisées CSS incluses (alias variables CSS) pour les couleurs et plus encore.
Sass utilities API
Les utilitaires de lien sont déclarés dans notre API d'utilitaires dans scss/_utilities.scss. Découvrez comment utiliser l'API des utilitaires.
"link-opacity": (
css-var: true,
class: link-opacity,
state: hover,
values: (
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
)
),
"link-offset": (
property: text-underline-offset,
class: link-offset,
state: hover,
values: (
1: .125em,
2: .25em,
3: .375em,
)
),
"link-underline": (
property: text-decoration-color,
class: link-underline,
local-vars: (
"link-underline-opacity": 1
),
values: map-merge(
$utilities-links-underline,
(
null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
)
)
),
"link-underline-opacity": (
css-var: true,
class: link-underline-opacity,
state: hover,
values: (
0: 0,
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
),
),