跳至主要內容

文件

工具

一系列有用的工具類別，可為您的內容設定樣式。

面板

UIkit 使用面板來概述您內容的特定區段。例如，這些可以從 網格組件 排列在網格欄中。

將 .uk-panel 類別新增至 <div> 元素，以建立位置環境，將 box-sizing 設定為 border-box，套用清除修正，並移除其最後一個子元素的底部邊距。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="uk-child-width-1-3@s" uk-grid>
    <div>
        <div class="uk-panel">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
    <div>
        <div class="uk-panel">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
    <div>
        <div class="uk-panel">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
</div>

可捲動面板

新增 .uk-panel-scrollable 類別，讓面板具有固定高度，並在內容超出高度時使其可捲動。您也可以新增其中一個 .uk-height-* 類別，以套用不同的高度。

<div class="uk-panel uk-panel-scrollable">
    <ul class="uk-list">
        <li><label><input class="uk-checkbox" type="checkbox"> Category 1</label></li>
        <li>
            <label><input class="uk-checkbox" type="checkbox"> Category 2</label>
            <ul>
                <li><label><input class="uk-checkbox" type="checkbox"> Category 2.1</label></li>
                <li><label><input class="uk-checkbox" type="checkbox"> Category 2.2</label></li>
                <li>
                    <label><input class="uk-checkbox" type="checkbox"> Category 2.3</label>
                    <ul>
                        <li><label><input class="uk-checkbox" type="checkbox"> Category 2.3.1</label></li>
                        <li><label><input class="uk-checkbox" type="checkbox"> Category 2.3.2</label></li>
                    </ul>
                </li>
                <li><label><input class="uk-checkbox" type="checkbox"> Category 2.4</label></li>
            </ul>
        </li>
        <li><label><input class="uk-checkbox" type="checkbox"> Category 3</label></li>
        <li><label><input class="uk-checkbox" type="checkbox"> Category 4</label></li>
    </ul>

</div>

清除和浮動

浮動元素會從文件流程中取出，並對齊其容器的左側或右側。清除浮動很重要，否則在最糟的情況下，您可能會導致網站錯亂。下列類別將幫助您設定基本版面配置。

類別 說明
.uk-float-left 新增此類別以將元素浮動到左側。
.uk-float-right 新增此類別以將元素浮動到右側。
.uk-clearfix 將此類別新增至父容器以清除浮動。或者，您可以建立新的區塊格式環境，例如新增 .uk-overflow-hidden 類別。
右
左
<div class="uk-clearfix">
    <div class="uk-float-right">
        <div class="uk-card uk-card-default uk-card-body">Right</div>
    </div>
    <div class="uk-float-left">
        <div class="uk-card uk-card-default uk-card-body">Left</div>
    </div>
</div>

溢位

這些工具提供不同的類別，以修改元素的溢位行為。

類別 說明
.uk-overflow-hidden 新增此類別以裁剪超出其容器尺寸的內容。
.uk-overflow-auto 新增此類別以建立一個容器，每當元素的內容寬度或高度大於容器本身時，該容器都會提供水平或垂直捲軸。

注意 當必須在回應式網站上處理表格時，.uk-overflow-auto 類別非常有用，因為在某些時候，表格會變得太大。它在 <pre> 元素上也運作良好。

表格標題 表格標題 表格標題 表格標題 表格標題 表格標題 表格標題 表格標題
表格資料 表格資料 表格資料 表格資料 表格資料 表格資料 表格資料 表格資料
表格資料 表格資料 表格資料 表格資料 表格資料 表格資料 表格資料 表格資料
表格頁尾 表格頁尾 表格頁尾 表格頁尾 表格頁尾 表格頁尾 表格頁尾 表格頁尾 
<div class="uk-overflow-auto uk-height-small">
    <table class="uk-table uk-table-striped uk-table-condensed uk-text-nowrap">
        <thead>
            <tr>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
            </tr>
            <tr>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Table Footer</td>
                <td>Table Footer</td>
                <td>Table Footer</td>
                <td>Table Footer</td>
                <td>Table Footer</td>
                <td>Table Footer</td>
                <td>Table Footer</td>
                <td>Table Footer</td>
            </tr>
        </tfoot>
    </table>
