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

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

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

Цвета ссылок

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

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

html

<p><a href="#" class="link-primary">Primary link</a></p>
<p><a href="#" class="link-secondary">Secondary link</a></p>
<p><a href="#" class="link-success">Success link</a></p>
<p><a href="#" class="link-danger">Danger link</a></p>
<p><a href="#" class="link-warning">Warning link</a></p>
<p><a href="#" class="link-info">Info link</a></p>
<p><a href="#" class="link-light">Light link</a></p>
<p><a href="#" class="link-dark">Dark link</a></p>
<p><a href="#" class="link-body-emphasis">Emphasis link</a></p>

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

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

Добавлено в v5.3.0

Цветные ссылки также могут быть изменены нашими утилитами ссылок.