實用工具

面板

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.

可捲動面板

自動溢出

表格標題 表格標題 表格標題 表格標題 表格標題 表格標題
表格資料 表格資料 表格資料 表格資料 表格資料 表格資料
表格資料 表格資料 表格資料 表格資料 表格資料 表格資料
表格資料 表格資料 表格資料 表格資料 表格資料 表格資料
表格頁尾 表格頁尾 表格頁尾 表格頁尾 表格頁尾 表格頁尾

可捲動 Pre

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

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

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

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

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

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

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

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

自動溢出 JS

自動溢出容器前的一些內容。

自動溢出容器後的一些內容。

自動溢出容器前的一些內容。

自動溢出容器後的一些內容。

JavaScript 選項

選項 預設 描述
sel-container CSS 選擇器 .uk-modal 提供高度的容器元素。
sel-content CSS 選擇器 .uk-modal-dialog 包裹內部內容以提供其高度的元素。

響應式物件

JS 響應式寬度 (Iframe)

響應式高度 (圖片)

物件適配和位置

物件適配覆蓋

物件適配包含

物件適配覆蓋左側

陰影

滑鼠懸停
特大

底部陰影

首字放大

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.

Torem 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

標誌

圖片
-

圖片 (picture 標籤)
-

圖片
反向圖片

圖片 (picture 標籤)
反向圖片 (picture 標籤)

圖片 (picture 標籤)
反向 SVG

SVG
反向圖片 (picture 標籤)

SVG
反向 SVG