</div>

溢位自動

新增 uk-overflow-auto 屬性，以展開元素的高度，使其填滿父容器的剩餘高度。如果其內容高於展開的高度，則會提供垂直捲軸。

在溢位自動容器之前的一些內容。

在溢位自動容器之後的一些內容。

<div class="uk-height-medium">
    <div class="js-wrapper">

        <p>Some content before the overflow auto container.</p>

        <div uk-overflow-auto="selContainer: .uk-height-medium; selContent: .js-wrapper">
            <div class="uk-grid-small" uk-grid>
                <div class="uk-width-1-2"><img src="images/light.jpg" width="1800" height="1200" alt=""></div>
                <div class="uk-width-1-2"><img src="images/dark.jpg" width="1800" height="1200" alt=""></div>
                <div class="uk-width-1-2"><img src="images/photo.jpg" width="1800" height="1200" alt=""></div>
                <div class="uk-width-1-2"><img src="images/photo2.jpg" width="1800" height="1200" alt=""></div>
            </div>
        </div>

        <p>Some content after the overflow auto container.</p>

    </div>
</div>

它通常在 彈出視窗組件 中使用。

<div id="my-id" uk-modal>
    <div class="uk-modal-dialog" uk-overflow-auto></div>
</div>
開啟 
<a class="uk-button uk-button-default" href="#modal-overflow" uk-toggle>Open</a>

<div id="modal-overflow" uk-modal>
    <div class="uk-modal-dialog">

        <button class="uk-modal-close-default" type="button" uk-close></button>

        <div class="uk-modal-header">
            <h2 class="uk-modal-title">Headline</h2>
        </div>

        <div class="uk-modal-body" uk-overflow-auto>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        </div>

        <div class="uk-modal-footer uk-text-right">
            <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
            <button class="uk-button uk-button-primary" type="button">Save</button>
        </div>

    </div>
</div>

您可以透過將 selContainer 和 selContent 選項新增至屬性來變更目標高度。瞭解更多

選項 值 預設 說明
sel-container 字串 .uk-modal 提供高度的容器元素的 CSS 選取器。
sel-content 字串 .uk-modal-dialog 包裝內部內容以提供其高度的元素的 CSS 選取器。

調整大小

這些工具提供不同的類別來調整元素大小。

類別 說明
.uk-resize 新增此類別以啟用水平和垂直調整大小。
.uk-resize-vertical 新增此類別以僅啟用垂直調整大小。

抓取並拖曳下方每個方塊的右下角以調整其大小

            
<!-- Resize vertically -->
<div uk-grid>
    <div class="uk-width-1-2">…</div>
    <div class="uk-width-1-2">…</div>
</div>

<div class="uk-child-width-1-2" uk-grid>
    <div></div>
    <div></div>
</div>
            
        
            
<!-- Resize horizontally and vertically -->
<div uk-grid>
    <div class="uk-width-1-2">…</div>
    <div class="uk-width-1-2">…</div>
</div>

<div class="uk-child-width-1-2" uk-grid>
    <div></div>
    <div></div>
</div>
            
        
<div class="uk-child-width-1-2@s" uk-grid>
    <div>
        <pre class="uk-resize-vertical">
            <code>
&lt;!-- Resize vertically --&gt;
&lt;div uk-grid&gt;
    &lt;div class="uk-width-1-2"&gt;…&lt;/div&gt;
    &lt;div class="uk-width-1-2"&gt;…&lt;/div&gt;
&lt;/div&gt;

&lt;div class="uk-child-width-1-2" uk-grid&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
            </code>
        </pre>
    </div>
    <div>
        <pre class="uk-resize">
            <code>
&lt;!-- Resize horizontally and vertically --&gt;
&lt;div uk-grid&gt;
    &lt;div class="uk-width-1-2"&gt;…&lt;/div&gt;
    &lt;div class="uk-width-1-2"&gt;…&lt;/div&gt;
