上一篇文章奴饮，介紹了幾個(gè)比較優(yōu)秀的Javascript框架或庫(kù)纬向，今天將介紹幾個(gè)同樣在web界比較優(yōu)秀的前端框架。近年來(lái)戴卜，Web技術(shù)的發(fā)展速度快得讓人窒息逾条，特別是最近幾年一代又一代的變革一次又一次的創(chuàng)造。各大巨頭又紛紛把技術(shù)轉(zhuǎn)向HTML5和CSS3投剥，各種企業(yè)級(jí)框架如雨后春筍般涌現(xiàn)师脂。

在這里我還是要推薦下我自己建的web前端開發(fā)學(xué)習(xí)群：731669587，群里都是學(xué)web前端開發(fā)的江锨，如果你正在學(xué)習(xí)前端 吃警，小編歡迎你加入，今天分享的這個(gè)案例已經(jīng)上傳到群文件啄育，大家都是軟件開發(fā)黨酌心，不定期分享干貨（只有前端軟件開發(fā)相關(guān)的），包括我自己整理的一份2018最新的前端進(jìn)階資料和高級(jí)開發(fā)教程灸撰，歡迎進(jìn)階中和進(jìn)想深入前端的小伙伴谒府。

1、Bootstrap

估計(jì)在看到文章標(biāo)題時(shí)浮毯，很多人都已經(jīng)猜到了Bootstrap必在此列。之所以將Bootstrap放在前面泰鸡，是因?yàn)槟壳拔艺陧?xiàng)目中使用它债蓝。不錯(cuò)，Twitter出品的Bootstrap在業(yè)界是非常受歡迎的盛龄，以致于有很多前端框架都在其基礎(chǔ)上開發(fā)饰迹，如我們熟悉的WeX5就是在Bootstrap源碼基礎(chǔ)上優(yōu)化而來(lái)的。我相信大多數(shù)接觸過前端開發(fā)的同學(xué)多少都了解過這個(gè)優(yōu)秀的前端框架余舶。Bootstrap是基于HTML啊鸭、CSS和Javascript的，它簡(jiǎn)潔靈活匿值，可以使得Web開發(fā)更加敏捷赠制。它提供優(yōu)雅的HTML和CSS規(guī)范，在jQuery的基礎(chǔ)上進(jìn)行更加個(gè)性化和人性化的完善挟憔。兼容大部分jQuery插件钟些，并包含了豐富的Web組件烟号，如下拉菜單、按鈕式下拉菜單政恍、導(dǎo)航條汪拥、按鈕組、分頁(yè)篙耗、縮略圖迫筑、進(jìn)度條和媒體對(duì)象等。自帶了13個(gè)jQuery插件宗弯，其中有模式對(duì)話框铣焊、標(biāo)簽頁(yè)、滾動(dòng)條和彈出框等罕伯。

2曲伊、Foundation框架

Foundation框架總體來(lái)看要比Bootstrap略顯高大上一點(diǎn)，但他們倆的設(shè)計(jì)理念都是非常清楚的追他，Bootstrap有引導(dǎo)的意思坟募，它嘗試處理你項(xiàng)目中的一切所需。Foundation有基礎(chǔ)邑狸、地基及支柱的意思懈糯，給你項(xiàng)目中強(qiáng)有力的創(chuàng)造與支持。相對(duì)于Bootstrap豐富的組件及插件单雾，F(xiàn)oundation僅提供了有限的幾種元素赚哗，其目標(biāo)是，即使你使用預(yù)定義的UI元素硅堆，也不應(yīng)該與大家的網(wǎng)站長(zhǎng)得太像屿储。而Bootstrap則致力于提供所有定義好的元素，這樣使得看起來(lái)許多網(wǎng)站都差不多渐逃。Foundation默認(rèn)不帶圖標(biāo)集够掠，它推薦使用開源字體圖標(biāo)。與Bootstrap一樣茄菊，F(xiàn)oundation使用網(wǎng)格流式布局將網(wǎng)頁(yè)劃分為12列疯潭，針對(duì)不同的設(shè)備顯示不同的列數(shù)，實(shí)現(xiàn)響應(yīng)式布局面殖。但Foundation不支持舊版本瀏覽器竖哩。其他特性如有興趣可進(jìn)一步了解。

3

3.Curl 是一個(gè)命令行工具脊僚，用于通過 HTTP(s)相叁、FTP 和數(shù)十種其它協(xié)議進(jìn)行請(qǐng)求。使用Curl可以進(jìn)行文件下載、檢查響應(yīng)標(biāo)題和自由訪問遠(yuǎn)程數(shù)據(jù)钝荡。

在 Web 開發(fā)中街立，Curl 經(jīng)常和 RESTful API 一起使用，用于測(cè)試連接埠通。

# Fetch the headers of a URL.curl -I http://google.comHTTP/1.1 302 FoundCache-Control: privateContent-Type: text/html; charset=UTF-8Referrer-Policy: no-referrerLocation: http://www.google.com/?gfe_rd=cr&ei=0fCKWe6HCZTd8AfCoIWYBQContent-Length: 258Date: Wed, 09 Aug 2017 11:24:01 GMT# Make a GET request to a remote API.curl http://numbersapi.com/random/trivia29 is the number of days it takes Saturn to orbit the Sun.

Curl 命令可能比上述代碼更復(fù)雜赎离。有許多選項(xiàng)用于控制 headers、Cookie端辱、身份驗(yàn)證等梁剔。了解更多，請(qǐng)閱讀Everything curl舞蔽。

4.Tree

