Web輕量級框架UIKit簡介

2021-07-25 10:52:13 字數 2012 閱讀 5942

uikit的中文官網奉上:

對於我們來說,前端的框架也是不陌生了,接觸過了esayui,mui和bootstrap的同學一定對於框架有了很多的了解,我們的應用也是無非在於把demo中的**copy過來在加上自己的修改就成了自己的東西了,關鍵就是要有自己的想法,因為框架提供的東西都是一些元件,我們需要發揮想象力把他們用起來才能成為乙個產品。

好了廢話不多說了,來進入正題。

說道uikit,相信很多同學都沒有聽說過,因為他不是特別的出名,用到的地方也不是很多,而且他是仿照著bootstrap的基本結構來的,所以很少有人可以注意到它,但是他又有很多bootstrap也不是很擅長的東西,首先它對於觸控操作很是在行,其次,他的介面要比bootstrap要華麗很多,符合一些現代元素的特徵非常適合有探索精神和追求頁面華麗的同志們,所以我當初決定要研究這個框架也是有理由的。

首先來說說uikit的核心文件,其實他的核心文件就分為三個部分(體現了輕量)其中css是全部的額css檔案,js就是包含了全部的js檔案,其中裡面又分為component和一般的css,js,一般的css和js都是核心

如圖就是uikit的官方的幫助教程所在網頁了,是不是看起來很漂亮呢,那就趕緊點進去學習吧。

上面我們講到了核心的元件就是乙個js,乙個css,所以我們在應用的時候只要把這兩個引用上就可以解決大部分的問題了。(注意uikit是需要jqurey支援的,而且需要2.0以上的版本,也正是如此,它不支援ie8以下的瀏覽器,這也是不受歡迎的原因之一)。

如下所示,我們需要先引用這些東西在我們的html頁面中:

值得注意的是,我們需要把jquery引用在uikit.js之前,如果相反的話,uikit就會出現uikit need jquery的錯誤,影響頁面的顯示。

然後我們就可以根據教程中核心元件中的教程來寫控制項了,下面是個例子:

lorgen ipsum dolor sit amet,consecletur elit,in antus libero debitis?

buy the universe now

這個裡面用到了乙個框和乙個按鈕加標題字型的顯示設定,整個頁面的**如下:

lorgen ipsum dolor sit amet,consecletur elit,in antus libero debitis?

buy the universe now

下面來看看可定製的工具,其實都是核心元件中的東西,只是你可以自己定製樣式罷了:

以上就是關於uikit的簡短的介紹,希望對於您來說能有小小的幫助。

輕量級框架

1.概述 輕量級框架一般由struts,spring組成,側重於減小開發的複雜度,相應的它的處理能力便有所減弱 如事務功能弱 不具備分布式處理能力 比較適用於開發中小型企業應用。2.定義 輕量級框架是相對於重量級框架的一種設計模式 輕量級框架不帶有侵略性api,對容器也沒有依賴性,易於進行配置,易於...

輕量級web框架 Flask 06

1.重定向 redirect 什麼是重定向 由伺服器通知瀏覽器向乙個新位址傳送請求 特點 產生兩次相應 2.orm操作 查詢 r db.session.query 查詢執行函式 查詢執行函式 all first first or 404 count 查詢過濾器函式 作用在db.session.que...

輕量級Java框架

該專案是乙個輕量級mvc框架,重點實現了依賴注入和aop特性,適合需要學習這兩方面知識的人 依賴注入的實現 通過beanhelper 位於helper包中 獲取所有bean map 是乙個記錄了類與物件的對映關係的map,object 結構 遍歷這個對映關係,取出bean類與bean例項,通過反射獲...