&lt;/div&gt;

&lt;div class="uk-child-width-1-2" uk-grid&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
            </code>
        </pre>
    </div>
</div>

顯示

新增其中一個類別以變更元素的顯示屬性。

類別 說明
.uk-display-block 強制元素如同區塊元素一樣運作。
.uk-display-inline 強制元素如同內嵌元素一樣運作。
.uk-display-inline-block 強制元素如同內嵌區塊元素一樣運作。

內嵌

這些類別通常用於在容器上建立位置環境，其中包含影像作為子項。容器會保持與影像相同的大小以及回應式行為。這樣一來，使用 定位組件 放置在影像上的內容將不會流出影像尺寸之外。

類別 說明
.uk-inline 新增此類別以將內嵌區塊行為套用至元素、新增最大寬度 100% 並建立位置環境。
.uk-inline-clip 與 .uk-inline 相同，它也會裁剪溢出的子元素。 
<div class="uk-inline">
    <img src="" width="" height="" alt="">
    <div class="uk-position-cover"></div>
</div>
覆蓋層
<div class="uk-inline">
    <img src="images/photo.jpg" width="300" height="200" alt="">
    <div class="uk-position-medium uk-position-cover uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">Overlay</div>
</div>

回應式物件

在 UIkit 中，<img>、<canvas>、<audio> 和 <video> 元素預設會調整為其父容器的寬度。若要將回應式行為套用至 iframe，請新增 uk-responsive 屬性。對於其他元素或套用不同的行為，只需新增下列其中一個類別即可。

類別 說明
.uk-responsive-width 新增此類別以將相同的回應式行為套用至任何其他元素。它會根據其父系的寬度調整物件的寬度，並保持原始的長寬比。
.uk-responsive-height 新增此類別以根據其父系的高度調整物件的高度（而不是其寬度），並保持原始的長寬比。
.uk-preserve-width 新增此類別以避免預設的回應式行為，並保留原始影像尺寸。您也可以將此類別新增至父元素，它會套用至所有相關的內容元素。如果您要將 Google 地圖嵌入您的網站，您可能需要此功能來修正地圖的影像。 
<img class="uk-responsive-height" src="" width="" height="" alt="">

<iframe src="" width="" height="" uk-responsive></iframe>

物件的符合度和位置

定義應如何調整影像或影片的內容大小，以符合其元素。

類別 說明
.uk-object-cover 透過保持其長寬比來完全涵蓋內容方塊，來縮放影像。
.uk-object-contain 透過保持其長寬比來縮放影像，使其寬度和高度盡可能符合內容方塊。
.uk-object-fill 縮放影像以填滿元素的內容方塊。
.uk-object-none 完全不縮放影像。
.uk-object-scale-down 類似於包含，但永遠不會向上縮放。

注意 由於影像和影片在 UIkit 中預設為回應式，因此在使用這些類別之一時，必須設定長寬比。

<img class="uk-object-cover" src="" width="1000" height="1000" alt="" style="aspect-ratio: 1 / 1">
<div class="uk-child-width-1-2@s" uk-grid>
    <div>
        <img class="uk-object-cover" src="images/photo.jpg" width="1000" height="1000" alt="" style="aspect-ratio: 1 / 1;">
    </div>
    <div>
        <img class="uk-object-contain" src="images/photo.jpg" width="1000" height="1000" alt="" style="aspect-ratio: 1 / 1;">
    </div>
</div>

若要修改影像或影片在其元素內的對齊方式，請新增其中一個 uk-object-* 位置類別。

類別 說明
.uk-object-top-left 對齊到左上角。
.uk-object-top-center 對齊到頂部。
.uk-object-top-right 對齊到右上角。
.uk-object-center-left 對齊到左側。
.uk-object-center-center 對齊到中心。
.uk-object-center-right 對齊到右側。
.uk-object-bottom-left 對齊到左下角。
.uk-object-bottom-center 對齊到底部。
.uk-object-bottom-right 對齊到右下角。

