跳至主要內容

文件

連結

定義不同的樣式，將連結整合到特定內容中。

靜音修飾符

基礎元件決定了預設的連結顏色。如果您希望連結套用靜音樣式，只需將 .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>