開始使用 · UIkit 中文文檔

# 開始使用熟悉 UIkit 的基本組織結構。注意文檔中的示例代碼不具備可操作性，請隨時右鍵查看源代碼，以參考實例真實代碼。 UIkit 兼容 IE9 以上現代瀏覽器。在 IE8 及其以下版本中，所有JavaScript 都會失效。首先，你需要下載 UIkit。在 [GitHub](https://github.com/uikit/uikit) 上，你可以找到整個項目的所有源文件。 [下載 UIkit](../download/uikit-2.25.0.zip) [下載離線文檔](../download/uikit-doc-2.25.0.zip) * * * ## 文件結構在你下載的 ZIP 壓縮包中，你可以找到準備在你的項目中使用的所有的CSS、JavaScript和字體文件。UIKit 的核心框架`uikit.css` 或 `uikit.min.css`幾乎沒有任何樣式，這樣做是為了保持它的苗條。因此我們提供兩個額外的風格樣式，一個漸變樣式和一個扁平化樣式。每個風格樣式提供單獨的CSS文件以及壓縮后的版本。 | 文件夾 | 描述 | | --- | --- | | `/css` | 包含 UIkit 所有的CSS文件和壓縮后的版本。 | | `/fonts` | 包含 UIKit 中使用的字體文件。 | | `/js` | 包含 UIkit 所有的JavaScript文件和壓縮后的版本。 | ``` /css  uikit.css uikit.min.css  uikit.gradient.css uikit.gradient.min.css  uikit.almost-flat.css uikit.almost-flat.min.css  /components /fonts  fontawesome-webfont.eot fontawesome-webfont.ttf fontawesome-webfont.woff FontAwesome.otf /js  uikit.js uikit.min.js  /components  /core ``` * * * ## HTML頁面代碼首先，確保你有一個可靠的代碼編輯器，比如 [Sublime Text 2](http://www.sublimetext.com/2)。你需要在你的HTML5的文檔頭部添加編譯后的UIKit CSS和JavaScript文件，最好是壓縮后的版本。別忘了添加 [jQuery](http://jquery.com/)。就是這樣！ ### Example ``` <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="uikit.min.css" /> <script src="jquery.js"></script> <script src="uikit.min.js"></script> </head> <body> </body> </html> ``` 如果你已經完成了在網頁中添加 UIkit，那就看一下 [UIkit 組件](core.html) 并從中獲取相關介紹吧。 * * * ## UIkit on BootCDN 所有版本的 UIkit 都被托管在 BootCDN 上，就是 Bootstrap 中文網那個 BootCDN 。在這里可以找到 UIkit ： [www.bootcdn.cn](http://www.bootcdn.cn/uikit/) 。 ### Example ``` <link rel="stylesheet" href="//cdn.bootcss.com/uikit/2.25.0/css/uikit.css" /> <script src="//cdn.bootcss.com/uikit/2.25.0/js/uikit.js"></script> ``` * * * ## IDE 上的 UIkit 自動完成為了更高效地工作，我們建議你為你喜歡的 IDE 或代碼編輯器安裝一個自動完成插件。這樣可以節省很多時間，因為你不必查找再輸入所有UIkit的class 和 HTML 標記。 * [Sublime 上的自動完成](https://sublime.wbond.net/packages/UIkit%20autocomplete) - 通過 Sublime 的 Package Control 來安裝。 * [PHPstorm 上的自動完成](https://plugins.jetbrains.com/plugin/7791?pr=) - 通過 PHPsorm 的插件設置進行安裝。 * [Atom 上的自動完成](https://atom.io/packages/atom-uikit) - 在 Atom 的 package manager 里尋找它。