邊框圓角

若要修改元素（例如影像）的邊框圓角，請新增下列其中一個類別。

類別 說明
.uk-border-rounded 新增此類別以套用圓角。
.uk-border-circle 新增此類別以套用圓形形狀。
.uk-border-pill 新增此類別以套用藥丸形狀。
Border rounded Border circle Border pill
<img class="uk-border-rounded" src="images/avatar.jpg" width="200" height="200" alt="Border rounded">
<img class="uk-border-circle" src="images/avatar.jpg" width="200" height="200" alt="Border circle">
<img class="uk-border-pill" src="images/avatar.jpg" width="200" height="200" alt="Border pill">

陰影

您可以將不同的陰影套用至元素。只需新增下列其中一個類別即可。

類別 說明
.uk-box-shadow-small 新增此類別以套用小陰影。
.uk-box-shadow-medium 新增此類別以套用中陰影。
.uk-box-shadow-large 新增此類別以套用大陰影。
.uk-box-shadow-xlarge 新增此類別以套用非常大的陰影。 
<div class="uk-box-shadow-small"></div>
小
中
大
特大
<div class="uk-child-width-1-2@s uk-text-center" uk-grid>
    <div>
        <div class="uk-box-shadow-small uk-padding">Small</div>
    </div>

    <div>
        <div class="uk-box-shadow-medium uk-padding">Medium</div>
    </div>

    <div>
        <div class="uk-box-shadow-large uk-padding">Large</div>
    </div>

    <div>
        <div class="uk-box-shadow-xlarge uk-padding">X-Large</div>
    </div>
</div>

底部陰影

若要在元素底部套用陰影，使其看起來像是懸浮，請新增 .uk-box-shadow-bottom 類別。這也可以與其他 .uk-box-shadow-* 修飾詞之一組合使用。

<div class="uk-box-shadow-bottom"></div>
底部陰影
<div class="uk-box-shadow-bottom uk-box-shadow-small uk-width-1-2@s uk-text-center">
    <div class="uk-background-default uk-padding-large">
        Box shadow bottom
    </div>
</div>

滑鼠懸停

若要在滑鼠懸停時套用陰影效果，請加入以下類別之一。這也可用於修改懸停時的陰影大小。若要這麼做，只需將它們與上述類別之一結合使用。

類別 說明
.uk-box-shadow-hover-small 加入此類別以在滑鼠懸停時套用小型陰影效果。
.uk-box-shadow-hover-medium 加入此類別以在滑鼠懸停時套用中型陰影效果。
.uk-box-shadow-hover-large 加入此類別以在滑鼠懸停時套用大型陰影效果。
.uk-box-shadow-hover-xlarge 加入此類別以在滑鼠懸停時套用超大型陰影效果。 
<div class="uk-box-shadow-hover-small"></div>
懸停小型
懸停超大型
小型 + 懸停大型
超大型 + 懸停中型
<div class="uk-child-width-1-2@s uk-text-center" uk-grid>
    <div>
        <div class="uk-box-shadow-hover-small uk-padding">Hover Small</div>
    </div>

    <div>
        <div class="uk-box-shadow-hover-xlarge uk-padding">Hover X-Large</div>
    </div>

    <div>
        <div class="uk-box-shadow-small uk-box-shadow-hover-large uk-padding">Small + Hover Large</div>
    </div>

    <div>
        <div class="uk-box-shadow-xlarge uk-box-shadow-hover-medium uk-padding">X-Large + Hover Medium</div>
    </div>
</div>

首字放大

使用 .uk-dropcap 類別，您可以將其直接加入 <p> 元素，在文字中實現首字放大的效果。

Dorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p class="uk-dropcap">Dorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

使用新的 .uk-logo 類別，您可以輕鬆定義您的 Logo，例如在導覽列中。

<a class="uk-logo" href=""></a>
<a class="uk-logo" href="#">Logo</a>

在深色背景上顯示圖像時，加入 反相元件 的 .uk-light 類別，使其顏色會自動反轉以獲得更好的可見性。

