跳至主要內容

文件

安裝

了解從哪裡下載以及如何編譯 UIkit 來源。

下載

您有以下選項可以取得 UIkit

所有 UIkit 版本的編譯檔案也託管在 jsDelivr 內容傳遞網路，網址為 jsdelivr.com。

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@[uikit-version]/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@[uikit-version]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@[uikit-version]/dist/js/uikit-icons.min.js"></script>

注意最新的 子資源完整性 (SRI) 雜湊值可以透過 jsDelivr 取得。

來源的檔案結構

GitHub 專案包含所有原始檔，這些原始檔會編譯到 dist 資料夾中。Less 來源會編譯為 CSS 檔案，JavaScript 來源會被捆綁並轉換為 ECMAScript 5，而圖示則會被捆綁到圖示庫中。

資料夾 描述
/src 包含所有 Less、JavaScript 和圖片來源。
/dist 包含已編譯的 CSS 和 JS，每次發佈時都會更新。
/tests 包含所有元件的 HTML 測試檔案。

從 GitHub 來源編譯

若要自行編譯 UIkit，您可以使用內含的建置腳本。

# Run once to install all dependencies
pnpm install

# Compile all source files
pnpm compile

# Watch files and compile automatically every time a file changes
pnpm watch

編譯後的 dist 資料夾現在包含預設情況下未簽入的其他檔案。如果您已新增自訂 UIkit 主題，建置工作將會建立更多其他檔案。

/dist/css

    <!-- UIkit's CSS -->
    uikit.css
    uikit.min.css

    <!-- UIkit's core styles, without the default theme -->
    uikit-core.css
    uikit-core.min.css

    <!-- UIkit's CSS in a right-to-left version -->
    uikit.rtl.css
    uikit.rtl.min.css


/dist/js

    <!-- UIkit's JavaScript -->
    uikit.js
    uikit.min.js

    <!-- Stripped down JavaScript. Core functionality without additional components -->
    uikit-core.js
    uikit-core.min.js

    <!-- Icon Library -->
    uikit-icons.js
    uikit-icons.min.js

    <!-- Additional components (e.g. Lightbox), only needed when including uikit-core.js -->
    /components

若要使用 UIkit 的 CSS 和 JavaScript，請將 檔案包含在您自己的 HTML 中，然後建立此文件中列出的元件標記。

若要在每次變更 Less 或 JavaScript 檔案時自動編譯 UIkit，您可以使用內含的建置腳本。

pnpm watch