Bootstrap 5 Colored Links (цветные ссылки)

Bootstrap 5 предоставляет удобные классы для стилизации ссылок в разных цветах. Ниже рассмотрим, как создавать цветные ссылки с помощью классов .link-*. Эти классы имеют состояния :hover и :focus, что делает их удобными для интерактивных элементов.

Цвета ссылок

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

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

<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 класса.

Утилиты для создания ссылок

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

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

<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>