\hUIkit中文文檔目錄TOC\h\h開始使用\h開發(fā)者\h項目結(jié)構(gòu)\hLess&Sass文件\h創(chuàng)建主題\h創(chuàng)建樣式\hCustomizer.json\hJavaScript\h自定義前綴\h核心組件\h默認\h基礎(chǔ)\h打印\h布局類組件\h網(wǎng)格\h面板/Panel\h塊/Block\h文章\h評論/Comment\h效果/Utility\hFlex布局\h覆蓋/Cover\h導(dǎo)航類組件\h導(dǎo)航菜單\h導(dǎo)航欄\h二級導(dǎo)航\h面包屑/Breadcrumb\h分頁\h選項卡\h縮略圖導(dǎo)航/Thumbnav\h頁面元素\h列表\h描述列表\h表格\h表單\h常用組件\h按鈕\h圖標(biāo)\h關(guān)閉/Close\h徽章/Badge\h提示框\h縮略圖/Thumbnail\h遮罩/Overlay\h文本\h列\(zhòng)h動畫\h對比度/Contrast\hJAVASCRIPT組件\h下拉菜單\h模態(tài)對話框\h抽屜/Off-canvas\h切換器/Switcher\h撥動/toggle\h滾動監(jiān)聽/Scrollspy\h平滑滾動\h附加組件\h布局類組件\h動態(tài)網(wǎng)格\h視差網(wǎng)格\h導(dǎo)航類組件\h圓點導(dǎo)航\h滑動導(dǎo)航/Slidenav\h動態(tài)分頁\h常用組件\h高級表單\h文件表單/Formfile\h密碼表單\h選擇表單\h占位符\h進度條/Progress\hJAVASCRIPT組件\h燈箱/Lightbox\h自動完成/Autocomplete\h日期選擇器/Datepicker\hHTML編輯器\h滾動條/Slider\h滑塊集/Slideset\h幻燈片/Slideshow\h視差/Parallax\h手風(fēng)琴/Accordion\h通知/Notify\h搜索/Search\h可嵌套/Nestable\h可排序/Sortable\h附著/Sticky\h時間選擇器\h工具提示/Tooltip\h上傳開始使用6UIkit中文文檔開發(fā)者開發(fā)者7UIkit中文文檔項目結(jié)構(gòu)深入挖掘UIkit的核心，了解關(guān)于它的一切。GitHubUIkit被托管在\hGitHub上，基于\hMIT許可協(xié)議。歡迎使用它應(yīng)用于個人或商業(yè)項目。想要獲取UIKit所有的源文件，只需克隆\hGitHub上的資源庫，或者直接下載最新的版本。\h下載源代碼文件結(jié)構(gòu)UIkit基\h于LESS創(chuàng)建，LESS是一款CSS預(yù)處理器，將CSS賦予了動態(tài)語言的特性，如變量，繼承，運算，函數(shù)等。它將寫入LESS中的代碼編譯成為CSS。它將寫在Less里的代碼編譯成CSS。UIkit主要的文件結(jié)構(gòu)如下：文件夾描述/docs包含你正在看的UIkit文檔的絕大多數(shù)文件/src包含全部Less和JavaScript組件文件/tests包含所有組件的測試文件/themes在子文件夾中包含的所有額外提供的主題文件。/vendor包含UIkit所使用的jQuery和其他的外部庫。所有編譯版和壓縮版CSS文件、JS文件，以及Less和Sass文件都能在獨立的\hBowerUIkitrepository項目中找到。查看Less和Sass文件獲取更多信息。自動地預(yù)處理為了自動化處理Less文件編譯成為CSS的過程，我們使用\hGulp，一款基于\hNode.js的前端構(gòu)建工具，它監(jiān)控你的工作目錄。無論何時，只要你保存了有修改行為的源文件，Gulp都會自動地將所有文件編譯成獨立的CSS文件。首先，你需要安裝Node，并設(shè)置gulp作為一個全局的安裝。最后，切換到UIkit目錄，安裝Node依賴模塊（Nodedependencies）。項目結(jié)構(gòu)8UIkit中文文檔npminstall-ggulpcduikitnpminstall現(xiàn)在，你可以運行Gulp來創(chuàng)建和修改版本。UIkit的內(nèi)置版本被放在/dist目錄中。通過主題名稱參數(shù)來只創(chuàng)建一個指定的主題。gulp[-tthemename]你也可以設(shè)置Gulp監(jiān)控你的工作目錄，這樣它便能在你每次保存時，自動地編譯文件。通過主題名稱參數(shù)來監(jiān)控一個指定的主題以提升建設(shè)進度。gulpwatch[-tthemename]加載新的主題和樣式到定制工具中。gulpindexthemes測試UIkit為每個組件提供測試文件。其中每個頁面都包含了組件的測試示例，并為你提供了一個關(guān)于盒模型所支持的所有可能性的總覽。UIkit使用\hBrowserSync加速你的工作流程。運行g(shù)ulpsync，你就能在制作自己的主題或者修改現(xiàn)有主題時，即時地查看改動，這不只是在瀏覽器中，還支持跨設(shè)備。你能在測試中切換所有的組件和主題，甚至切換到RTL模式（從右到左）前往測試項目結(jié)構(gòu)9UIkit中文文檔Less&Sass文件一個涵蓋包括LESS和Sass在內(nèi)所有分發(fā)文件的獨立UIkitBower倉庫。UIkit的偉大之處在于，你可以很輕松地將它的源文件集成到你的項目中，并能保障在你的自定義工作流能使用你最喜愛的CSS預(yù)處理器來構(gòu)建資源（assets）。UIkit使用\hBower包管理器來加載資源（assets）。因此UIkit自動生成分發(fā)文件到獨立的\hBowerUIkitrepository。它包含所有來自UIkit及其組件的CSS、Less、SCSS和Javascript文件。獲取最新的UIkit分發(fā)文件1.安裝\hBower:bowerinstalluikit2.或者，從\hGithub獲取包。你會發(fā)現(xiàn)Less和Sass文件都存在，在它們各自獨立的文件夾中：/uikitless/uikit.less...scss/uikit-mixins.scssuikit.scss...在你的項目中嵌入Less使用Less是真的直截了當(dāng)。只需在Less文件的頂部引入UIkit及其附加組件，然后利用UIkit的鉤子和覆寫UIkit變量，就能開始定制了。Example@import"uikit/less/uikit.less";@import"uikit/less/components/autocomplete.less";//yourcustomcodegoeshere,e.g.mixins,variables在你的項目中嵌入SassLess&Sass文件10UIkit中文文檔由于Sass解析代碼的原因，它需要首先引入uikit-mixins.scss，然后添加自定義項（鉤子、變量等），最后再加入UIkit和附加組件的文件。Example@import"uikit/scss/uikit-mixins.scss";//此處填入你的代碼，比如：mixins,variables@import"uikit/scss/uikit.scss";@import"uikit/scss/components/autocomplete.scss";Less&Sass文件11UIkit中文文檔創(chuàng)建主題擴展UIkit并添加你自己的獨一無二的主題。如何開始默認地，UIkit帶有一個非常基礎(chǔ)的主題。如果要修改它的樣式，你不需要編輯任何核心框架文件。相反，你可以通過創(chuàng)建一個自定義主題來擴展UIKit。這樣便允許你輕松地更新UIkit的核心文件。我們甚至提供了一些靈巧的主題以幫助你入門。要創(chuàng)\h建自己的主題，請按照下面步驟操作：（這里有一篇文章可以參考下：uikit框架開\h發(fā)前期配置及定制主題方法）1.創(chuàng)建主題目錄下載或克隆UIKit，安裝Node和Gulp。最后，在這里創(chuàng)建你的主題文件夾/custom/THEME-NAME。如果/custom不存在，那就創(chuàng)建它！注意/custom文件夾設(shè)置為gitignore，這樣可以防止你的自定義文件被推入到UIKit庫中。如果你在使用克隆版UIkit'sgit倉庫，它將是一次很好的將/custom作為你自己的git倉庫的實踐。這樣，你的主題文件的版本控制將不會受到UIkit文件的干擾。2.添加你的主題在/custom/THEME-NAME文件夾中創(chuàng)建uikit.less文件，并添加@import"../../src/uikit.less";規(guī)則來訪問核心框架中的所有Less文件并采用它的基礎(chǔ)樣式。好了，你可以從零開始添加你自己的主題了。注意為了能立即開始你的工作，我們提供了默認、漸變和扁平三個主題。所有默認文件都已經(jīng)引入了，你同樣可以找到所有主題文件以及與它們相關(guān)的鉤子。所以你需要做的是復(fù)制文件夾到/custom目錄中，并重命名。3.定制和測試在你的UIkit文件夾中運行g(shù)ulp的indexthemes指令?，F(xiàn)在，剛剛新建的主題就將會自動出現(xiàn)在定制工具和測試文件中。4.構(gòu)建你的主題你可以在定制工具中生成你的主題的CSS。如果你想使用gulp指令來做這事，運行g(shù)ulpdist-tTHEME-NAME就行了。生成的文件被放置在dist/文件夾中。創(chuàng)建主題12UIkit中文文檔最佳主題實踐設(shè)計你的主題有多種不同的方法，我們推薦以下的工作流程。1.使用變量首先要做的是自定義已聲明的變量的值。你可以在核心框架的Less文件中找到所有組件的變量，在你的主題中重寫它們。Example/src/core/button/button.less//默認值@button-height:30px;/custom/THEME-NAME/button.less//新的值@button-height:35px;2.使用鉤子為了防止架空選擇器，我們使用\hLess的混合（Mixins）方法與UIkit源碼中預(yù)定義的選擇器進行掛鉤，并運用其附加屬性。選擇器不必在所有文件中重復(fù)填寫，全局的修改變得更容易了。Example/src/core/panel/panel.less//CSS規(guī)則.uk-panel{background:@background;//mixin混合增加新的聲明.hook-panel;}/custom/THEME-NAME/panel.less創(chuàng)建主題13UIkit中文文檔//mixin混合增加新的聲明.hook-panel(){color:#fff;}3.混雜的鉤子/Miscellaneoushooks如果沒有變量也沒有鉤子可用，當(dāng)然你也可以自行創(chuàng)建一個你自己的選擇器。為此，請使用.hook-panel-misc鉤子并將你的選擇器寫入其中。這樣將會把你的新選擇器整合到編譯后的CSS文件的合適位置。Example/custom/THEME-NAME/panel.less//miscmixin.hook-panel-misc(){//新的規(guī)則.uk-panela{color:#f00;}}創(chuàng)建主題14UIkit中文文檔創(chuàng)建樣式拓展UIkit并新建屬于你的獨一無二的樣式。僅僅通過一組變量就可以改變現(xiàn)有主題的外觀。你可以為每個主題創(chuàng)造無限種的樣式。要創(chuàng)建你自己的樣式，請按照下列步驟操作：1.創(chuàng)建樣式目錄在這里創(chuàng)建你的樣式文件夾/custom/THEME-NAME/styles/STYLE-NAME2.添加你的樣式在/custom/THEME-NAME/styles/STYLE-NAME文件夾中創(chuàng)建一個空白的style.less文件?，F(xiàn)在你可以手動添加新的變量聲明或者使用定制工具。當(dāng)你完成時，點擊GetLess按鈕保存在你的樣式文件到你的樣式到文件夾中。3.定制和測試在UIkit目錄中運行g(shù)ulptaskindexthemes使你剛才創(chuàng)建的樣式可以在定制工具和測試頁面中可見。4.持續(xù)定制現(xiàn)在，你可以繼續(xù)自定義你的樣式了。創(chuàng)建樣式15UIkit中文文檔Customizer.json這個文件用于定義你的主題外觀中的控件數(shù)量。每個主題都有其特定的customizer.json。它定義了哪些變量是默認顯示的，哪些變量僅在高級模式中顯示。這個文件分為controls和groups兩部分。Controls/控件控件（controls）用于定義如何在定制工具中顯示變量。默認情況下，所有的變量都顯示在輸入框（input）元素中。你可以使用以下類型（type）來改變默認的輸入框。Type描述"type":"color"將含有色彩數(shù)值的輸入框轉(zhuǎn)變?yōu)橐子玫纳蔬x擇器。"type":"select"使用這種類型得到一個選擇框，替代輸入框。將會轉(zhuǎn)變成帶類似url的附加選項的選擇框或選擇框"type":"font"組。Variables/變量選擇了輸入框的類型后，你還須定義哪些變量會相互影響。你可以使用特定的單個變量或者使用通配符*來選擇一組，而不是一個一個地單獨設(shè)置每個變量。特定變量只影響@global-border和@global-light-border。{"vars":["@global-border","@global-light-border"]}通配符變量影響所有以-color和-background結(jié)尾的變量。Customizer.json16UIkit中文文檔{"vars":["*-color","*-background"]}顏色選擇器通過設(shè)置"type":"color"將下面的示例中所有以-color或-background結(jié)尾的變量變成一個簡單易用的顏色選擇器，需要注意的是變量的值必須是一個顏色值。Example{"controls":[{"type":"color","vars":["*-color","*-background"]}]}選擇元素如果一個變量只能使用特定的值，你可以通過使用"type":"select"輕松地將輸入元素變成一個選擇元素，并加入可選擇的選項。Example{"controls":[{"type":"select","vars":["*-weight"],"options":[{"name":"Normal","value":"normal"},{"name":"Bold","value":"bold"}]}]}Customizer.json17UIkit中文文檔字體當(dāng)涉及到字體時，你可以使用上面介紹的“選擇元素”方法或通過設(shè)置"type":"font"來創(chuàng)建一個字體選擇框，你可以添加一些值，比如一個字體url或者將你的字體分成幾組。Example{"controls":[{"type":"font","vars":["*-font-family"],"options":{"SystemFonts":[{"name":"Arial","value":"\"HelveticaNeue\",Helvetica,Arial,sans-serif"},{"name":"Consolas","value":"Consolas,monospace,serif"}],"GoogleFonts":[{"name":"Abel","value":"'Abel'","url":"/css?family=Abel"},{"name":"Asul","value":"'Asul'","url":"/css?family=Asul"},}}]}Groups/組組（groups）定義了哪些變量應(yīng)該顯示在定制器的側(cè)邊欄中。你可以把一些相關(guān)的變量組合到一起放在一個組中，顯示在一個標(biāo)題下，或者在AdvancedMode(高級模式)中顯示。Example這兩個變量的設(shè)置將被默認顯示在定制器的側(cè)邊欄中。Customizer.json18UIkit中文文檔{"groups":[{"label":"Backgrounds","vars":["@global-background","@global-dark-background"]}]}在高級模式中顯示導(dǎo)航欄組件的所有變量。{"groups":[{"label":"Navbar","advanced":true,"vars":["@navbar-*"]},]}Customizer.json19UIkit中文文檔JavaScript使用data屬性，將JavaScript應(yīng)用于UIkit的組件。你只需要在HTML元素中添加data-uk-*屬性就能使用所有的UIKIT組件，而無需無需編寫一行JavaScript。這是在UIkit中使用任意組件時應(yīng)當(dāng)首先考慮的最佳做法。Markup<buttondata-uk-button>MyButton</button>當(dāng)然你仍然可以通過使用JQuery的API來使用這些組件。Markup$(".button").uk("button");AMD支持AMD(異步模塊定義)是一種定義JavaScript模塊以及模塊之間的依賴性的方式，因此他們可以通過異步加載的方式來使用。用法/*UIkit核心的簡單請求*/require("path/to/uikit.js",function(UI){//UI是UIkit的全局對象，又名$.UIkit});自動加載UIkit及附加組件JavaScript20UIkit中文文檔/*首先建立require.js*/requirejs.config({paths:{"uikit":'path/to/uikit.js'},config:{"uikit":{"base":"path/to/uikit_dist_folder"}}});/*現(xiàn)在，你可以自動加載UIkit和附加組件了，用逗號隔開。*/require("uikit!notify,sortable",function(UI){//訪問已加載的附加組件:UI.notify,UI.sortable});覆寫默認的組件設(shè)置調(diào)整默認的組件設(shè)置是可行的，你可以看一下下面的例子：用法//覆寫默認的工具提示設(shè)置UIkit.on('beforeready.uk.dom',function(){$.extend(UItotype.defaults,{pos:'top',delay:500,animation:true});});監(jiān)視DOM，通過諸如AJAX的方式自動初始化新添加的組件。JavaScript21UIkit中文文檔如果你希望通過JavaScript動態(tài)地將HTML標(biāo)簽注入到DOM中，只需要添加data-uk-observe屬性到一個父元素中，就能自動地初始化UIkit的JavaScript組件。用法<divdata-uk-observe><!--在此注入你的動態(tài)HTML--></div>通過JavaScript監(jiān)視元素UIkit.domObserve('#element',function(element){/*適用于元素內(nèi)部的DOM改變*/})基于可見性變化，檢測顯示事件/CheckDisplayeventonvisibilitychange.有時，一些組件，比如網(wǎng)格或選項卡被隱藏在標(biāo)簽中。這或許是與切換器,模態(tài)對話框或者下拉菜單組合使用是發(fā)生的。一旦它們變得可見，他們需要被重新計算修改高度或者其他外形尺寸。為此，添加data-uk-check-display屬性到需要重新處理的元素中?，F(xiàn)在，它們監(jiān)聽由容器組件觸發(fā)的display.uk.check事件，比如切換器。帶有data-uk-margin,data-uk-grid-margin和data-uk-grid-match屬性的元素不需要添加這個屬性，因為它此時是默認觸發(fā)的。Usage<!--一個位于模態(tài)對話框、切換器或者下拉菜單中的元素--><divid="myelement"data-uk-check-display>...</div><script>$("#myelement").on('display.uk.check',function(){//自定義的代碼，用于調(diào)整顯示的高度等});</script>JavaScript22UIkit中文文檔自定義前綴創(chuàng)建自定義前綴的UIkit構(gòu)建，是為了在同時使用多個版本的UIkit時，避免出現(xiàn)沖突。隨著我們不斷地發(fā)行新版的UIkit，當(dāng)越來越多使用UIkit構(gòu)建的主題和擴展被加載到同一個頁面上時，一些組件或者class會被改變或失效。當(dāng)class在兩個版本上作用不一樣時，這可能引起沖突。這就是為什么你可以自定義UIkit的前綴。這基本上會用你設(shè)置的前綴來取代通常的uk-。通過Less設(shè)置前綴如果你不熟悉gulp的用法，查看自動預(yù)處理了解如何創(chuàng)建一個UIkit構(gòu)建。創(chuàng)建自定義前綴的UIkit版本，只需要在-p中使用你自己的前綴參數(shù)，即可使所有的class和JavaScript文件變成自定義前綴。gulp-pmyprefix運行g(shù)ulp后，你將在dist文件夾中找到你的自定義前綴構(gòu)建。比如：.myprefix-grid{...}...JavaScript的無沖突模式為了防止多個版本的自定義UIkit發(fā)生沖突，主需要在包含UIkit之后調(diào)用noConflict方法:varmyUIkit=UIkit.noConflict();自定義前綴23UIkit中文文檔核心組件來源：\h核心組件UIkit全部組件一覽。UIKit提供了超過30個模塊化并可擴展的組件，它們可以組合使用。根據(jù)用途及功能，我們把組件分了為不同的類型。默認這些組件通常用來實現(xiàn)HTML元素的跨瀏覽器標(biāo)準化功能，并添加了一些非?；A(chǔ)的樣式。布局充分運用我們完全響應(yīng)式的流體網(wǎng)格系統(tǒng)和面板，常見的布局組成部分如博客文章和評論以及其他一些實用的效果類型。導(dǎo)航UIKit提供了不同形式的導(dǎo)航組件，如導(dǎo)航欄和側(cè)導(dǎo)航。使用面包屑或通過一個分頁來翻閱文章。元素基本的HTML元素樣式，如表格和表單。這些組件使用自有的類。它們不會因想到任何默認的元素樣式。常用在這里你可以找到一些經(jīng)常在內(nèi)容中使用的組件，比如按鈕，徽章，這種，動畫和其他很多的組件。JavaScript這些組件主要依賴于JavaScript的淡出顯示與隱藏內(nèi)容，比如下拉菜單，模態(tài)對話框，抽屜和提示組件等。核心組件24UIkit中文文檔斷點UIkit包含一系列為各種不同的視圖寬度實現(xiàn)響應(yīng)式內(nèi)容的類。下面的表格提供了一個關(guān)于一些可用的視圖斷點以及相應(yīng)的設(shè)備概述。你可以通過定制器來調(diào)整所有的斷點。大小斷點設(shè)備Mini小于479px手機縱向Small480px到767px手機橫向Medium768px到959px平板電腦縱向Large960px到1199px臺式機或平板電腦橫向Xlarge1200px或以上大屏幕設(shè)備CSS架構(gòu)為了避免與其他CSS框架沖突，所有的UIKit類均以uk-作為前綴進行命名。組件分為組件本身、子對象和調(diào)節(jié)器，其類名通常沿用組件名。定義對概述象組理論上一個網(wǎng)站經(jīng)常用到一部分基于類的組件模塊，比如按鈕。這些都件可重復(fù)使用和相互組合。子子對象都被放置在一個組件中用來增強其功能性，比如一個在提示框中對的關(guān)閉按鈕。象修修飾類class用來調(diào)整修改組件及其子對象的樣式，比如按鈕的顏色和飾大小。核心組件25UIkit中文文檔默認默認26UIkit中文文檔基礎(chǔ)提供所有HTML元素的默認樣式。這個組件定義了你的網(wǎng)頁的基礎(chǔ)視覺效果。通過為每個HTML元素設(shè)置默認的色彩、間距、字體尺寸和其他屬性實現(xiàn)強大的版面效果。本頁是一個關(guān)于如何使用基礎(chǔ)HTML元素和UIkit如何對它們進行風(fēng)格化的簡要向?qū)АＷ⒁釻Ikit基本上利用了有名的\hNormalize.css，但將它分散在了所有組件。只有必要的部分被采納到基礎(chǔ)組件中，以保證未預(yù)設(shè)的CSS樣式盡可能的少。大部分關(guān)于CSS標(biāo)準化的代碼被移入了表單,按鈕和表格這些組件中。這樣使得UIkit及其組件在與其他競爭中顯得很厲害的樣子，所以你不必擔(dān)心你的項目在不同的瀏覽器中的一致性問題。標(biāo)題使用<h1>到<h6>標(biāo)簽來定義你的標(biāo)題。Example你可以添加.uk-h1，.uk-h2，.uk-h3，.uk-h4，.uk-h5或.uk-h6類來改變你的標(biāo)題的大小，比如讓h1看起來像一個h3。段落基礎(chǔ)27UIkit中文文檔通過可以自定義設(shè)置的變量，可對全局的字體大小、行間距、邊距等常規(guī)元素進行調(diào)整。段落和其他塊元素也繼承這些變量值。文本級語義下面的列表為你提供了最常用的文本層次語義，以及如何利用它們的簡短概述。標(biāo)簽描述<a>將文本轉(zhuǎn)換為超文本使用\ha標(biāo)簽。<em>強調(diào)文本使用em標(biāo)簽。<strong>強調(diào)任何額外的更重要文本使用strong標(biāo)簽。<code>定義內(nèi)聯(lián)代碼片段使用code標(biāo)簽。<del>標(biāo)記文檔中已被修改或刪除的文本使用del標(biāo)簽。<ins>標(biāo)記文檔中插入的文本使用<ins>ins標(biāo)簽</ins>。高亮顯示文本使用<mark>mark標(biāo)簽</mark>，它沒有<mark>任何語義含義。定義引入的語錄在<q>q標(biāo)簽<q>里面使用</q>q標(biāo)簽<q></q>。定義一個標(biāo)題的縮寫使用<abbrtitle="Abbreviation<abbr>Element">abbr標(biāo)簽</abbr>。定義一個項目術(shù)語名稱使用<dfntitle="Definesa<dfn>definitionterm">dfn標(biāo)簽</dfn>?？s小顯示不重要的文本使用<small>small標(biāo)簽<small></small>。水平線使用<hr>標(biāo)簽創(chuàng)建一條水平線。Example基礎(chǔ)28UIkit中文文檔引用文字在文檔中從其他來源引用多行內(nèi)容時，使用<blockquote>標(biāo)簽。ExampleMarkup<blockquote><p>Quotation</p><small>Source</small></blockquote>代碼塊對于多行代碼，使用<pre>元素定義預(yù)格式化文本。它能創(chuàng)建提供保留空格、制表符和換行符的新文本塊。內(nèi)部嵌套<code>標(biāo)簽來定義代碼塊。重要為保證正確地渲染，必須確保避開代碼中的任何尖括號。Example<pre><code>...</code></pre>注意你也可以添加效果組件中介紹到的.uk-scrollable-text類,這將設(shè)置最大高度為300px，并提供Y軸滾動條。列表基礎(chǔ)29UIkit中文文檔創(chuàng)建一個無序列表使用<ul>標(biāo)簽或使用<ol>標(biāo)簽創(chuàng)建有序列表。<li>元素定義列表項。ExampleMarkup<ul><li>...</li><li>...<ul><li>...</li></ul></li></ul><ol><li>...</li><li>...<ol><li>...</li></ol></li></ol>描述列表創(chuàng)建一個描述列表需要使用<dl>標(biāo)簽。使用<dt>定義項目，使用<dd>定義描述內(nèi)容。Example基礎(chǔ)30UIkit中文文檔Markup<dl><dt>...</dt><dd>...</dd></dl>響應(yīng)式圖片UIKit中的所有圖片默認都是響應(yīng)的。如果布局變窄，圖片會調(diào)整它們的大小并保持自身的比例。Example注意若要避免響應(yīng)式行為并保持圖像的原始尺寸，可以為單獨的圖片添加.uk-img-preserve類。如果你具有多張圖片，也可以將這個類添加到父容器中。谷歌地圖不需要這樣的設(shè)置。基礎(chǔ)31UIkit中文文檔打印優(yōu)化您的頁面用于經(jīng)濟的打印。這個組件基于\hHTML5Boilerplate的打印樣式。它將去掉頁面的背景顏色并改變字體顏色為黑色以節(jié)省打印機墨水。圖片將被按比例縮小以適合頁面，并且錨文本將帶下劃線以區(qū)別于常規(guī)文本。修改對于UIkit，我們移除了鏈接的href及title相關(guān)的規(guī)則。打印32UIkit中文文檔布局類組件布局類組件33UIkit中文文檔網(wǎng)格創(chuàng)建一個完全響應(yīng)式并可以嵌套的流動網(wǎng)格布局。UIKit中的網(wǎng)格系統(tǒng)遵循移動優(yōu)先的方式并且最多可容納10個網(wǎng)格列。它使用網(wǎng)格內(nèi)預(yù)定義的類對每個單元格的列寬進行了定義。另外，還可以把網(wǎng)格與Flex組件中的類組合使用，雖然它只能在現(xiàn)代瀏覽器中正常運行。用法向一個父元素添加.uk-grid類來創(chuàng)建網(wǎng)格容器。對子元素添加一個.uk-width-*類來限定單元格的寬度。網(wǎng)格支持1、2、3、4、5、6和10個單元劃分。下面的列表為你提供了可以應(yīng)用到單元的uk-width-*類的概述。Class描述.uk-width-1-1填滿可見寬度的100％。.uk-width-1-2把網(wǎng)格等分為兩半。.uk-width-1-3to.uk-width-2-3將網(wǎng)格劃分成三分之一。.uk-width-1-4to.uk-width-3-4將網(wǎng)格劃分成四分之一。.uk-width-1-5to.uk-width-4-5將網(wǎng)格劃分成五分之一。.uk-width-1-6to.uk-width-5-6將網(wǎng)格劃分成六分之一。.uk-width-1-10to.uk-width-9-10將網(wǎng)格劃分成十分之一。我們特意為每組單元建立了一種冗余，所以在實際應(yīng)用時，.uk-width-5-10類與.uk-width-1-2類的實際效果都是一樣的。Example仔細看看下面網(wǎng)格的例子，這可以使你了解所有.uk-width-*類的基本使用方法。網(wǎng)格34UIkit中文文檔注意網(wǎng)格并沒有相關(guān)聯(lián)的CSS樣式。在示例中，我們使用了面板組件。Markup下面是關(guān)于如何使用默認的兩列網(wǎng)格代碼簡單示例：<divclass="uk-grid"><divclass="uk-width-1-2">...</div><divclass="uk-width-1-2">...</div></div>響應(yīng)式寬度UIKit中提供了一些非常有用的響應(yīng)式寬度的類?；旧纤鼈兊氖褂梅椒ň拖裢ǔ挾鹊念愐粯樱撬鼈儙в星熬Y，這樣它們只在特定的斷點來產(chǎn)生效果。這些類可以結(jié)合效果組件中的可見性類來使用。這對于調(diào)整不同尺寸設(shè)備的布局和內(nèi)容是非常重要的。Class描述.uk-width-*對于任何寬度的設(shè)備，網(wǎng)格都保持列并排。影響寬度在480px以上的設(shè)備。網(wǎng)格列將在較小的.uk-width-small-*視口中堆疊。影響寬度在768px以上的設(shè)備。網(wǎng)格列將在較小的.uk-width-medium-*視口中堆疊。影響寬度在960px以上的設(shè)備。網(wǎng)格列將在較小的.uk-width-large-*視口中堆疊。重要若要設(shè)置網(wǎng)格堆疊列上下間的邊距，只需添加data-uk-grid-margin屬性。網(wǎng)格35UIkit中文文檔Example網(wǎng)格排水溝/Gridgutter好吧，其實是網(wǎng)格之間的間隔。網(wǎng)格會自動在列之間創(chuàng)建一個水平間距，以及在連續(xù)的兩個網(wǎng)格間創(chuàng)建一個垂直方向的間隔。默認情況下，網(wǎng)格間隔在大屏幕上看起來會比較寬。Example中等排水溝/Mediumgutter在網(wǎng)格之間應(yīng)用中等的間隔，只需要添加.uk-grid-medium類。Example小點的排水溝/Smallgutter在網(wǎng)格之間應(yīng)用較小的間隔，只需要添加.uk-grid-small類。網(wǎng)格36UIkit中文文檔Example消除排水溝/Collapsegutter完全地去掉間隔，只需要添加.uk-grid-collapse類。Example網(wǎng)格的嵌套使用嵌套網(wǎng)格你可以輕松地擴展你的網(wǎng)格布局。ExampleMarkup<divclass="uk-grid"><divclass="uk-width-1-2">...</div><divclass="uk-width-1-2"><divclass="uk-grid"><divclass="uk-width-1-2">...</div><divclass="uk-width-1-2">...</div></div></div></div>居中網(wǎng)格網(wǎng)格37UIkit中文文檔添加效果組件中的.uk-container-center類來讓一個網(wǎng)格居中顯示。Example網(wǎng)格分隔線添加.uk-grid-divider類用線條分隔網(wǎng)格列。要使用水平線分隔網(wǎng)格，只需在<hr>或<div>元素添加這個類。ExampleMarkup<divclass="uk-griduk-grid-divider">...</div><hrclass="uk-grid-divider"><divclass="uk-griduk-grid-divider">...</div>注意水平分隔線不能用在含有uk-push-*類或uk-pull-*類的網(wǎng)格中。源碼排序可以更改列的顯示順序，使其在源代碼中保持一個特定的列順序。添加.uk-push-*類，向右移動列。添加.uk-pull-*類，向左移動列。這可以使你進行類似翻轉(zhuǎn)移動設(shè)備或改變窗口寬度時改變列的顯示順序。這些類還可以用于偏移列，在列之間建立額外的空隙。網(wǎng)格38UIkit中文文檔源碼排序?qū)EO和響應(yīng)式設(shè)計是非常有用的，因為在狹窄的視口中網(wǎng)格會根據(jù)標(biāo)簽的源代碼順序來顯示。注意此功能只能結(jié)合.uk-width-medium-*類來使用。ExampleMarkup<divclass="uk-grid"><divclass="uk-width-medium-1-2uk-push-1-2">...</div><divclass="uk-width-medium-1-2uk-pull-1-2">...</div></div>匹配列的高度要匹配網(wǎng)格列的高度，只需要在你的網(wǎng)格添加data-uk-grid-match屬性。如果你的網(wǎng)格包含多個row，只有同一個row中的網(wǎng)格列會被匹配。只需要使用data-uk-grid-match="{row:false}"屬性就能跨越row的隔閡來匹配網(wǎng)格列的高度。ExampleMarkup<divclass="uk-grid"data-uk-grid-match>...</div>網(wǎng)格39UIkit中文文檔注意如果網(wǎng)格列的寬度延伸到100%，它們的高度將不再匹配。這樣做是有道理的，比如說，當(dāng)它們在一個較窄的視口中堆疊時。匹配面板的高度如果想要匹配一個網(wǎng)格中多個面板的高度，只需要添加.uk-grid-match類。在使用data屬性時，必須添加{target:'.uk-panel'}選擇器。ExampleMarkup<divclass="uk-griduk-grid-match"data-uk-grid-match="{target:'.uk-panel'}"><divclass="uk-width-medium-1-3"><divclass="uk-panel">...</div></div></div>包裝多個行（row）你也可以創(chuàng)建一個網(wǎng)格，使其包含任意多個列，這些列會自動地換到下一行。只需添加data-uk-grid-margin屬性，就能創(chuàng)建網(wǎng)格行（row）之間的margin。通常這樣的布局使用了<ul>元素。Example網(wǎng)格40UIkit中文文檔注意你也可以對網(wǎng)格列的寬度進行自定義。只需添加.uk-width類，并使用內(nèi)聯(lián)樣式定義寬度。下面的例子對寬度使用了固定的像素值，對于圖片你也可以這樣做。Markup<ulclass="uk-grid"data-uk-grid-margin><!--這些元素使用百分比寬度--><liclass="uk-width-medium-1-5">...</li><liclass="uk-width-medium-3-10">...</li><!--這些元素使用像素值寬度--><liclass="uk-width"style="width:100px;">...</li><liclass="uk-width"style="width:150px;">...</li></ul>均勻的網(wǎng)格列要創(chuàng)建一個子元素的寬度都是均勻分割的網(wǎng)格，你不必為網(wǎng)格中的每個列表元素里添加同樣的類。只需要添加一個.uk-grid-width-*類到網(wǎng)格本身即可。網(wǎng)格41UIkit中文文檔Class描述.uk-grid-width-1-2將網(wǎng)格均勻分為兩份.uk-grid-width-1-3將網(wǎng)格均勻分為三份.uk-grid-width-1-4將網(wǎng)格均勻分為四份.uk-grid-width-1-5將網(wǎng)格均勻分為五份.uk-grid-width-1-6將網(wǎng)格均勻分為六份.uk-grid-width-1-10將網(wǎng)格均勻分為十份ExampleMarkup<ulclass="uk-griduk-grid-width-1-5"><li>...</li><li>...</li></ul>響應(yīng)式寬度UIkit同樣提供了網(wǎng)格的響應(yīng)式寬度類?？梢杂盟３志鶆虺叽绲木W(wǎng)格列，無論設(shè)備寬度如何。Class描述.uk-grid-width-*影響所有設(shè)備寬度.uk-grid-width-small-*影響480px以上的設(shè)備寬度。.uk-grid-width-medium-*影響768px以上的設(shè)備寬度。.uk-grid-width-large-*影響960px以上的設(shè)備寬度。.uk-grid-width-xlarge-*影響1220px以上的設(shè)備寬度。Example網(wǎng)格42UIkit中文文檔Markup<ulclass="uk-griduk-grid-width-1-2uk-grid-width-medium-1-3uk-grid-width-large-1-5"><li>...</li><li>...</li></ul>網(wǎng)格43UIkit中文文檔面板/Panel創(chuàng)建擁有不同樣式的布局盒。UIKit使用面板勾勒網(wǎng)頁內(nèi)容中的某些部分，它可以擁有不同的樣式。通常，面板被布置在網(wǎng)格組件的網(wǎng)格列中。用法面板組件由面板本身，面板標(biāo)題和面板徽章組成。為了防止產(chǎn)生多余的空白，面板內(nèi)容頂部和底部的maigin都被移除了。Class描述.uk-panel為<div>元素添加這個類，定義面板組件。.uk-panel-title為標(biāo)題元素添加這個類創(chuàng)建面板標(biāo)題。為<div>元素添加這個類創(chuàng)建一個面板的徽.uk-panel-badge章。風(fēng)格化徽章樣式最簡單的方法，就是通過加入徽章組件中的修飾符類。Example注意默認情況下，面板是空白的也沒有樣式。因此，為面板添加修飾符類的樣式是很重要的。在例子中，我們使用了.uk-panel-box類。Markup面板/Panel44UIkit中文文檔<divclass="uk-panel"><divclass="uk-panel-badgeuk-badge">...</div><h3class="uk-panel-title">...</h3>...</div>網(wǎng)格中的面板Panelsinagrid這是一個關(guān)于如何在網(wǎng)格組件中使用面板的簡單例子。兩個面板都使用了.uk-width-medium-1-2類。ExampleMarkup<divclass="uk-grid"><divclass="uk-width-medium-1-2"><divclass="uk-panel">...</div></div><divclass="uk-width-medium-1-2"><divclass="uk-panel">...</div></div></div>修飾使用修飾類為面板添加一個特定的樣式是很有必要的。UIkit含有多種面板修飾，你也可以自己創(chuàng)建。面板框添加.uk-panel-box類來創(chuàng)建一個可見的面板框。這是默認的面板修飾樣式。面板/Panel45UIkit中文文檔ExampleMarkup<divclass="uk-paneluk-panel-box">...</div>注意為面板創(chuàng)建鼠標(biāo)經(jīng)過效果，只需添加.uk-panel-box-hover類。這將在使用錨文本時帶來方便。醒目的面板盒/Panelboxprimary添加.uk-panel-box-primary類來修飾面板框，并以不同的顏色使其顯得突出。ExampleMarkup<divclass="uk-paneluk-panel-boxuk-panel-box-primary">...</div>注意為面板創(chuàng)建鼠標(biāo)經(jīng)過效果，只需添加.uk-panel-box-primary-hover類。這將在使用錨文本時帶來方便。面板/Panel46UIkit中文文檔次要的面板盒/Panelboxsecondary為面板框添加.uk-panel-box-secondary類，給它一個白色的背景。ExampleMarkup<divclass="uk-paneluk-panel-boxuk-panel-box-secondary">...</div>注意為面板創(chuàng)建鼠標(biāo)經(jīng)過效果，只需添加.uk-panel-box-secondary-hover類。這將在使用錨文本時帶來方便。鼠標(biāo)經(jīng)過面板/Panelhover添加.uk-panel-hover類為面板天鼠標(biāo)經(jīng)過效果，這將為用作錨的面板帶來便利。ExampleMarkup<aclass="uk-paneluk-panel-hover"href="">...</a>面板/Panel47UIkit中文文檔面板標(biāo)題/Panelheader添加.uk-panel-header類，用一條水平線分隔面板的標(biāo)題和內(nèi)容。ExampleMarkup<divclass="uk-paneluk-panel-header">...</div>面板間距添加.uk-panel-space添加類來增加面板四周的間距。ExampleMarkup<divclass="uk-paneluk-panel-space">...</div>面板分隔線添加.uk-panel-divider類將垂直堆疊的面板用水平線進行分隔。Example面板/Panel48UIkit中文文檔Markup<divclass="uk-grid"><divclass="uk-width-medium-1-2"><divclass="uk-paneluk-panel-divider">...</div><divclass="uk-paneluk-panel-divider">...</div><divclass="uk-paneluk-panel-divider">...</div></div></div>注意使用網(wǎng)格組件中的.uk-grid-divider類分隔網(wǎng)格列。帶圖片預(yù)覽的面板框為了在一個面板內(nèi)顯示不帶有任何邊框的圖片，僅需添加.uk-panel-teaser類至該面板內(nèi)部的<div>元素。Example面板/Panel49UIkit中文文檔Markup<divclass="uk-paneluk-panel-box"><divclass="uk-panel-teaser"><imgsrc=""alt=""></div></div>帶圖標(biāo)的面板在面板標(biāo)題中為<i>或<span>元素添加一個.uk-icon-*類，可以輕松地將圖標(biāo)組件中的圖標(biāo)應(yīng)用在面板中。ExampleMarkup<divclass="uk-panel"><h3class="uk-panel-title"><iclass="uk-icon-*"></i>...</h3></div>面板/Panel50UIkit中文文檔塊/Block通過將內(nèi)容片段打包成擁有不同樣式的塊來分割內(nèi)容。用法只需要為容器元素添加.uk-block類，就能使用這個組件了。ExampleMarkup<divclass="uk-block">...</div>修飾使用不同的背景顏色和padding，添加以下類中的一個就行了。當(dāng)兩個連續(xù)的塊擁有相同的背景色時，padding會自動被分開。Class描述.uk-block-default添加默認的背景色彩，通常是白色或類似的顏色。.uk-block-muted添加亮背景色。.uk-block-primary添加表示著重的背景色。.uk-block-secondary添加另一種背景色，通常是暗色。塊/Block51UIkit中文文檔注意為了在有色的塊中恰到好處地顯示色彩、border和其他元素，你可能需要使用對比度組件中的.uk-contrast類。ExampleMarkup<divclass="uk-blockuk-block-primary">...</div>Padding為塊添加較大的padding，只需添加一個.uk-block-large類。你還可以使用效果組件中的.uk-padding-*類，來設(shè)置塊中padding。Example塊/Block52UIkit中文文檔Markup<divclass="uk-blockuk-block-large">...</div>塊/Block53UIkit中文文檔文章在你頁面中創(chuàng)建文章。用法文章組件由文章本身、標(biāo)題、元數(shù)據(jù)（例如發(fā)布時間、所屬欄目、作者等）、起始段落（摘要）和間隔組成。Class描述添加這個類來定義文章組件。通常你需要使用.uk-article<article>元素。對一個標(biāo)題添加這個類，來創(chuàng)建文章標(biāo)題。通常會.uk-article-title用在<h1>元素中。.uk-article-meta向包含文章元數(shù)據(jù)的段落添加這個類。.uk-article-lead為文章起始段落添加這個類，使其顯得突出。對<hr>元素添加這個類，建立一個間隔.uk-article-divider使文章各部分分開。示例Code文章54UIkit中文文檔<articleclass="uk-article"><h1class="uk-article-title">...</h1><pclass="uk-article-meta">...</p><pclass="uk-article-lead">...</p>...<hrclass="uk-article-divider">...</article>文章55UIkit中文文檔評論/Comment創(chuàng)建評論，比如文章的評論。用法評論組件由包含頭像、標(biāo)題和元數(shù)據(jù)的評論header以及評論主體組成。Class描述.uk-comment添加這個類定義評論組件。.uk-comment-header添加這個類創(chuàng)建評論header。.uk-comment-avatar添加到<img>元素創(chuàng)建評論者的頭像。.uk-comment-title添加這個類到一個標(biāo)題元素中，創(chuàng)建評論的標(biāo)題。.uk-comment-meta為段落添加這個類，創(chuàng)建評論的元數(shù)據(jù)。為<div>元素添加這個類，創(chuàng)建評論主.uk-comment-body體。示例Code<articleclass="uk-comment"><headerclass="uk-comment-header"><imgclass="uk-comment-avatar"src=""alt=""><h4class="uk-comment-title">...</h4><divclass="uk-comment-meta">...</div></header><divclass="uk-comment-body">...</div></article>評論/Comment56UIkit中文文檔評論列表添加.uk-comment-list類到一個<ul>元素中，創(chuàng)建一個評論列表。你可以在評論列表中嵌套任意數(shù)量的<ul>元素。示例Code<ulclass="uk-comment-list"><li><articleclass="uk-comment">...</article><ul><li><articleclass="uk-comment">...</article></li></ul></li><li><articleclass="uk-comment">...</article></li></ul>色彩調(diào)整添加.uk-comment-primary類可以將評論樣式變得不同，例如把管理員的評論設(shè)置為高亮。示例評論/Comment57UIkit中文文檔Code<articleclass="uk-commentuk-comment-primary">...</article>評論中的二級導(dǎo)航使用二級導(dǎo)航組件以二級導(dǎo)航欄的形式展示評論的元數(shù)據(jù)。示例Code<ulclass="uk-comment-metauk-subnavuk-subnav-line"><li>...</li></ul>評論/Comment58UIkit中文文檔效果/Utility一些實用的效果類集合，它們可以用來風(fēng)格化你的網(wǎng)頁內(nèi)容。容器添加.uk-container類到一個塊元素中，為其設(shè)置一個最大寬度并將網(wǎng)頁的主要內(nèi)容包裝在其中。對于大屏幕采用不同的最大寬度。居中想要將容器居中，使用.uk-container-center類。對于其它的塊元素，你需要設(shè)定一個寬度。示例Code<divclass="uk-width-medium-1-2uk-container-center">...</div>浮動與清除浮動浮動是創(chuàng)建各式布局的基礎(chǔ)。但浮動需要清除，否則在最壞的情況下需，你會得到一個雜亂無章的頁面。下面的類能幫助你創(chuàng)建基礎(chǔ)的布局。Class概述.uk-float-left浮動元素為左對齊。.uk-float-right浮動元素為右對齊。.uk-clearfix向父容器添加這個類來清除浮動。效果/Utility59UIkit中文文檔Code<divclass="uk-clearfix"><divclass="uk-float-right">...</div><divclass="uk-float-left">...</div></div>單獨的用來格式化上下文的塊元素/Newblockformattingcontext代替使用.uk-clearfix類，你可以單獨創(chuàng)建一個塊元素來清除上下文的浮動?；谀愕脑O(shè)置，你可以對其進行評估哪種方式更加適合。Class概述設(shè)置overflow為hidden來創(chuàng)建一個單獨的用來格式化上下.uk-nbfc文的塊元素。設(shè)置display為table-cell來創(chuàng)建一個單獨的用來格式化上.uk-nbfc-alt下文的塊元素。圖片與對象的對齊有間距地將圖片與其他元素（比如文本）對齊。Class概述.uk-align-left向左浮動元素，并創(chuàng)建右側(cè)及底部的間距。.uk-align-right向右浮動元素，并創(chuàng)建左側(cè)及底部的間距。.uk-align-medium-left僅影響寬度768px及以上的設(shè)備。.uk-align-medium-right僅影響寬度768px及以上的設(shè)備。.uk-align-center居中對齊元素，并創(chuàng)建底部間距。示例效果/Utility60UIkit中文文檔Code<pclass="uk-clearfix"><imgclass="uk-align-medium-right"src=""alt="">...</p>垂直對齊將對象垂直對齊，你必須為需要對齊的對象創(chuàng)建一個父容器。Class概述向父容器添加這個類。這個容器需要被設(shè).uk-vertical-align定一個高度。.uk-vertical-align-middle向子元素添加這個類，使內(nèi)容居中對齊。向子元素添加這個類，使內(nèi)容與底部對.uk-vertical-align-bottom齊。.uk-height-1-1這個輔助類用來賦予100％的高度。示例效果/Utility61UIkit中文文檔Code<divclass="uk-vertical-align"><divclass="uk-vertical-align-middle">...</div></div><divclass="uk-vertical-align"><divclass="uk-vertical-align-bottom">...</div></div>注意需要對齊的元素需要有一個寬度或最大寬度，它的寬度必須比父容器寬度小。居中整個頁面如果你想將<html>和<body>元素擴展到整個頁面的高度，.uk-height-1-1類便派上了用場。創(chuàng)建錯誤頁面時，這是非常有用的。Code<htmlclass="uk-height-1-1">...<bodyclass="uk-height-1-1"><divclass="uk-vertical-align"><divclass="uk-vertical-align-middle">...</div></div></body></html>效果/Utility62UIkit中文文檔水平居中水平居中你的網(wǎng)頁內(nèi)容，添加.uk-text-center類到父容器并添加.uk-container-center類到子元素。這是由于響應(yīng)式特性而必須這樣的。視窗高度添加.uk-height-viewport類，就可以創(chuàng)建一個填充整個視窗高度的容器，例如用于全屏圖像或視頻。元素的定位UIkit提供一系列的類去定位你的內(nèi)容，而無須更改你自己的CSS。ClassDescription.uk-position-top將元素絕對定位在頂部.uk-position-top-left將元素絕對定位在左側(cè)頂部.uk-position-top-right將元素絕對定位在右側(cè)頂部.uk-position-bottom將元素絕對定位在底部.uk-position-bottom-left將元素絕對定位在左側(cè)底部.uk-position-bottom-right將元素絕對定位在右側(cè)底部為元素添加絕對定位，并將其擴展覆蓋其.uk-position-cover父元素.uk-position-relative為元素添加relative定位方法.uk-position-z-index為元素添加數(shù)值為1的z-index屬性響應(yīng)式對象在UIkit中，圖片會默認地自適應(yīng)它的父容器。如果你想將響應(yīng)式特性應(yīng)用于媒體元素，比如視頻對象，只需要添加下面的類中的一個。效果/Utility63UIkit中文文檔Class描述根據(jù)父容器的寬度調(diào)整對象的寬度，保持對象原.uk-responsive-width始的寬高比。根據(jù)父容器的高度調(diào)整對象的高度，保持對象原.uk-responsive-height始的寬高比。NOTE同樣，可以添加.uk-responsive-width類名到iframe，此iframe需要有預(yù)設(shè)的width和height屬性。Example寬度Example高度Markup<videocontrolsclass="uk-responsive-width"></video><imgclass="uk-responsive-height"src=""alt="">效果/Utility64UIkit中文文檔行內(nèi)的SVGSVG或可縮放的矢量圖形真的很棒，比如作為LOGO使用時，無論是縮放還是用于動畫，它都很清晰。要使用CSS來控制SVG，只需要為圖片標(biāo)簽添加data-uk-svg屬性。這可以將SVG轉(zhuǎn)變行內(nèi)元素，并具有所有屬性，包括ID、class、width、height等等，你可以通過CSS方便地控制它。Markup<imgsrc="my-image.svg"data-uk-svg>外邊距Margin添加一個下面的類為塊元素添加外邊距。Class描述.uk-margin為一個段落添加相同的頂部和底部外邊距。.uk-margin-top添加頂部外邊距。.uk-margin-bottom添加底部外邊距。.uk-margin-left添加左側(cè)外邊距。.uk-margin-right添加右側(cè)外邊距。較大的外邊距使用一個下面的類來為塊元素添加較大的外邊距。Class描述Description.uk-margin-large為一個段落添加較大的頂部和底部外邊距。.uk-margin-large-top添加較大的頂部外邊距。.uk-margin-large-bottom添加較大的底部外邊距。.uk-margin-large-left添加較大的左側(cè)外邊距。.uk-margin-large-right添加較大的右側(cè)外邊距。效果/Utility65UIkit中文文檔較小的外邊距使用一個下面的類來為塊元素添加較小的外邊距。Class描述.uk-margin-small為一個段落添加較小的頂部和底部外邊距。.uk-margin-small-top添加較小的頂部外邊距。.uk-margin-small-bottom添加較小的底部外邊距。.uk-margin-small-left添加較小的左側(cè)外邊距。.uk-margin-small-right添加較小的右側(cè)外邊距。移除外邊距添加一個下面的類來移除塊元素的外邊距。Class描述.uk-margin-remove移除全部外邊距。.uk-margin-top-remove移除頂部外邊距。.uk-margin-bottom-remove移除底部外邊距。自動外邊距Automargin為堆疊的多個元素間距，例如，在較小的視口中堆疊顯示多個并列的內(nèi)聯(lián)元素時，只需要添加data-uk-margin屬性到它們的父元素，即可自動為子元素添加the.uk-margin-small-top。示例Code效果/Utility66UIkit中文文檔<pdata-uk-margin><buttonclass="uk-button">...</button><buttonclass="uk-button">...</button></p>注意默認情況下，data屬性為堆疊的元素添加.uk-margin-small-top類。如果需要添加更大的margin，只需要添加{cls:'.uk-margin-top'}選項就行。Padding移除塊元素內(nèi)的padding，添加以下類中的一個就行了。Class描述.uk-padding-remove移除所有padding..uk-padding-top-remove移除頂部padding..uk-padding-bottom-remove移除底部padding.uk-padding-vertical-remove移除頂部和底部padding.Border半徑要為元素添加圓角，添加.uk-border-rounded即可。要使用圓形，添加.uk-border-circle即可。Example效果/Utility67UIkit中文文檔<imgclass="uk-border-rounded"src=""alt=""><imgclass="uk-border-circle"src=""alt="">標(biāo)題變大為了增大平板電腦和臺式機下標(biāo)題字體的大小，只需添加.uk-heading-large類。示例Code<h1class="uk-heading-large">...<h1>啞色鏈接如果要去掉鏈接的默認顏色，只需添加.uk-link-muted類到錨元素或它的父元素。示例Code效果/Utility68UIkit中文文檔<aclass="uk-link-muted">...<a><h1class="uk-link-muted"><a>...<a><h1><ulclass="uk-link-muted"><li><a>...<a></li><li><a>...<a></li><li><a>...<a></li></ul>可滾動的預(yù)格式化文本添加.uk-scrollable-text類設(shè)置一個最大高度，并提供一個垂直滾動條。這對預(yù)格式化的文本是非常有用的，它可以讓你的代碼塊節(jié)省更多的空間。示例可滾動的盒子添加.uk-scrollable-box類創(chuàng)建一個具有最大高度及垂直滾動條的看起來像面板的盒子。它可以包含任何類型的內(nèi)容。示例效果/Utility69UIkit中文文檔Code<divclass="uk-scrollable-box"><ulclass="uk-list"><li><label><inputtype="checkbox">...</label></li><li><label><inputtype="checkbox">...</label></li></ul></div>溢出容器/Overflowcontainer當(dāng)容器內(nèi)部的元素寬度超過了容器本身，只需要為容器的<div>元素添加一個.uk-overflow-container類，就能為容器帶來一個水平方向的滾動條。在響應(yīng)式網(wǎng)頁中處理表格時很有用，因為表格可能在某些斷點會顯得過于寬大。示例Code<divclass="uk-overflow-container">...</div>效果/Utility70UIkit中文文檔顯示效果添加這些類中的一個改變元素的display屬性。Class描述.uk-display-block強制將元素改變成塊元素。.uk-display-inline強制將元素改變成內(nèi)聯(lián)元素。.uk-display-inline-block強制將元素改變成內(nèi)聯(lián)塊