<div class="uk-panel uk-padding uk-background-secondary uk-light">
    <a class="uk-logo" href="#">Logo</a>
</div>

Logo 圖片

您也可以使用 <img> 元素，例如 SVG，作為 Logo。

<a class="uk-logo" href="">
    <img src="" width="" height="" alt="">
</a>

您甚至可以使用 反相元件 自動顯示淺色和深色背景的替代 Logo。只需將 .uk-logo-inverse 類別加入第二個 Logo 圖片。根據色彩模式，當 .uk-light 或 .uk-dark 類別套用到父元素時，將會顯示反相的 Logo。

<div class="uk-light">
    <a class="uk-logo" href="">
        <img src="" width="" height="" alt="">
        <img class="uk-logo-inverse" src="" width="" height="" alt="">
    </a>
</div>
<div class="uk-child-width-expand@s" uk-grid>
    <div>
        <div class="uk-panel uk-padding uk-background-muted">
            <a class="uk-logo" href="#" aria-label="Back to Home">
                <img src="images/logo-placeholder.svg" width="130" height="70" alt="">
                <img class="uk-logo-inverse" src="images/logo-placeholder-light.svg" width="130" height="70" alt="">
            </a>
        </div>
    </div>
    <div>
        <div class="uk-panel uk-padding uk-background-secondary uk-light">
            <a class="uk-logo" href="#" aria-label="Back to Home">
                <img src="images/logo-placeholder.svg" width="130" height="70" alt="">
                <img class="uk-logo-inverse" src="images/logo-placeholder-light.svg" width="130" height="70" alt="">
            </a>
        </div>
    </div>
</div>

注意 若要將 SVG Logo 作為內嵌 SVG 注入，請使用 SVG 元件。

混合模式

加入以下類別之一，將不同的混合模式套用到您的背景，例如在將它們放置在圖像上時。您可以將這些與 覆蓋元件 結合使用。若要更好地了解背景混合模式的工作方式，請查看這篇 CSS Tricks 文章。

類別 說明
.uk-blend-multiply 此類別將混合模式設定為「色彩增值」。
.uk-blend-screen 此類別將混合模式設定為「濾色」。
.uk-blend-overlay 此類別將混合模式設定為「覆蓋」。
.uk-blend-darken 此類別將混合模式設定為「變暗」。
.uk-blend-lighten 此類別將混合模式設定為「變亮」。
.uk-blend-color-dodge 此類別將混合模式設定為「色彩加亮」。
.uk-blend-color-burn 此類別將混合模式設定為「色彩加深」。
.uk-blend-hard-light 此類別將混合模式設定為「實光」。
.uk-blend-soft-light 此類別將混合模式設定為「柔光」。
.uk-blend-difference 此類別將混合模式設定為「差異」。
.uk-blend-exclusion 此類別將混合模式設定為「排除」。
.uk-blend-hue 此類別將混合模式設定為「色相」。
.uk-blend-saturation 此類別將混合模式設定為「飽和度」。
.uk-blend-color 此類別將混合模式設定為「色彩」。
.uk-blend-luminosity 此類別將混合模式設定為「明度」。 
<div class="uk-position-relative">
    <div class="uk-blend-multiply uk-overlay uk-overlay-primary"></div>
    <img src="" width="" height="" alt="">
</div>
Blend Multiply

色彩增值

Blend Screen

濾色

Blend Overlay

覆蓋層

Blend Darken

變暗

Blend Lighten

變亮

Blend Color Dodge

色彩加亮

Blend Color Burn

色彩加深

Blend Hard Light

實光

Blend Soft Light

柔光

Blend Difference

差異

Blend Exclusion

排除

Blend Hue

色相

Blend Saturation

飽和度

Blend Color

色彩

Blend Luminosity

明度

