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

Цвета ссылок

Вы можете использовать классы .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

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

html

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

© 2011–2022 Twitter, Inc.
© 2011–2022 The Bootstrap Authors
Code licensed under the MIT License.
Documentation licensed under the Creative Commons Attribution License v3.0.
https://getbootstrap.com/docs/5.3/helpers/colored-links/