Ссылка
Прозрачность ссылки
Измените альфа-прозрачность ссылки rgba() значение цвета с помощью утилит. Пожалуйста, имейте в виду, что изменения прозрачности цвета могут привести к ссылкам с недостаточной контрастностью.
<p><a class="link-opacity-10" href="#">Link opacity 10</a></p> <p><a class="link-opacity-25" href="#">Link opacity 25</a></p> <p><a class="link-opacity-50" href="#">Link opacity 50</a></p> <p><a class="link-opacity-75" href="#">Link opacity 75</a></p> <p><a class="link-opacity-100" href="#">Link opacity 100</a></p>
Вы даже можете изменить уровень прозрачности при наведении курсора.
<p><a class="link-opacity-10-hover" href="#">Link hover opacity 10</a></p> <p><a class="link-opacity-25-hover" href="#">Link hover opacity 25</a></p> <p><a class="link-opacity-50-hover" href="#">Link hover opacity 50</a></p> <p><a class="link-opacity-75-hover" href="#">Link hover opacity 75</a></p> <p><a class="link-opacity-100-hover" href="#">Link hover opacity 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="#">Underline opacity 0</a></p> <p><a class="link-offset-2 link-underline link-underline-opacity-10" href="#">Underline opacity 10</a></p> <p><a class="link-offset-2 link-underline link-underline-opacity-25" href="#">Underline opacity 25</a></p> <p><a class="link-offset-2 link-underline link-underline-opacity-50" href="#">Underline opacity 50</a></p> <p><a class="link-offset-2 link-underline link-underline-opacity-75" href="#">Underline opacity 75</a></p> <p><a class="link-offset-2 link-underline link-underline-opacity-100" href="#">Underline opacity 100</a></p>
Варианты при наведении
Как и утилит .link-opacity-*-hover, утилит .link-offset и .link-underline-opacity по умолчанию включены варианты при наведении. Смешивайте и сопоставляйте, чтобы создавать уникальные стили ссылок.
<a class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="#"> Underline opacity 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>
.visually-hidden. CSS
В дополнение к следующей функциональности Sass, ознакомьтесь с нашими включёнными CSS настраиваемыми свойствами (также известными как CSS переменные) для цветов и др.
API утилит Sass
Утилиты ссылок объявлены в нашем API утилит в scss/_utilities.scss. Узнайте, как использовать API утилит.
"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
),
),
© 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/utilities/link/