Tree 是一個(gè)小型的命令行實(shí)用程序荣病，它將目錄中的文件以可視化的方式進(jìn)行顯示。它采用遞歸運(yùn)行的方式渗柿，遍歷每個(gè)級(jí)別的嵌套并繪制所有內(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

還可以使用簡(jiǎn)單的 regEx 模式來(lái)過濾結(jié)果：

tree -P '*.min.*'.├── css│ ├── bootstrap.min.css├── fonts└── js └── bootstrap.min.js

5根據(jù)維基的解釋朵栖，Tmux 是一個(gè)終端復(fù)用器颊亮。通俗的說，它是一個(gè)能將多個(gè)終端連接到單個(gè)終端會(huì)話的工具陨溅。

Tmux 允許用戶在終端中的程序之間切換终惑，添加屏幕窗格，并將多個(gè)終端連接到同一個(gè)會(huì)話门扇，使其保持同步雹有。在遠(yuǎn)程服務(wù)器上工作時(shí)，Tmux 特別有用臼寄，因?yàn)樗试S用戶創(chuàng)建新的選項(xiàng)卡霸奕，而無(wú)需再次登錄。

6.du

du 命令用于生成關(guān)于文件和目錄的空間使用情況的報(bào)告脯厨。du很容易使用铅祸，可以遞歸地運(yùn)行，遍歷每個(gè)子目錄并返回每個(gè)文件的大小合武。

du 的常見用例是：當(dāng)某個(gè)驅(qū)動(dòng)器的空間不足，用戶不清楚每個(gè)存儲(chǔ)器的大小涡扼。使用此命令可以快速查看每個(gè)文件夾所占用的存儲(chǔ)空間稼跳，從而找到占用最大空間的存儲(chǔ)器。

AUI

AUI是最近流行起來(lái)的吃沪，作者聲稱是專為APIClound設(shè)計(jì)的一套框架汤善，解決了許多移動(dòng)端開發(fā)實(shí)際中遇到的許多問題，是一個(gè)純CSS框架。使用容器+布局+模塊的構(gòu)建方式红淡，JS輔助不狮，更自由更靈活更易于擴(kuò)展使用。遵循Google Material設(shè)計(jì)規(guī)范在旱，完美適配各個(gè)機(jī)型摇零。面向HTML5，使用CSS3實(shí)現(xiàn)動(dòng)畫交互桶蝎，輕量級(jí)高性能驻仅。AUI是使用MIT License授權(quán)，你可以復(fù)制登渣、出售噪服。目前最新版本2.0。

7胜茧、Amaze UI

第四個(gè)是稱為妹子UI的開源框架粘优，據(jù)稱是中國(guó)首個(gè)開源HTML5跨屏前端框架。妹子UI以移動(dòng)優(yōu)先為理念呻顽，從小屏逐漸到大屏雹顺，實(shí)現(xiàn)響應(yīng)式網(wǎng)頁(yè)。Amaze UI包含20+個(gè)CSS組件芬位、20+個(gè)JS組件无拗，更有多個(gè)包含不同主題的Web組件。相比國(guó)外框架昧碉，妹子UI關(guān)注中文排版提供本地化支持英染。面向HTML5開發(fā)，使用CSS3來(lái)實(shí)現(xiàn)動(dòng)畫交互被饿，輕量級(jí)高性能四康。

8、Frozen UI

Frozen UI是一款開源狭握，簡(jiǎn)單易用闪金，輕量敏捷的移動(dòng)端框架÷勐基于手Q樣式規(guī)范哎垦，目前全面應(yīng)用于企鵝手Q增值業(yè)務(wù)中∈逊瑁基礎(chǔ)樣式效果簡(jiǎn)單色調(diào)清爽漏设，社區(qū)活躍，組件自然不少今妄。包括按鈕郑口、列表鸳碧、表單、通知犬性、提示條瞻离、彈出框、選項(xiàng)卡等等常用組件乒裆。還包括一個(gè)FrozenJs的JS組件庫(kù)套利。可以在主流的Android和IOS上應(yīng)用缸兔∪杖梗基本樣式使用離線包的方式減少請(qǐng)求提供快速接入方案。當(dāng)然惰蜜，根據(jù)網(wǎng)友反映昂拂，也存在大大小小的bug。不過總體來(lái)說抛猖，還是值得一用的格侯。奇怪的是，Github上顯示的最后更新時(shí)間是一年前财著，難道已經(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

還有一個(gè)相似的命令 df（Disk Free），使用df會(huì)返回有關(guān)可用磁盤空間的各種信息

最后在對(duì)前端程序員提點(diǎn)建議：

學(xué)習(xí)前端書籍自然不可少撑教，這里給大家推薦《html 5與 css 3權(quán)威指南》朝墩，雖然主要是講解html5+css3，但倒也是一本好的入門書籍伟姐。該書比較系統(tǒng)收苏，覆蓋面也比較廣。技術(shù)新穎愤兵，所有知識(shí)點(diǎn)都緊跟 html 5與css 3的最新發(fā)展動(dòng)態(tài)（html 5和css 3仍在不斷完善之中）鹿霸；也有比較強(qiáng)的實(shí)戰(zhàn)性（包含246個(gè)示例頁(yè)面），不僅每個(gè)知識(shí)點(diǎn)都配有精心設(shè)計(jì)的小案例（便于動(dòng)手實(shí)踐）秆乳，配合案例懦鼠，也比較生動(dòng)有趣。該書不僅能滿足你全面而系統(tǒng)地學(xué)習(xí)理論知識(shí)的需求屹堰，還能滿足你需要充分實(shí)踐的需求肛冶。