色付きリンク（Colored links） v5.0.0新設
ホバー状態の色付きリンク。
※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版、v5.3.0-beta版での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版、v5.3.0-beta版での変更も含みます。
このページの項目 v5.0.0新設
.link-{themecolor} クラスを使用して、リンクの色を強調する。.text-{color} クラスとは異なり、これらのクラスには :hover と :focus 状態がある。
実例（Examples）
リンク色の種類
Primary：.link-primary文字色ユーティリティクラスの場合とリンクヘルパークラスの場合。
Secondary：.link-secondary文字色ユーティリティクラスの場合とリンクヘルパークラスの場合。
Success：.link-success文字色ユーティリティクラスの場合とリンクヘルパークラスの場合。
Danger：.link-danger文字色ユーティリティクラスの場合とリンクヘルパークラスの場合。
Warning：.link-warning文字色ユーティリティクラスの場合とリンクヘルパークラスの場合。
Info：.link-info文字色ユーティリティクラスの場合とリンクヘルパークラスの場合。
Light：.link-light文字色ユーティリティクラスの場合とリンクヘルパークラスの場合。
※色が見やすいようにライトモードでは背景色がつきます
Dark：.link-dark文字色ユーティリティクラスの場合とリンクヘルパークラスの場合。
※色が見やすいようにダークモードでは背景色がつきます
※デフォルトの場合（参考）：クラスの設定がない場合。
設定例
<a href="#" class="text-primary">文字色ユーティリティクラス</a>の場合と<a href="#" class="link-primary">リンクヘルパークラス</a>の場合。【設定】
<a>タグに.link-{themecolor}（上記の「リンク色の種類」から選択）を入れると、ホバーやフォーカス状態で濃いめに強調される{themecolor}は、primary,secondary,success,danger,warning,info,light,darkのいずれかを選択
一部のリンクスタイルは、比較的明るい前景色を使用しており、十分なコントラストを得るために、暗い背景でのみ使用する必要がある。
Sass v5.1.0追加
デフォルトの設定
scss/helpers/_colored-links.scss の設定@each $color, $value in $theme-colors {
.link-#{$color} {
color: $value !important; // stylelint-disable-line declaration-no-important
@if $link-shade-percentage != 0 {
&:hover,
&:focus {
color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)) !important; // stylelint-disable-line declaration-no-important
}
}
}
}