推薦一款強大的輕量級模塊化WEB前端快速開發框架--UIkit

前言

今天給大家分享一款強大的輕量級模塊化WEB前端快速開發框架--UIkit

到目前(2016-06-20)為止，UIkit在github上的Forks已達到了1350個，而Stars更是達到了6943個，這些數據也能說明UIkit在開發者中還是比較受歡迎的吧。

版本及瀏覽器支持

UIkit目前的版本號為:2.26.3,支持的瀏覽及版本如下：

獲取方式

你可以通過以下的方式之一獲取到UIkit:

1. 通用此鏈接下載最新發布的UIkit版本;
2. 使用git工具從github克隆UIkit到本地，命令為:
   git clone git://github.com/uikit/uikit.git
3. 使用Bower工具安裝，命令如下:
   bower install uikit

同時，你也可以通過以下鏈接獲取UIkit編譯后的代碼：

https://github.com/uikit/bowe...

UIkit特性

1. UIkit使用結構更好，更易維護的LESS &SASS 編寫;
2. 組件化--UIkit由許多小的組件構成；
3. 自定義化--UIkit具有高度的可自定義開發API;
4. 響應式--UIkit也是以"移動為先"的理念來設計的，可響應式兼容從手機到平板，再至PC的所有設備

示例摘要

大整體介紹了UIkit后，我們再來了解一些UIkit的示例及功能展示，UIkit包括了從字體樣式定義到彈窗，面板，表格，表單等等一系列的WEB開發常用的核心組件及擴展組件，以下展示一下UIkit的彈窗組件，你也可以到UIkit的官網地址查看較為完整的彈窗口示例。
彈窗的代碼還是比較簡單的,HTML代碼如下：

<!-- This is an anchor toggling the modal -->
<a href="#my-id" data-uk-modal>...</a>

<!-- This is a button toggling the modal -->
<button class="uk-button" data-uk-modal="{target:'#my-id'}">...</button>

<!-- This is the modal -->
<div id="my-id" class="uk-modal">
    <div class="uk-modal-dialog">
        <a class="uk-modal-close uk-close"></a>
        ...
    </div>
</div>

彈出的效果如下圖：

以上是HTML代碼的彈窗示例，UIkit還有基於JAVASCRIPT的彈窗，如：

這里只給大家介紹示例，更多關於UIkit的詳細，請查看官網.
同時也歡迎大家訪問.NET資源分享網站:碼友網--http://codedefault.com

本文轉載於猿2048:推薦一款強大的輕量級模塊化WEB前端快速開發框架--UIkit