近年來，Web技術的發展速度快得讓人窒息，特別是最近幾年一代又一代的變革一次又一次的創造。各大巨頭又紛紛把技術轉向HTML5和CSS3，各種企業級框架如雨後春筍般湧現。

那麼今天就給大家介紹幾個在web界比較優秀的前端框架。

1.Bootstrap

Twitter出品的Bootstrap在業界是非常受歡迎的，以致於有很多前端框架都在其基礎上開發，如我們熟悉的WeX5就是在Bootstrap原始碼基礎上優化而來的。我相信大多數接觸過前端開發的同學多少都瞭解過這個優秀的前端框架。Bootstrap是基於HTML、CSS和Javascript的，它簡潔靈活，可以使得Web開發更加敏捷。

它提供優雅的HTML和CSS規範，在jQuery的基礎上進行更加個性化和人性化的完善。相容大部分jQuery外掛，幷包含了豐富的Web元件，如下拉選單、按鈕式下拉選單、導航條、按鈕組、分頁、縮圖、進度條和媒體物件等。自帶了13個jQuery外掛，其中有模式對話方塊、標籤頁、滾動條和彈出框等。

2.Foundation框架

Foundation框架總體來看要比Bootstrap略顯高大上一點，但他們倆的設計理念都是非常清楚的，Bootstrap有引導的意思，它嘗試處理你專案中的一切所需。Foundation有基礎、地基及支柱的意思，給你專案中強有力的創造與支援。相對於Bootstrap豐富的元件及外掛，Foundation僅提供了有限的幾種元素，其目標是，即使你使用預定義的UI元素，也不應該與大家的網站長得太像。

而Bootstrap則致力於提供所有定義好的元素，這樣使得看起來許多網站都差不多。Foundation預設不帶圖示集，它推薦使用開源字型圖示。與Bootstrap一樣，Foundation使用網格流式佈局將網頁劃分為12列，針對不同的裝置顯示不同的列數，實現響應式佈局。但Foundation不支援舊版本瀏覽器。其他特性如有興趣可進一步瞭解。

3.Curl

Curl 是一個命令列工具，用於通過 HTTP(s)、FTP 和數十種其它協議進行請求。使用Curl可以進行檔案下載、檢查響應標題和自由訪問遠端資料。

在 Web 開發中，Curl 經常和 RESTful API 一起使用，用於測試連線。 

# 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 命令可能比上述程式碼更復雜。有許多選項用於控制 headers、Cookie、身份驗證等。瞭解更多，請閱讀Everything curl。

4.Tree

Tree 是一個小型的命令列實用程式，它將目錄中的檔案以視覺化的方式進行顯示。它採用遞迴執行的方式，遍歷每個級別的巢狀並繪製所有內容的格式樹。這樣就能快速的瀏覽並查詢需要的檔案。

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 模式來過濾結果：

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

5.Tmux

根據維基的解釋，Tmux 是一個終端複用器。通俗的說，它是一個能將多個終端連線到單個終端會話的工具。

Tmux允許使用者在終端中的程式之間切換，新增螢幕窗格，並將多個終端連線到同一個會話，使其保持同步。在遠端伺服器上工作時，Tmux 特別有用，因為它允許使用者建立新的選項卡，而無需再次登入。

6.du

du命令用於生成關於檔案和目錄的空間使用情況的報告。du很容易使用，可以遞迴地執行，遍歷每個子目錄並返回每個檔案的大小。

du 的常見用例是：當某個驅動器的空間不足，使用者不清楚每個儲存器的大小。使用此命令可以快速檢視每個資料夾所佔用的儲存空間，從而找到佔用最大空間的儲存器。

7.AUI

AUI是最近流行起來的，作者聲稱是專為APIClound設計的一套框架，解決了許多移動端開發實際中遇到的許多問題，是一個純CSS框架。使用容器+佈局+模組的構建方式，JS輔助，更自由更靈活更易於擴充套件使用。遵循Google Material設計規範，完美適配各個機型。面向HTML5，使用CSS3實現動畫互動，輕量級高效能。AUI是使用MIT License授權，你可以複製、出售。目前最新版本2.0。

8.Amaze UI

這是稱為妹子UI的開源框架，據稱是中國首個開源HTML5跨屏前端框架。妹子UI以移動優先為理念，從小屏逐漸到大屏，實現響應式網頁。Amaze UI包含20+個CSS元件、20+個JS元件，更有多個包含不同主題的Web元件。相比國外框架，妹子UI關注中文排版提供本地化支援。面向HTML5開發，使用CSS3來實現動畫互動，輕量級高效能。

9.Frozen UI

Frozen UI是一款開源，簡單易用，輕量敏捷的移動端框架。基於手Q樣式規範，目前全面應用於企鵝手Q增值業務中。基礎樣式效果簡單色調清爽，社群活躍，元件自然不少。包括按鈕、列表、表單、通知、提示條、彈出框、選項卡等等常用元件。還包括一個FrozenJs的JS元件庫。可以在主流的Android和IOS上應用。基本樣式使用離線包的方式減少請求提供快速接入方案。當然，根據網友反映，也存在大大小小的bug。不過總體來說，還是值得一用的。奇怪的是，Github上顯示的最後更新時間是一年前，難道已經沒人維護了嗎？

# 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會返回有關可用磁碟空間的各種資訊。