UIkit3.x文档

链接

为链接到特定内容的链接设置不同的样式。

柔和修饰

Base 组件设置了默认链接的颜色。如果希望链接改为柔和样式，只需将.uk-link-muted class添加到锚点元素。您还可以将class添加到父元素，这样会将样式应用到其中的所有<a>元素。

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

    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>

  • Heading

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

重置

要重置链接的颜色，使其继承父级的颜色，请添加.uk-link-reset class。这个修饰不带有任何悬停效果，这对于标题元素内的链接很有用。您还可以将它添加到父元素，这样样式将应用到其中的所有<a> 元素上面。

  • Link

    Heading

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