.link-{themecolor}
クラスを使用して、リンクの色を強調する。.text-{color}
クラスとは異なり、これらのクラスには :hover
と :focus
状態が存在する。
リンク色の種類
Primary:.link-primary
文字色ユーティリティクラスの場合とリンクヘルパークラスの場合。
Secondary:.link-secondary
文字色ユーティリティクラスの場合とリンクヘルパークラスの場合。
Success:.link-success
文字色ユーティリティクラスの場合とリンクヘルパークラスの場合。
Info:.link-info
文字色ユーティリティクラスの場合とリンクヘルパークラスの場合。
Warning:.link-warning
文字色ユーティリティクラスの場合とリンクヘルパークラスの場合。
Danger:.link-danger
文字色ユーティリティクラスの場合とリンクヘルパークラスの場合。
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
,info
,warning
,danger
,light
,dark
のいずれかを選択
一部のリンクスタイルは、比較的明るい前景色を使用しており、十分なコントラストを得るために、暗い背景でのみ使用する必要がある。