<div class="uk-child-width-1-2 uk-child-width-1-3@s uk-grid-small uk-light" uk-grid>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-multiply" src="images/dark.jpg" width="1800" height="1200" alt="Blend Multiply">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Multiply</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-screen" src="images/dark.jpg" width="1800" height="1200" alt="Blend Screen">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Screen</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-overlay" src="images/dark.jpg" width="1800" height="1200" alt="Blend Overlay">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Overlay</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-darken" src="images/dark.jpg" width="1800" height="1200" alt="Blend Darken">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Darken</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-lighten" src="images/dark.jpg" width="1800" height="1200" alt="Blend Lighten">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Lighten</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-color-dodge" src="images/dark.jpg" width="1800" height="1200" alt="Blend Color Dodge">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Color Dodge</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-color-burn" src="images/dark.jpg" width="1800" height="1200" alt="Blend Color Burn">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Color Burn</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-hard-light" src="images/dark.jpg" width="1800" height="1200" alt="Blend Hard Light">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Hard Light</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-soft-light" src="images/dark.jpg" width="1800" height="1200" alt="Blend Soft Light">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Soft Light</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-difference" src="images/dark.jpg" width="1800" height="1200" alt="Blend Difference">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Difference</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-exclusion" src="images/dark.jpg" width="1800" height="1200" alt="Blend Exclusion">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Exclusion</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-hue" src="images/dark.jpg" width="1800" height="1200" alt="Blend Hue">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Hue</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-saturation" src="images/dark.jpg" width="1800" height="1200" alt="Blend Saturation">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Saturation</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-color" src="images/dark.jpg" width="1800" height="1200" alt="Blend Color">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Color</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-luminosity" src="images/dark.jpg" width="1800" height="1200" alt="Blend Luminosity">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Luminosity</p>
            </div>
        </div>
    </div>
</div>

變形中心

若要將元素置中於自身，請加入 uk-transform-center 類別。這對於絕對定位特別有用。

<div class="uk-inline">
    <img src="images/light.jpg" width="1800" height="1200" alt="">
    <a class="uk-position-absolute uk-transform-center" style="left: 50%; top: 50%" href="#" uk-marker></a>
</div>

變形原點

若要修改動畫的原點，如縮放，請加入 uk-transform-origin-* 類別之一。這可以與 動畫元件 結合使用。

類別 說明
.uk-transform-origin-top-left 過渡效果從左上方開始。
.uk-transform-origin-top-center 過渡效果從頂部開始。
.uk-transform-origin-top-right 過渡效果從右上方開始。
.uk-transform-origin-center-left 過渡效果從左側開始。
.uk-transform-origin-center-right 過渡效果從右側開始。
.uk-transform-origin-bottom-left 過渡效果從左下方開始。
.uk-transform-origin-bottom-center 過渡效果從底部開始。
.uk-transform-origin-bottom-right 過渡效果從右下方開始。 
<div class="uk-transform-origin-bottom-right uk-animation-scale-up"></div>

右下

頂部中心

底部中心

<div class="uk-child-width-1-3@m" uk-grid>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-transform-origin-bottom-right uk-card uk-card-default uk-card-body uk-animation-scale-up">
            <p class="uk-text-center">Bottom Right</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-transform-origin-top-center uk-card uk-card-default uk-card-body uk-animation-scale-up">
            <p class="uk-text-center">Top Center</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-transform-origin-bottom-center uk-card uk-card-default uk-card-body uk-animation-scale-up">
            <p class="uk-text-center">Bottom Center</p>
        </div>
    </div>
</div>

已停用

若要停用任何元素的點擊行為，如 <a>、<button> 或 <iframe> 元素，請加入 .uk-disabled 類別。

已停用
<a class="uk-disabled uk-button uk-button-default" href="#">Disabled</a>

拖曳

若要將移動游標套用到正在被拖曳的元素，請加入 .uk-drag 類別。

<div class="uk-drag"></div>
<div class="uk-drag uk-width-small uk-padding uk-background-muted uk-text-center">
    <i uk-icon="icon: move; ratio: 2"></i>
</div>

若要在拖曳檔案到 上傳區域 時建立陰影效果，請加入 .uk-dragover 類別。