Цветные ссылки

Цветные ссылки с состояниями наведения

На этой странице

Цвета ссылок

Вы можете использовать классы .link-* для раскрашивания ссылок. В отличие от классов .text-*, эти классы имеют состояния :hover и :focus. В некоторых стилях ссылок используется относительно светлый цвет переднего плана, и их следует использовать только на темном фоне, чтобы обеспечить достаточную контрастность.

Внимание! .link-body-emphasis в настоящее время является единственной цветной ссылкой, которая адаптируется к цветовым режимам. Это рассматривается как особый случай, пока не появится v6, и мы не сможем более тщательно перестроить цвета нашей темы для цветовых режимов. До тех пор это уникальный высококонтрастный цвет ссылки с пользовательскими стилями :hover и :focus. Тем не менее, он по-прежнему реагирует на новые утилиты ссылок.

html

<p><a href="#" class="link-primary">Primary ссылка</a></p>
<p><a href="#" class="link-secondary">Secondary ссылка</a></p>
<p><a href="#" class="link-success">Success ссылка</a></p>
<p><a href="#" class="link-danger">Danger ссылка</a></p>
<p><a href="#" class="link-warning">Warning ссылка</a></p>
<p><a href="#" class="link-info">Info ссылка</a></p>
<p><a href="#" class="link-light">Light ссылка</a></p>
<p><a href="#" class="link-dark">Dark ссылка</a></p>
<p><a href="#" class="link-body-emphasis">Акцентная ссылка</a></p>

Совет по специальным возможностям. Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что смысл очевиден из самого содержимого (например, видимый текст с достаточным цветовым контрастом) или включается с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса .visually-hidden.

Утилиты ссылки

Добавлено в версии 5.3.0

Цветные ссылки также можно изменить с помощью наших утилит ссылок.