Bootstrap 5 утилита Link (ссылка)

Непрозрачность ссылки

Измените значение цвета альфа-прозрачности ссылки rgba() с помощью утилит. Пожалуйста, имейте в виду, что изменение непрозрачности цвета может привести к появлению ссылок с недостаточным контрастом.

<p><a class="link-opacity-10" href="#">Прозрачность ссылки 10</a></p>
<p><a class="link-opacity-25" href="#">Непрозрачность ссылки 25</a></p>
<p><a class="link-opacity-50" href="#">Непрозрачность ссылки 50</a></p>
<p><a class="link-opacity-75" href="#">Непрозрачность ссылки 75</a></p>
<p><a class="link-opacity-100" href="#">Непрозрачность ссылки 100</a></p>

Вы даже можете изменить уровень непрозрачности при наведении курсора мыши.

<p><a class="link-opacity-10-hover" href="#">Непрозрачность наведения курсора мыши на ссылку 10</a></p>
<p><a class="link-opacity-25-hover" href="#">Непрозрачность наведения курсора мыши на ссылку 25</a></p>
<p><a class="link-opacity-50-hover" href="#">Непрозрачность наведения курсора мыши на ссылку 50</a></p>
<p><a class="link-opacity-75-hover" href="#">Непрозрачность наведения курсора мыши на ссылку 75</a></p>
<p><a class="link-opacity-100-hover" href="#">Непрозрачность наведения курсора мыши на ссылку 100</a></p>

Подчеркивание ссылки

Цвет подчеркивания

Измените цвет подчеркивания независимо от цвета текста ссылки.

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

Смещение подчеркивания

Измените расстояние подчеркивания от вашего текста. Смещение устанавливается в единицах em для автоматического масштабирования в соответствии с текущим значением элемента font-size.

<p><a href="#">Default link</a></p>
<p><a class="link-offset-1" href="#">Offset 1 link</a></p>
<p><a class="link-offset-2" href="#">Offset 2 link</a></p>
<p><a class="link-offset-3" href="#">Offset 3 link</a></p>

Подчеркивание непрозрачности

Измените непрозрачность подчеркивания. Требуется добавить .link-underline, чтобы сначала установить цвет rgba(), который используется для изменения альфа-непрозрачности.

<p><a class="link-offset-2 link-underline link-underline-opacity-0" href="#">Непрозрачность подчеркивания 0</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-10" href="#">Непрозрачность подчеркивания 10</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-25" href="#">Непрозрачность подчеркивания 25</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-50" href="#">Непрозрачность подчеркивания 50</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-75" href="#">Непрозрачность подчеркивания 75</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-100" href="#">Непрозрачность подчеркивания 100</a></p>

Варианты наведения курсора мыши

Так же, как и .link-opacity-*-hover утилиты, .link-offset и .link-underline-opacity утилиты включают :hover варианты по умолчанию. Смешивайте и сочетайте для создания уникальных стилей ссылок.

<a class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="#">
  Непрозрачность подчеркивания 0
</a>

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

Цветные помощники ссылок обновлены для сопряжения с нашими утилитами ссылок. Используйте новые утилиты для изменения непрозрачности ссылок, непрозрачности подчеркивания и смещения подчеркивания.

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

CSS

В дополнение к нижеперечисленным функциям Sass, подумайте о том, чтобы прочитать о включенных в нас пользовательских свойствах CSS (также известных как переменные CSS) для цветов и многом другом.

API утилит Sass

Утилиты ссылок объявлены в нашем API утилит в scss/_utilities.scss. Узнайте, как использовать API утилит.

scss/_utilities.scss

"link-opacity": (
  css-var: true,
  class: link-opacity,
  state: hover,
  values: (
    10: .1,
    25: .25,
    50: .5,
    75: .75,
    100: 1
  )
),
"link-offset": (
  property: text-underline-offset,
  class: link-offset,
  state: hover,
  values: (
    1: .125em,
    2: .25em,
    3: .375em,
  )
),
"link-underline": (
  property: text-decoration-color,
  class: link-underline,
  local-vars: (
    "link-underline-opacity": 1
  ),
  values: map-merge(
    $utilities-links-underline,
    (
      null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
    )
  )
),
"link-underline-opacity": (
  css-var: true,
  class: link-underline-opacity,
  state: hover,
  values: (
    0: 0,
    10: .1,
    25: .25,
    50: .5,
    75: .75,
    100: 1
  ),
),

Заключение

Используя утилиты Bootstrap 5 для стилизации ссылок, вы можете легко настроить их внешний вид, делая ваш сайт более привлекательным и удобным для пользователей. Не забывайте экспериментировать с разными комбинациями стилей и выбирать наиболее подходящие для вашего проекта. Удачи в создании красивых и функциональных ссылок!