跳到主要内容

文档

链接

定义不同的样式，将链接集成到特定内容中。

静音修饰符

基础组件决定了默认的链接颜色。如果希望链接应用静音样式，只需将 .uk-link-muted 类添加到锚元素。您也可以将该类添加到父元素，它将应用于其中的所有 <a> 元素。

<a class="uk-link-muted" href="#"></a>
链接

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<a class="uk-link-muted" href="#">Link</a>

<p class="uk-link-muted">Lorem ipsum <a href="#">dolor sit</a> amet, consectetur adipiscing elit, sed do <a href="#">eiusmod</a> tempor incididunt ut <a href="#">labore et</a> dolore magna aliqua.</p>

文本修饰符

要使链接看起来像正文文本并应用悬停效果，请将 .uk-link-text 类添加到锚元素。您也可以将该类添加到父元素，它将应用于其中的所有 <a> 元素。这对于页面页脚中的链接列表很有用。

<a class="uk-link-text" href="#"></a>
<ul class="uk-list uk-link-text">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

标题修饰符

要设置标题元素内的链接样式，请将 .uk-link-heading 类添加到锚元素。

<h3><a class="uk-link-heading" href="#"></a></h3>

标题

<h3><a class="uk-link-heading" href="#">Heading</a></h3>

重置修饰符

要重置链接的颜色，使其继承父元素的颜色，请添加 .uk-link-reset 类。不会有任何悬停效果。这对于标题元素内的链接很有用。您也可以将该类添加到父元素，它将应用于其中的所有 <a> 元素。

链接

标题

<a class="uk-link-reset" href="#">Link</a>

<h3><a class="uk-link-reset" href="#">Heading</a></h3>

切换

要使用锚作为父元素并在其子元素之一上应用链接样式，只需将 .uk-link-toggle 类添加到父元素，并将 .uk-link-* 类之一添加到子元素。例如，您可以链接整个卡片，并且仍然在标题上具有悬停效果。

<a class="uk-link-toggle" href="#">
    <span class="uk-link-heading"></span>
</a>

标题

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<a href class="uk-display-block uk-card uk-card-body uk-card-default uk-link-toggle uk-width-medium">
    <h3 class="uk-card-title"><span class="uk-link-heading">Heading</span></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>