jquery mobile和bootstrap都是較好的框架。為了使用便利,下文列舉了目前最強(qiáng)大應(yīng)用最廣泛的幾款前端開發(fā)框架。

創(chuàng)新互聯(lián)公司專注于企業(yè)成都營銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、東勝網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5技術(shù)、商城建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù),價格優(yōu)惠性價比高,為東勝等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
1. Bootstrap
Boostrap絕對是目前最流行用得最廣泛的一款框架。它是一套優(yōu)美,直觀并且給力的web設(shè)計工具包,可以用來開發(fā)跨瀏覽器兼容并且美觀大氣的頁面。它提供了很多流行的樣式簡潔的UI組件,柵格系統(tǒng)以及一些常用的JavaScript插件。
2. Fbootstrapp
Fbootstrapp基于Bootstrap并且提供了跟Facebook iframe apps和設(shè)計相同的功能。包含用于所有標(biāo)準(zhǔn)組件的基本的CSS和HTML,包括排版、表單、按鈕、表格、柵格、導(dǎo)航等等,風(fēng)格與Facebook類似。
3. BootMetro
BootMetro框架的靈感來自于Metro UI CSS,基于Bootstrap 框架構(gòu)建,用于創(chuàng)建Windows 8 的Metro風(fēng)格的網(wǎng)站。它包括所有Bootstrap的功能,并添加了幾個額外的功能,比如頁面平鋪,應(yīng)用程序欄等等。
4. Kickstrap
Kickstrap是Bootstrap的一個變體。它基于Bootstrap,并在它的基礎(chǔ)上添加了許多app,主題以及附加功能。這使得這個框架可以單獨(dú)地用于構(gòu)建網(wǎng)站,而不需要額外安裝什么。你需要做的僅僅是把它放到你的網(wǎng)站上,然后用就可以了。
5. Foundation
Foundation 是一款強(qiáng)大的,功能豐富的并且支持響應(yīng)式布局的前端開發(fā)框架,你可以通過Foundation快速創(chuàng)建原型,利用它所包含的大量布局框架,元素以及最優(yōu)范例快速創(chuàng)建在各種設(shè)備上可以正常運(yùn)行的網(wǎng)站以及app。Foundation在構(gòu)建的時候秉承移動優(yōu)先的策略,它擁有大量實(shí)用的語義化功能,并且使用Zepto類庫來取代jQuery,這樣可以帶來更好的用戶體驗(yàn),并且提高運(yùn)行的速度。
6. GroundworkCSS
GroundworkCSS 是前端框架家族里面新添的一款小清新框架。它是基于Sass和Compass的一個高級響應(yīng)式的HTML5,CSS以及JavaScript工具包,可以用于快速創(chuàng)建原型并且建立在各種瀏覽設(shè)備上可以正常工作的網(wǎng)站和app。
7. Gumby
Gumby 是一款基于Sass和Compass的簡單靈活并且穩(wěn)定的前端開發(fā)框架。
它的流式-固定布局(fluid-fixed layout)可以根據(jù)桌面端以及移動設(shè)備的分辨率自動優(yōu)化要呈現(xiàn)的網(wǎng)頁內(nèi)容。它支持多種網(wǎng)格布局,包括多列混雜的嵌套模式。Gumby提供兩套PSD的模板,方便你在12列和16列的網(wǎng)格系統(tǒng)上進(jìn)行設(shè)計。
8. HTML KickStart
HTML Kickstart 是一款可以用來方便創(chuàng)建任何布局的集合HTML5,CSS和jQuery的工具包。它提供了干凈,符合標(biāo)準(zhǔn)以及跨瀏覽器兼容的代碼。
9. IVORY
IVORY 是一款輕量,簡單但是強(qiáng)大的前端框架,可以用于320到1200像素寬度的響應(yīng)式布局。它基于12列的響應(yīng)式網(wǎng)格布局,包含表格,按鈕,表格,分頁,撥動開關(guān),工具提示,手風(fēng)琴,選項卡等網(wǎng)站中常用的組件和樣式。
10.Kube
最后,如果你的新項目需要一款實(shí)在的,不需要復(fù)雜的額外功能組件的,足夠簡單的框架,那么 Kube 將會是你正確的選擇。Kube是一款最小化的,支持響應(yīng)式的前端框架,它沒有強(qiáng)加的樣式設(shè)計,因此給了你充分的自由來開發(fā)自己的樣式表。它提供了一些web元素的基本樣式,比如網(wǎng)格,表單,排版,表格,按鈕,導(dǎo)航,鏈接以及圖片等等。
給大家介紹幾個在Web前端界比較優(yōu)秀的前端框架。
1、Bootstrap
Twitter出品的Bootstrap在業(yè)界是非常受歡迎的,以致于有很多前端框架都在其基礎(chǔ)上開發(fā),如我們熟悉的WeX5就是在Bootstrap源碼基礎(chǔ)上優(yōu)化而來的。我相信大多數(shù)接觸過前端開發(fā)的同學(xué)多少都了解過這個優(yōu)秀的前端框架。Bootstrap是基于HTML、CSS和Javascript的,它簡潔靈活,可以使得Web開發(fā)更加敏捷。
它提供優(yōu)雅的HTML和CSS規(guī)范,在jQuery的基礎(chǔ)上進(jìn)行更加個性化和人性化的完善。兼容大部分jQuery插件,并包含了豐富的Web組件,如下拉菜單、按鈕式下拉菜單、導(dǎo)航條、按鈕組、分頁、縮略圖、進(jìn)度條和媒體對象等。自帶了13個jQuery插件,其中有模式對話框、標(biāo)簽頁、滾動條和彈出框等。
2、Foundation框架
Foundation框架總體來看要比Bootstrap略顯高大上一點(diǎn),但他們倆的設(shè)計理念都是非常清楚的,Bootstrap有引導(dǎo)的意思,它嘗試處理你項目中的一切所需。Foundation有基礎(chǔ)、地基及支柱的意思,給你項目中強(qiáng)有力的創(chuàng)造與支持。相對于Bootstrap豐富的組件及插件,F(xiàn)oundation僅提供了有限的幾種元素,其目標(biāo)是,即使你使用預(yù)定義的UI元素,也不應(yīng)該與大家的網(wǎng)站長得太像。
而Bootstrap則致力于提供所有定義好的元素,這樣使得看起來許多網(wǎng)站都差不多。Foundation默認(rèn)不帶圖標(biāo)集,它推薦使用開源字體圖標(biāo)。與Bootstrap一樣,F(xiàn)oundation使用網(wǎng)格流式布局將網(wǎng)頁劃分為12列,針對不同的設(shè)備顯示不同的列數(shù),實(shí)現(xiàn)響應(yīng)式布局。但Foundation不支持舊版本瀏覽器。其他特性如有興趣可進(jìn)一步了解。
3、Curl
Curl 是一個命令行工具,用于通過 HTTP(s)、FTP 和數(shù)十種其它協(xié)議進(jìn)行請求。使用Curl可以進(jìn)行文件下載、檢查響應(yīng)標(biāo)題和自由訪問遠(yuǎn)程數(shù)據(jù)。
在 Web 開發(fā)中,Curl 經(jīng)常和 RESTful API 一起使用,用于測試連接。
# Fetch the headers of a URL.curl -I 302 FoundCache-Control: privateContent-Type: text/html; charset=UTF-8Referrer-Policy: no-referrerLocation: ;ei=0fCKWe6HCZTd8AfCoIWYBQContent-Length: 258Date: Wed, 09 Aug 2017 11:24:01 GMT# Make a GET request to a remote API.curl is the number of days it takes Saturn to orbit the Sun.
Curl 命令可能比上述代碼更復(fù)雜。有許多選項用于控制 headers、Cookie、身份驗(yàn)證等。了解更多,請閱讀Everything curl。
4、Tree
Tree 是一個小型的命令行實(shí)用程序,它將目錄中的文件以可視化的方式進(jìn)行顯示。它采用遞歸運(yùn)行的方式,遍歷每個級別的嵌套并繪制所有內(nèi)容的格式樹。這樣就能快速的瀏覽并查找需要的文件。
tree.├── css│ ├── bootstrap.css│ ├── bootstrap.min.css├── fonts│ ├── glyphicons-halflings-regular.eot│ ├── glyphicons-halflings-regular.svg│ ├── glyphicons-halflings-regular.ttf│ ├── glyphicons-halflings-regular.woff│ └── glyphicons-halflings-regular.woff2└── js ├── bootstrap.js └── bootstrap.min.js
還可以使用簡單的 regEx 模式來過濾結(jié)果:
tree -P '*.min.*'.├── css│ ├── bootstrap.min.css├── fonts└── js └── bootstrap.min.js
5、Tmux
根據(jù)維基的解釋,Tmux 是一個終端復(fù)用器。通俗的說,它是一個能將多個終端連接到單個終端會話的工具。
Tmux允許用戶在終端中的程序之間切換,添加屏幕窗格,并將多個終端連接到同一個會話,使其保持同步。在遠(yuǎn)程服務(wù)器上工作時,Tmux 特別有用,因?yàn)樗试S用戶創(chuàng)建新的選項卡,而無需再次登錄。
6、du
du命令用于生成關(guān)于文件和目錄的空間使用情況的報告。du很容易使用,可以遞歸地運(yùn)行,遍歷每個子目錄并返回每個文件的大小。
du 的常見用例是:當(dāng)某個驅(qū)動器的空間不足,用戶不清楚每個存儲器的大小。使用此命令可以快速查看每個文件夾所占用的存儲空間,從而找到占用最大空間的存儲器。
7、AUI
AUI是最近流行起來的,作者聲稱是專為APIClound設(shè)計的一套框架,解決了許多移動端開發(fā)實(shí)際中遇到的許多問題,是一個純CSS框架。使用容器+布局+模塊的構(gòu)建方式,JS輔助,更自由更靈活更易于擴(kuò)展使用。遵循Google Material設(shè)計規(guī)范,完美適配各個機(jī)型。面向HTML5,使用CSS3實(shí)現(xiàn)動畫交互,輕量級高性能。AUI是使用MIT License授權(quán),你可以復(fù)制、出售。目前最新版本2.0。
8、Amaze UI
這是稱為妹子UI的開源框架,據(jù)稱是中國首個開源HTML5跨屏前端框架。妹子UI以移動優(yōu)先為理念,從小屏逐漸到大屏,實(shí)現(xiàn)響應(yīng)式網(wǎng)頁。Amaze UI包含20+個CSS組件、20+個JS組件,更有多個包含不同主題的Web組件。相比國外框架,妹子UI關(guān)注中文排版提供本地化支持。面向HTML5開發(fā),使用CSS3來實(shí)現(xiàn)動畫交互,輕量級高性能。
9、Frozen UI
Frozen UI是一款開源,簡單易用,輕量敏捷的移動端框架。基于手Q樣式規(guī)范,目前全面應(yīng)用于企鵝手Q增值業(yè)務(wù)中。基礎(chǔ)樣式效果簡單色調(diào)清爽,社區(qū)活躍,組件自然不少。包括按鈕、列表、表單、通知、提示條、彈出框、選項卡等等常用組件。還包括一個FrozenJs的JS組件庫。可以在主流的Android和IOS上應(yīng)用。基本樣式使用離線包的方式減少請求提供快速接入方案。當(dāng)然,根據(jù)網(wǎng)友反映,也存在大大小小的bug。不過總體來說,還是值得一用的。奇怪的是,Github上顯示的最后更新時間是一年前,難道已經(jīng)沒人維護(hù)了嗎?
# Running this will show the space usage of each folder in the current directory.# The -h option makes the report easier to read.# -s prevents recursiveness and shows the total size of a folder.# The star wildcard (*) will run du on each file/folder in current directory.du -sh *1.2G Desktop4.0K Documents40G Downloads4.0K Music4.9M Pictures844K Public4.0K Templates6.9M Videos
還有一個相似的命令 df(Disk Free),使用df會返回有關(guān)可用磁盤空間的各種信息。
以上介紹了現(xiàn)在熱門的幾個Web前端框架,以及它們的主要功能,希望對大家學(xué)習(xí)Web前端有所幫助。
現(xiàn)在比較常用的就是Jjavascript和JQuery,這兩個大型企業(yè)和小公司都用,還有就是Bootstrap,BootMetro之類的。
對于參加杭州Web前端培訓(xùn)班的人來說,他們的課程安排是從基礎(chǔ)到進(jìn)階,并由專業(yè)的老師引導(dǎo)教學(xué)。在具備一定的理論基礎(chǔ)之后,還需要學(xué)習(xí)前端框架,目的是減少重復(fù)的勞動,提高工作效率并增加安全性,而這也是很多企業(yè)在面試過程中經(jīng)常提問的知識點(diǎn)。今天就給大家介紹一下Web前端三大主流框架。
目前比較流行的前端三大框架是Angular、React、Vue,三者各有所長。
1、Angular
Angular是一個JavaScript框架,最為核心的是:MVC(Model–view–controller)、模塊化、自動化雙向數(shù)據(jù)綁定、語義化標(biāo)簽、依賴注入等等。Angular通過指令擴(kuò)展了HTML,以一個 JavaScript文件形式發(fā)布,通過script標(biāo)簽添加到網(wǎng)頁中。Angular的優(yōu)勢在于:零配置、深度整合設(shè)計模式、約定才是框架的本質(zhì)。不過對于JavaScript工程師來說,少有工程化的經(jīng)驗(yàn),學(xué)習(xí)起來會比較痛苦。
2、React
React是一個Facebook和Instagram用來創(chuàng)建用戶界面的JavaScript庫,用于構(gòu)建頁面、Javascript庫。主要功能是對DOM操作,聲明式設(shè)計,更快的開發(fā)出Web應(yīng)用系統(tǒng)。借助React,你可以非常輕松地創(chuàng)建用戶交互界面,為你應(yīng)用的每一個狀態(tài)設(shè)計簡潔的視圖。在數(shù)據(jù)改變時,React也可以高效地更新渲染界面。
3、Vue
Vue是用于構(gòu)建交互式的Web界面的庫,它提供了MVVM數(shù)據(jù)綁定和一個可組合的組件系統(tǒng),具有簡單、靈活的 API。從技術(shù)上講,Vue集中在MVVM模式上的視圖模型層,并通過雙向數(shù)據(jù)綁定連接視圖和模型。實(shí)際的DOM操作和輸出格式被抽象出來成指令和過濾器,相比其它的MVVM框架,Vue更容易上手。
綜上所述,在大型超大型Web應(yīng)用開發(fā)上比較看好Angular,個性化需求、中型應(yīng)用更傾向選擇React,在小型應(yīng)用上則看好Vue。當(dāng)然不同企業(yè)會有不同的需求,所選用的框架也不一樣,但只要你具備扎實(shí)的理論基礎(chǔ),就可以很快上手這些框架。
本文題目:前端html5框架,js+css+html5開發(fā)前端
鏈接URL:http://www.chinadenli.net/article44/dsgghee.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供營銷型網(wǎng)站建設(shè)、網(wǎng)站排名、關(guān)鍵詞優(yōu)化、網(wǎng)站收錄、標(biāo)簽優(yōu)化、品牌網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)