Ссылка
Утилиты ссылок используются при стилизации якорей, — для настройки цвета, непрозрачности, смещения подчеркивания, цвета подчеркивания и многого другого.
Непрозрачность ссылки
Измените альфа-прозрачность значения цвета ссылки rgba() с помощью утилит. Имейте в виду, что изменения непрозрачности цвета могут привести к ссылкам с недостаточной контрастностью.
p>a class="link-opacity-10" href="#">Link opacity 10a>p> p>a class="link-opacity-25" href="#">Link opacity 25a>p> p>a class="link-opacity-50" href="#">Link opacity 50a>p> p>a class="link-opacity-75" href="#">Link opacity 75a>p> p>a class="link-opacity-100" href="#">Link opacity 100a>p>Вы даже можете изменить уровень непрозрачности при наведении.
p>a class="link-opacity-10-hover" href="#">Непрозрачность при наведении ссылки 10a>p> p>a class="link-opacity-25-hover" href="#">Непрозрачность при наведении ссылки 25a>p> p>a class="link-opacity-50-hover" href="#">Непрозрачность при наведении ссылки 50a>p> p>a class="link-opacity-75-hover" href="#">Непрозрачность при наведении ссылки 75a>p> p>a class="link-opacity-100-hover" href="#">Непрозрачность при наведении ссылки 100a>p>Подчеркивание ссылки
Цвет подчеркивания
Измените цвет подчеркивания независимо от цвета текста ссылки.
p>a href="#" class="link-underline-primary">Primary underlinea>p> p>a href="#" class="link-underline-secondary">Secondary underlinea>p> p>a href="#" class="link-underline-success">Success underlinea>p> p>a href="#" class="link-underline-danger">Danger underlinea>p> p>a href="#" class="link-underline-warning">Warning underlinea>p> p>a href="#" class="link-underline-info">Info underlinea>p> p>a href="#" class="link-underline-light">Light underlinea>p> p>a href="#" class="link-underline-dark">Dark underlinea>p>Смещение подчеркивания
Измените расстояние подчеркивания от вашего текста. Смещение задается в единицах em для автоматического масштабирования с текущим размером шрифта элемента font-size .
p>a href="#">Ссылка по умолчаниюa>p> p>a class="link-offset-1" href="#">Смещение 1 ссылкиa>p> p>a class="link-offset-2" href="#">Смещение 2 ссылкиa>p> p>a class="link-offset-3" href="#">Смещение 3 ссылкиa>p>Непрозрачность подчеркивания
Измените непрозрачность подчеркивания. Требуется добавить .link-underline , чтобы сначала установить цвет rgba() , который мы используем, чтобы затем изменить непрозрачность альфа-канала.
p>a class="link-offset-2 link-underline link-underline-opacity-0" href="#">Непрозрачность подчеркивания 0a>p> p>a class="link-offset-2 link-underline link-underline-opacity-10" href="#">Непрозрачность подчеркивания 10a>p> p>a class="link-offset-2 link-underline link-underline-opacity-25" href="#">Непрозрачность подчеркивания 25a>p> p>a class="link-offset-2 link-underline link-underline-opacity-50" href="#">Непрозрачность подчеркивания 50a>p> p>a class="link-offset-2 link-underline link-underline-opacity-75" href="#">Непрозрачность подчеркивания 75a>p> p>a class="link-offset-2 link-underline link-underline-opacity-100" href="#">Непрозрачность подчеркивания 100a>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 linka>p> p>a href="#" class="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Secondary linka>p> p>a href="#" class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Success linka>p> p>a href="#" class="link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Danger linka>p> p>a href="#" class="link-warning link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Warning linka>p> p>a href="#" class="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Info linka>p> p>a href="#" class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Light linka>p> p>a href="#" class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Dark linka>p> p>a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis linka>p>Совет по специальным возможностям. Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Пожалуйста, убедитесь, что значение очевидно из самого содержания (например, видимого текста) или включено с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса .visually-hidden .
CSS
В дополнение к следующим функциям Sass, рассмотрите возможность прочитать о наших включенных пользовательских свойствах CSS (также известных как переменные CSS) для цветов и многого другого.
Sass API утилиты
Утилиты ссылок объявлены в нашем 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 ), ),Link
Link utilities are used to stylize your anchors to adjust their color, opacity, underline offset, underline color, and more.
Link opacity
Change the alpha opacity of the link rgba() color value with utilities. Please be aware that changes to a color’s opacity can lead to links with insufficient contrast.
p>a class="link-opacity-10" href="#">Link opacity 10a>p> p>a class="link-opacity-25" href="#">Link opacity 25a>p> p>a class="link-opacity-50" href="#">Link opacity 50a>p> p>a class="link-opacity-75" href="#">Link opacity 75a>p> p>a class="link-opacity-100" href="#">Link opacity 100a>p>You can even change the opacity level on hover.
p>a class="link-opacity-10-hover" href="#">Link hover opacity 10a>p> p>a class="link-opacity-25-hover" href="#">Link hover opacity 25a>p> p>a class="link-opacity-50-hover" href="#">Link hover opacity 50a>p> p>a class="link-opacity-75-hover" href="#">Link hover opacity 75a>p> p>a class="link-opacity-100-hover" href="#">Link hover opacity 100a>p>Link underlines
Underline color
Change the underline’s color independent of the link text color.
p>a href="#" class="link-underline-primary">Primary underlinea>p> p>a href="#" class="link-underline-secondary">Secondary underlinea>p> p>a href="#" class="link-underline-success">Success underlinea>p> p>a href="#" class="link-underline-danger">Danger underlinea>p> p>a href="#" class="link-underline-warning">Warning underlinea>p> p>a href="#" class="link-underline-info">Info underlinea>p> p>a href="#" class="link-underline-light">Light underlinea>p> p>a href="#" class="link-underline-dark">Dark underlinea>p>Underline offset
Change the underline’s distance from your text. Offset is set in em units to automatically scale with the element’s current font-size .
p>a href="#">Default linka>p> p>a class="link-offset-1" href="#">Offset 1 linka>p> p>a class="link-offset-2" href="#">Offset 2 linka>p> p>a class="link-offset-3" href="#">Offset 3 linka>p>Underline opacity
Change the underline’s opacity. Requires adding .link-underline to first set an rgba() color we use to then modify the alpha opacity.
p>a class="link-offset-2 link-underline link-underline-opacity-0" href="#">Underline opacity 0a>p> p>a class="link-offset-2 link-underline link-underline-opacity-10" href="#">Underline opacity 10a>p> p>a class="link-offset-2 link-underline link-underline-opacity-25" href="#">Underline opacity 25a>p> p>a class="link-offset-2 link-underline link-underline-opacity-50" href="#">Underline opacity 50a>p> p>a class="link-offset-2 link-underline link-underline-opacity-75" href="#">Underline opacity 75a>p> p>a class="link-offset-2 link-underline link-underline-opacity-100" href="#">Underline opacity 100a>p>Hover variants
Just like the .link-opacity-*-hover utilities, .link-offset and .link-underline-opacity utilities include :hover variants by default. Mix and match to create unique link styles.
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>Colored links
Colored link helpers have been updated to pair with our link utilities. Use the new utilities to modify the link opacity, underline opacity, and underline offset.
p>a href="#" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Primary linka>p> p>a href="#" class="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Secondary linka>p> p>a href="#" class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Success linka>p> p>a href="#" class="link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Danger linka>p> p>a href="#" class="link-warning link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Warning linka>p> p>a href="#" class="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Info linka>p> p>a href="#" class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Light linka>p> p>a href="#" class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Dark linka>p> p>a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis linka>p>Accessibility tip: Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a sufficient color contrast) or is included through alternative means, such as additional text hidden with the .visually-hidden class.
CSS
In addition to the following Sass functionality, consider reading about our included CSS custom properties (aka CSS variables) for colors and more.
Sass utilities API
Link utilities are declared in our utilities API in scss/_utilities.scss . Learn how to use the utilities 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 ), ),- Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
- Code licensed MIT, docs CC BY 3.0.
- Currently v5.3.1.