整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
挑戰30天在頭條寫日記#
一般知道比較多的svg 或者canvas
Vue EasyFlow 和 Vue-Flowchart 都是用于在 Vue.js 前端應用中創建流程圖和工作流類應用的框架，但它們有一些不同之處。
Vue EasyFlow 是一個相對較新的開源框架，旨在簡化流程圖的創建和編輯。它提供了一些易于使用的組件和 API，使得在 Vue 應用中實現拖拽、連線和條件檢驗等功能更加方便。Vue EasyFlow的重點是提供簡潔而直觀的用戶界面和良好的交互體驗。
Vue-Flowchart 是一個較早的開源框架，也是一個基于 Vue.js 的工作流程圖庫。它提供了更多的功能和配置選項，例如支持多種節點類型、自定義節點樣式和事件處理。Vue-Flowchart 也有更多的用戶和社區支持，并且已經積累了一些豐富的文檔和示例。
選擇使用哪個框架取決于你的具體需求和項目要求。如果你需要一個簡單且易于上手的解決方案，并且對定制化和復雜功能的需求較少，Vue EasyFlow 可能是一個不錯的選擇。它提供了一個輕量級的流程圖編輯器，適用于簡單的流程圖應用。
如果你需要更多的靈活性、自定義選項和高級功能，以及更多的社區支持和文檔資源，那么 Vue-Flowchart 可能更適合你的需求。它具有更多的功能和配置選項，適用于需要更復雜流程圖應用的場景。
|劉雨潔、王與桐
編輯 |石亞瓊
封面來源｜IC photo
眼下，Webflow已經成為全球無代碼搭建平臺心中的“耶路撒冷”。
Webflow是一家專注于為設計師和開發人員提供無代碼建站和設計工具的美國軟件公司。自成立以來，Webflow一直致力于幫助用戶通過可視化界面快速創建專業網站，同時提供一系列強大的設計功能，如自定義布局、動畫效果、圖像處理等。
盡管成立于2012年，到今年也是“十年老店”了，但Webflow真正被大家認可價值，時間卻并不長。此前，Webflow一直以“篳路藍縷”的狀態創業，創始人Vlad Magdalin曾公開表示“我承擔的最大風險是負債累累”；甚至在2014~2016年移動互聯網繁榮期，還要不斷接受著來自資方的嘲諷。
這樣不被認可的狀態持續很久。直到去年，Webflow拿到了1.4億美元B輪融資，估值達到了21億美元，終于躋身獨角獸陣營。在今年，Webflow的價值進一步受到資本市場認可，3月，Webflow完成1.2億美元的C輪融資；11月，Webflow Conference大會舉辦，并上線更多功能，不少業內人士預測，在下一輪融資時，Webflow將躋身百億美金估值陣營。
近3年，Webflow的ARR增長十倍以上，同時擁有了來自190+國家數百萬的用戶和超過20萬的付費客戶，業內對Webflow的共同認知是，2022年，ARR將達到2億美金。
估值和ARR只能代表一部分商業價值，而Webflow早已在用戶價值層面得到了更多證明——在美國，會Webflow已經像會C++、Java一樣，值得被寫進簡歷里；早前已經出現了Webflow的Chrome插件……
總之，Webflow代表著是新一代的無代碼應用——如果說Airtable這類無代碼產品，更多是起到降本增效的效果，那么Webflow想要實現的，就是切實改變生產方式。
在我們分析Webflow是如何找對路徑成長成明星公司之前，先要回答，Webflow到底是做什么的？
簡單來說，就是想要搭建網站的人，通過Webflow，能夠在不編寫一行代碼的前提下，實現最接近“用代碼寫出來的”網站設計效果：本質是只需要拖拉拽就可以搭建出一個可交互的網站，而Webflow更大的優勢在于支持一鍵導出代碼。也就是說，不但是沒有編程能力的人可以把做網站變得像做PPT一樣簡單，有前端開發能力的人也完全可以把它作為一個專業化的平臺來使用，從而減少復雜的代碼工作。
沒有編程能力就能搭建網頁，聽起來就像不用走路就能移動一樣。
畢竟，在以往，一個網頁的誕生，要經過設計師和前端工程師兩個角色的共同打磨。就像一臺手術一樣，醫生和護士的配合不可或缺。但在上一代網頁開發主流環境中，開發的角色更像是醫生，一個不懂前端開發的設計師設計水平再高也不可能造出一個網站，但一個不懂設計的前端開發卻擁有獨立上線網站的能力，即使代價是：它可能會很丑。
一切的話語權，來源于數字化的發生基于非可視化的編碼過程。但無代碼的出現，使得專業角色的價值流動，隨著網頁開發的真正需求發生改變。
設計師，通過無代碼，也可以搭建出網頁。這就涉及到Webflow的亮點之一——留給設計師的審美空間。
在對Webflow進行相關采訪前，36氪預設了很多關于“Webflow究竟好在哪里”的回答，但最終在采訪時，大家首先會提到的并非是實用性、成本效益或效率方面，而是“Webflow更接近真正的前端開發，定制化空間非常大”。
定制化之于設計師來說，就像耦合性之于開發人員一樣，對“創造”這一維度的衡量尤為看重。就像我們在玩《我的世界》、《動森》等游戲時，最能延展樂趣和驅動我們長時間游玩的也是其家居建筑的高度可定制性。如果僅僅追逐效率和零門檻的“傻瓜式操作”，產品專業性上限就會變得很低，其“平民化”的代價有可能是得不償失的。
毫無疑問，Webflow在成立之初，相比同類可視化網頁編輯器，也曾受到過“不夠平民化”的質疑。由于學習門檻更高，也沒有像競品一樣內置大量的模版和預置好的樣式，Webflow從一開始就將用戶畫像縮小到了平面/UI設計師人群。而這一群體的工作，原本就不是在單一追求降本增效，而是創造審美價值，引領設計趨勢。
但幾年過后，Webflow的成功已經足以為我們證明，無論其他產品做得多么低門檻，甚至能讓市場營銷人員在3分鐘內做出一個可以上線的頁面，但在大多數工作和獨立項目中，網頁設計仍然是一項需要符合設計標準和趨勢的創造性工作，每一個組件和配色都對應著品牌標準和設計文檔中的信息。因此，事實上，對于新一代無碼化網頁設計工具來說，也只有設計師群體的口碑傳播，對于產品的價值增長，才能夠是指數級的。
總體來說，這是一個自上而下，從專業人群向大眾過渡的PLG（產品為導向增長）領域，只有吸引了活躍的設計師，讓他們自發地沉淀出自己的設計資產，并建立社群，才能夠讓更多人享有低成本、高效率的審美效果。
Webflow頁面
Webflow的Made In Webflow社區，在這里，你可以一鍵克隆其他設計師在Webflow上制作的網站或UI標準，并將其修改成自己的作品。
基于此，甚至對于很多初涉前端開發領域的UI/平面設計師來說，Webflow完全可以成為他們的啟蒙老師。
想要簡化網頁開發流程，讓更多有idea而沒有開發能力的人設計出網頁，Webflow并不是第一個，甚至此前，已經有不少人努力過了。自從“企業官網”的必要性深入人心，國人對大量分散的建站服務早已不陌生，而在這一代集成了電商、CMS功能的建站服務中，除了比Webflow顯露鋒芒更早的Spacesquare、Wix等，阿里云等云廠商也有配套云主機出售的網站編輯器。
而在海外市場，截至目前為止，針對各類用戶群體的無碼化建站仍然是最熱的創業賽道之一。一邊是Canva等受眾更廣的創意效率廠商正在大力布局，另一邊，國外最大的產品發現社區ProductHunt上幾乎每隔幾天就會誕生一個新的建站產品。而即便如此，目前大多數企業建站仍然會選擇傳統的前端開發方式：交給內部開發人員或者服務商去編碼。
企業的決策動線不難理解。首先，網站開發是一項結果導向性的業務，開發的過程究竟是可視化還是代碼化，對于企業來說沒有太大區別。而且，企業管理者很少能全面了解網站開發的細節，如果設計師拍著胸脯表示“我們公司只需要購買一套建站服務，就可以節省掉前端人員的成本”，那也就意味著設計師自身在應對企業建站需求時需要承擔的責任更重。而在目前的建站環境下，除了原生的前端開發之外，目前的無碼化工具，即使是最專業的Webflow，也很難做到完全解決某些“突如其來”的需求。
因此，相比產品發展到中后期才有可能實現爆發的企業服務，無碼化網頁設計工具前期所拓展的用戶勢必是大量的C端freelancer和設計師的獨立項目（如個人官網、作品集等）。在這一方面，Webflow想得很清楚，如果從一開始就做成了企業服務風格的建站工具，Webflow也許會成為下一個以定制化服務為主的公司，像諸多建站服務商一樣，圍繞著如電商賣家等一類固定類型的企業客戶，構建一體化平臺。
那么我們的科技世界就會少了一個讓無數設計師迸發出創造激情、專注于視覺本身的工具，又或者，最先跑通無碼化PLG的全球獨角獸就會花落別家。
從網站開發的進程來看，開發本身就一直在演進、發展，向著編寫更少的代碼進化，從最基本的純手工html編寫，到出現了React、VUE等靈活高效的JS框架，再到各個企業的設計團隊紛紛做出了適配這兩種主流框架的“開箱即用”的設計系統。如今，前端開發人員只需要輸入兩句命令行就能在本地生成一個簡潔的Web App（即一個可以搭配域名部署的網站），甚至可以直接請教AI如何編寫一些需求。
以流行的React設計框架Next.js為例，從上手到生成一個空白的Web App只需要一步。
就像是做飯不再需要從執行紙質菜譜開始，而是可以直接選購份量科學的調料包，放入料理機。更少的操作布局意味著更少的代碼，即前端開發本身就已經符合“低代碼”的趨勢：最早機器語言01，到匯編，再從匯編再到C再到C+再到Java再到Python，越來越簡單，代碼越來越少。
在這一趨勢下，近年來無代碼/低代碼開發的平臺和工具也越來越多，比如retool、universe等。
低代碼/無代碼產業圖譜
而前端網頁設計，涉及到上文提到的非常重要的定制化和審美因素，因此還有另一條平行演進的路線：可視化。
本地前端開發固然已經越來越便捷，也有大量的設計系統和實例可以直接使用，但可視化程度還是不夠高，尤其是在Web開發兩大痛點：模塊嵌套、獨立于html之外的CSS樣式文件部署之下，由于缺乏實時的可視化反饋，開發人員經常會寫著寫著就陷入“我現在是在寫什么”的狀態，從而需要刷新一下本地域名來重新確認。
談及Web開發可視化，上一代風靡全球的網頁設計軟件是WordPress，是世界上使用最廣泛的博客系統之一，是一款開源的PHP軟件。最初的版本上線于2003年，是為了順應博客時代每個人都想搭建自己博客的需求而誕生的。WordPress 因為使用者眾多，所以社區非常活躍，有豐富的插件模板資源。
從2010年左右開始，WordPress就不僅僅用于博客開發了，作為一款CMS，很多非博客網站也是用WordPress搭建的。目前，使用WordPress平臺的發行商約占全球網站的10%。而WordPress官方網站的每月獨立訪問用戶數則達到3億。
來源網絡
但是WordPress以博客建站為主，設計師可定制程度低，沒有統一的CMS接入方式，且前端頁面響應模式落后（與新一代建站工具最大的用戶體驗區別就是WordPress的頁面跳轉響應時間過長，且跳轉方式生硬）、不支持組件動態效果（而這一點恰恰是目前最流行的設計趨勢之一），因此盡管擁有最強大的插件市場，還是逐漸在被“Web App+動效靜態html”為代表的時代所淘汰。
后來，又出現了顛覆WordPress的產品，Wix與Squarespace，后二者主要解決電商時代獨立站頁面的搭建需求。
Wix頁面
盡管Wix與Squarespace這一類獨立站頁面搭建平臺也可以幫助大家可視化搭建頁面，但是他們只是在可視化單點上進行突破，且在電商系統上做得比Webflow更加強大、容易上手，其核心受眾明顯已經變成了電商賣家或市場營銷人員，不能稱之為是“為設計而生”的無碼化工具。未來，他們的主要對手或許會是Canva等更廣泛的創意服務商。
總體說來，Webflow的意義在于，它將代碼和可視化兩條進化交叉，作為接點，他是以往任何工具或平臺的降維打擊。
比如，Webflow的某一個付費功能點就是，搭建好的網頁，可以再以代碼形式進行導出，交給開發去完成、修正。從這個角度來看，Webflow就是一個以視覺形式幫助提升開發效率的開發工具，而其他建站工具只能支撐視覺效果，而單純的開發流程又要重復以往開發-設計的繁瑣循環。
不僅如此，Webflow的優勢還有很多，比如其云建站服務更為便捷，采用全托管的方式，作為對比，傳統html、JS、WordPress的開發者往往搭載于自購服務器與域名，需要具有一定的技術知識，且在一次新的deploy（部署）之后才能使用戶看到的頁面發生改變，對專注于視覺細節的設計師來說，操作流程極其冗雜。
另一個優勢也體現了Webflow的產品細節能力，同樣都是拖拉拽、所見即所得的頁面搭建方式，其他建站工具趨近于“做PPT”的體驗，Webflow卻包含完整的前端設計思維、能夠使頁面完全實現前端化，并在付費版本中支持html、CSS等代碼文件的導出。
Webflow編輯器
Webflow編輯器：可以看到右側可自定義的屬性元素與前端構建原理基本一致，并且有針對全局的CSS設置，下方狀態欄對應的是前端開發中最重要的模塊嵌套理念（可以理解成文件夾，在html代碼中每個閉合的就是一層嵌套）。
Wix編輯器
Wix編輯器：相對來說更適合沒有前端經驗的設計師/市場運營人員，把很多前端組件進行了不同樣式與風格的標準化，可以一鍵添加。
Squarespace編輯器
Squarespace編輯器：自定義方式更加簡單直觀，適合制作設計師/攝影師的portfolio個人官網，因此理念是以大量的頁面留白凸顯作品本身為主，頁面設計表現為輔。
WordPress下最流行的頁面設計插件Elementor的編輯器
WordPress下最流行的頁面設計插件Elementor的編輯器：與Wix類似，可以自由添加組件，基本可以實現想要的靜態視覺效果，但還是以接近PPT的方式設計與呈現，不包含CSS與前端思維，也不太支持前端動效。
總結而言，Webflow優勢可以概括為：
可視化界面：Webflow使用可視化界面，讓用戶通過拖放功能快速創建網站，而無需寫代碼。這對于那些不會編寫代碼的人來說，是一個巨大的優勢。
強大的設計功能：Webflow提供了一系列強大的設計功能，如自定義布局、動畫效果、圖像處理等，讓用戶能夠創建專業網站。
全面的教程和幫助資源：Webflow提供了豐富的教程和幫助資源，幫助用戶更好地了解如何使用該平臺。
先進的功能：Webflow不斷更新和改進其功能，以滿足用戶的不斷變化的需求。
廣泛的社區支持：Webflow有一個活躍的社區，可以為用戶提供幫助和支持。
相比于其他開發手段和網頁搭建工具，Webflow是屬于下一個時代的降維打擊產品。這或許也是市場和資本愿意買單的重要原因。
事實上，想要實現Webflow的這些降維打擊的功能點，說容易也容易，說難也難。
難是因為，在十年創業過程中，有無數次的壓力，迫使創始團隊不要做下去。
最初，難點來自于，Vlad Magdalin多年來一直想做一個類似Webflow的產品，所以當真的開始時，他處在用愛發電的階段——創業剛開始時，他甚至背負了三萬美元的信用卡債務。最初，Vlad Magdalin仍在intuit工作，用兼職時間完成Webflow的開發。2012年夏天，Vlad Magdalin拿著一萬美元離開了原來的公司，開始全職創業。也在這時，他說服了好兄弟Sergie的加入，而為了節省開支，Sergie搬進了Vlad Magdalin和妻子的公寓。
Webflow今年的資方YC，也曾在2012年讓Webflow倍感壓力。在2012年Webflow剛成立沒多久，就申請了YC當時的冬令營，但最終沒有通過。緊接著2013年又申請了YC的夏令營，當時他們做出了產品的第一版原型，并且在Hacker News上做了發布，有了幾萬用戶申請加入Beta測試版的等候名單。
而YC的擔心是，Webflow最終會因為產品對于非技術人員來說上手難度太高，對于技術人員來說又沒有太多價值，從而陷入一個進退兩難的尷尬境地，而導致失敗。不過好在，Webflow最終還是成功拿到了YC的夏令營Offer，成為了YC S13的一員。
但是這個擔心的確是必要的，因為不止Webflow，需要無代碼開發工具都面臨著這個問題。
其實在后來公司發展過程中，Webflow找了很多方式解決這個問題，比如錄制了非常多的培訓視頻，搭建了自己的社區供大家交流，不斷寫博客在幫助設計師上手的同時提高曝光量。
來源CEO的推特
而在2014~2018年，Webflow沒有拿到來自投資機構的錢。
據國內某創業者描述，在當時，Webflow創始團隊在見投資人前都要做好被罵“腦子有問題”的心理建設，因為時值移動互聯網的蓬勃發展期，所有創業團隊和風投機構都一股腦在押注APP，而Webflow還在卯著勁做網頁開發，并且對其未來堅信不疑——這當然會讓投資人產生懷疑。
而Webflow團隊之所以堅持相信網站設計的“未來價值”，主要原因可以分為三點。
其一，Webflow自身的定位是給企業或者個人提供“展示型”網站，這一類網站的價值停留在信息輸出和視覺交互，而不會成為一個像微信一樣的功能型App。
其二，硅谷投資人昔日對于App“全面代替網站”的過高期望，是基于對當下技術與移動設備生態機制的不確定預估。目前來講，雖然也已經有一些支持一鍵多設備尺寸配置的App開發服務初露鋒芒，但App開發整體來說成本較高，設備兼容測試與商店審核都需要時間，且除了娛樂、社交等功能性領域及體量較大的信息載體（如36氪App）之外，大多數的展示型網站，比如企業官網等，完全沒有被做成App的價值。此外，盡管大多數的生產力工具和效率軟件都在實現“云化”，但以網頁形式呈現的Web App，比移動端App更加便于實現敏捷開發。同時，電腦比手機更適合專業、復雜的生產工作，目前為止還是人類數字進程中不可撼動的事實。
最后，用戶的需求也在近些年發生變化，對于App的需求不再旺盛。在移動互聯網蓬勃期，隨著智能手機和4G的普及，用戶對于在手機上完成各種功能抱有極高的熱情，然而隨著熱情冷卻，以及用戶對于“雁過無痕”的個人信息保護意識的加強，越來越多的App不再具備吸引力。這從近些年App拉新成本越來越高就可見一斑。當用戶對于App的新鮮感冷卻，手機屏幕尺寸限制在某些需求和功能上的掣肘就暴露了出來。其中，作為視覺藝術的一環，專業的網頁設計所體現的審美趨勢就很難在手機上完整表達：在很多網站進行響應式設計（針對移動端做尺寸適配）時，會選擇將復雜的模塊和動畫效果隱藏掉。
綜上所述，當移動互聯網的浪潮緩慢退去，網頁開發卻再度成為主流——沒有任何一家企業不想有自己的官網，也沒有一個設計師不想通過獨樹一幟的風格傳達創造的價值，而不必囿于iOS等系統生態對于App界面的單一化風格限制。
Webflow的價值也在App熱潮冷卻的過程中逐漸體現。
因為融資不利，Webflow只能不停尋找商業化方法。在2013年，Webflow加入YC時，就已經有了2萬個初始注冊——但，其中只有大約50名付費會員。“當時的轉化率非常令人失望。”Vlad Magdalin表示。
Webflow下定決心要讓付費用戶滿意。所以第一件事，就是建立了上文提到的社區，三位創始人在早期每天都要花幾個小時回答問題、支持請求。
在付費客戶滿意后，下一步是如何獲得更多付費客戶。Webflow把目光投向了SEO。Webflow在內容方面主要會有5種類型，分別是University（教程）、Blog（博客）、Customers（客戶故事）、Ebooks（電子書）和Community（社區），而其中Blog的文章，在SEO優化上很關鍵的部分在于聚焦在長尾（long-tail）關鍵詞，這也意味著更小的競爭壓力和更精準的目標客群。
“人人都是產品經理”曾提到，以《8 best cheap domain registrars compared and reviewed（ https://webflow.com/blog/cheap-domains 》這篇文章為例，根據Fundation的數據表明，每個月有1600多人會在Google搜索“cheapest domain registrations”這個關鍵詞，而這些人的目的很明確的，就是想要購買便宜的域名，而購買了域名之后，很自然，下一步就是搭建網站了，那或許對于Webflow就會有需求。
因此Webflow很好地利用了這篇文章吸引到了這批精準的用戶，并通過在文章中插入CTA（Call-To-Action）模塊的方式，引導用戶注冊轉化。
結果還不錯，從數據上看Webflow通過SEO每月可以吸引接近100萬的流量并產生130萬美元的有機收入。
圖源網絡
Webflow在3年內，通過社區和SEO，沒有花一分錢在營銷上，就獲取了100萬用戶、營收突破一千四百萬。
通過社區可以源源不斷用UGC的方式產出內容，而這些內容又給SEO提供了源源不斷的素材和動力，從而形成了自增長的飛輪。
圖源網絡
這樣的數據，足以讓投資人動心。在被用戶市場認可后，Webflow也再度被一級市場所認可。
不過，盡管此刻風頭無兩，Webflow也還存在著一些問題。比如，目前來看，Webflow面臨著和WordPress類似的問題，受眾很窄，如果不繼續改進，就會導致增長瓶頸明顯。
首先，挑戰傳統和權威，道阻且長。目前，除了設計師的portfolio以及一些產品的landing page之外，主流前端開發由于需要結合大量的函數變量和數據庫功能，仍然是以React、VUE為代表的Javascript為主，開發流程為：UI設計師通過Figma、MasterGo、即時設計等原型設計工具畫頁面，通過插件標注或直接導出html和CSS代碼給前端工程師，前端工程師寫JS完成可視化效果，并接入后端數據庫，在此過程中為市場運營人員留出信息上傳的。在此過程中，自購云服務器部署+自購域名仍然是主流選擇。
尤其是在“權威”也在不斷優化自身的情況下。如前文所述，Web開發本身就在變得越來越簡單，且UI設計師的“職業自救”意識很強，不斷擴充技能，都在向具有一定代碼能力的前端開發轉型。相比Web開發的開源環境，Webflow在定價劣勢的情況下，未來的用戶定位可能會被進一步縮小，從網頁設計師變為“對前端開發不熟練的初級網頁設計師”，屆時局面將陷入被動。
當前，國內也存在幾家對標Webflow的公司，比如Zion、towify、Dora等。這幾家公司成立時間相差不大，目前也有各自擅長的領域。相比Webflow的大器晚成，也許他們的入局時機更為穩妥。
整體來看，中國無代碼網頁開發，和美國市場有一個較大的差別，就是中國的小程序開發正如火如荼。從今年騰訊第三季度數據來看，微信端小程序超過700萬，小程序日活達到了6億，因此，圍繞小程序的無代碼開發，是國內相關廠商努力的重點方向。
不過，對這些國內公司來說，盡管有著確定的方向，但是前進過程，不僅會面臨這Webflow面臨過和面臨中的困難，還要面對中國本土市場對于無代碼搭建熱情不高的大背景。
無論如何，我們可以確定的是，未來，越來越多的前端工程師，會被設計師或者有只是有網頁開發idea的人取代。在任何國家，都會如此。
程序員大前端送干貨Web前端開發框架匯總，其實一個前端開發框架其實就是一系列產品化的HTML/CSS/JavaScript組件的集合，我們可以在設計中使用它們。前端開發框架有很多，其中有一些寫得很棒。為了讓大家看的更明白，下文列舉了目前應用最廣泛的幾款前端開發框架。記住，這些框架并不僅僅是CSS 柵格之類的一些東西，它們包括的是整套的前端開發框架。
一、Bootstrap
Boostrap絕對是目前最流行用得最廣泛的一款框架。它是一套優美，直觀并且給力的Web設計工具包，可以用來開發跨瀏覽器兼容并且美觀大氣的頁面。它提供了很多流行的樣式簡潔的UI組件，柵格系統以及一些常用的JavaScript插件。
Bootstrap是用動態語言LESS寫的，主要包括四部分的內容：
腳手架——全局樣式，響應式的12列柵格布局系統。記住Bootstrap在默認情況下并不包括響應式布局的功能。因此，如果你的設計需要實現響應式布局，那么你需要手動開啟這項功能。
基礎CSS——包括基礎的HTML頁面要素，比如表格(table)，表單(form)，按鈕(button)，以及圖片(image)，基礎CSS為這些要素提供了優雅，一致的多種樣式。
組件——收集了大量可以重用的組件，如下拉菜單(dropdowns)，按鈕組(button groups)，導航面板(navigation control)——包括：tabs,pills,lists標簽，面包屑導航(breadcrumbs)以及頁碼(pagination)，縮略圖(thumbnails)，進度條(progress bars)，媒體對象(media objects)等等。
JavaScript——包括一系列jQuery的插件，這些插件可以實現組件的動態頁面效果。插件主要包括模態窗口(modals)，提示效果(tool tips)，“泡芙”效果(popovers)，滾動監控(scrollspy)，旋轉木馬(carousel)，輸入提示(typeahead)，等等。
Bootstrap已經足夠強大，能夠實現各種形式的 Web 界面。為了更加方便地利用Bootstrap進行開發，很多工具和資源可以用來配合使用，下面列舉了其中的一部分工具和資源。
jQuery UI Bootstrap —— 對于jQuery和Bootstrap愛好者來說這是個非常好的資源，能夠把 Bootstrap的清爽界面組件引入到jQuery UI中。
jQuery Mobile Bootstrap Theme —— 和上面提到的jQuery UI主題類似，這是一個為jQuery Mobile建立的主題。如果你想讓用Bootstrap開發的網站在手機端也可以優雅訪問，那么這個資源對你來說很方便易用。
Fuel UX —— 它為Bootstrap添加了一些輕量的JavaScript控件。Fuel UI 安裝，修改，更新以及優化都很簡單方便。
StyleBootstrap.info —— Bootstrap提供了自己的幾種界面風格，StyleBootstrap提供了更多的配色選項，并且你可以給每個組件都應用不同的配色。
BootSwatchr —— 利用這個工具你可以立刻查看主題修改后的效果。對于每一次變動的效果，這個應用都會生成一個唯一的URL方便你與他人分享，你也可以在任意時刻修改你的主題。
Bootswatch —— 提供大量免費的Bootstrap主題。
Bootsnipp —— 在線前端框架交互組件制作工具，是一個供給設計師和開發者的基于Bootstrap HTML/CSS/JavaScript 架構的免費元素。
LayoutIt —— 通過界面拖放生成器簡便快捷地創建基于Bootstrap的前端代碼。通過拖放動作將Bootstrap風格的組件加入到你的個人設計里并且可以方便地修改他們的屬性，簡單便捷。
二、Fbootstrapp
Fbootstrapp基于Bootstrap并且提供了跟Facebook iframe apps和設計相同的功能。包含用于所有標準組件的基本的CSS和HTML，包括排版、表單、按鈕、表格、柵格、導航等等，風格與Facebook類似。
三、BootMetro
BootMetro框架的靈感來自于Metro UI CSS，基于Bootstrap 框架構建，用于創建Windows 8 的Metro風格的網站。它包括所有Bootstrap的功能，并添加了幾個額外的功能，比如頁面平鋪，應用程序欄等等。
四、Kickstrap
Kickstrap是Bootstrap的一個變體。它基于Bootstrap，并在它的基礎上添加了許多app，主題以及附加功能。這使得這個框架可以單獨地用于構建網站，而不需要額外安裝什么。你需要做的僅僅是把它放到你的網站上，然后用就可以了。
App 是一些頁面加載完成之后加載運行的JavaScript和CSS打包文件。默認加載的app有Knockout.js, Retina.js, Firebug Lite, and Updater，你也可以自行添加更多的app。
選擇不同的主題可以讓你的網站在眾多Bootstrap構建的類似網站中顯得與眾不同。
附加功能是一些用來擴展Bootstrap UI 庫的附件，它們的語法基本相同或者相似。
五、Foundation
Foundation 是一款強大的，功能豐富的并且支持響應式布局的前端開發框架，你可以通過Foundation快速創建原型，利用它所包含的大量布局框架，元素以及最優范例快速創建在各種設備上可以正常運行的網站以及app。Foundation在構建的時候秉承移動優先的策略，它擁有大量實用的語義化功能，并且使用Zepto類庫來取代jQuery，這樣可以帶來更好的用戶體驗，并且提高運行的速度。
Foundation擁有一套12列的靈活可嵌套的網格系統，你可以用它快速創建適應多種瀏覽設備的布局。它有很多的功能。它定義了很多的樣式，比如字體排版，按鈕，表單，以及多種多樣的導航控件。它也提供了很多的CSS組件，例如操作面板(panels)，價格表(price tables)，進度條(progress bars)，表格(tables)以及可以適應不同設備的可伸縮視頻(flex video)。與此同時，Foundation還包括了很多的JavaScript插件，如下拉菜單(dropdowns)，joyride(網站功能引導插件)，magellan(網站固定導航插件)，orbit(支持觸摸的響應式圖片輪播插件)，reveal(彈出框插件)，sections(強大的tab插件)以及tooltips(工具提示)等。
Foundation框架還提供了很多有用的擴展。
模板(Stencils)——Foundation框架中的所有UI元素都有Omnigraffle stencils以及矢量PDF兩種格式的下載，你可以用它們來方便快捷的繪制線框圖和原型圖。
HTML模板 —— HTML模板可以方便地用來快速創建頁面布局。你所要做的僅僅是復制得到模板代碼，然后丟到頁面的標簽之間就好了。
圖標字體(Icon Fonts) —— 包含自定義圖標的一種網頁字體。
SVG 社交網絡圖標(Social Icons)—— 一組不依賴分辨率的社交網絡圖標(可縮放矢量圖標)。
響應式表格——Foundation框架中響應式表格的實現機制是固定表格的左邊第一列，然后表格的其他列可以通過滾動條拖拉進行訪問。
關閉帆布布局(Off-Canvas Layouts)—— 這些布局可以允許一些網頁內容或者導航控件在移動端設備上默認隱藏，當瀏覽屏幕變大或者用戶進行相應操作的時候這些內容再出現。當用戶進行相關操作的時候，網頁內容或者導航控件將會滑動出現。
如你所見，對于Web開發者以及設計師來說，Foundation就像是一個巨大的寶藏。在下載框架的時候，你可以自定義下載框架的內容。
六、GroundworkCSS
GroundworkCSS 是前端框架家族里面新添的一款小清新框架。它是基于Sass和Compass的一個高級響應式的HTML5，CSS以及JavaScript工具包，可以用于快速創建原型并且建立在各種瀏覽設備上可以正常工作的網站和app。
GroundworkCSS擁有一個靈活，可嵌套的流式網格系統，方便你創建任何布局。這個框架有很多讓人印象深刻的功能，比如在平板以及移動端上的網格系統，當屏幕的寬度小于768或者480像素時，頁面中原本并列排版的表格列(grid column)會自動變為獨立的行，而不是折疊在一起。另一個很酷的功能是jQuery的響應式文本(ResponsiveText)插件，這個插件可以動態調整頁面文字的大小以適應瀏覽設備的屏幕大小。這個插件對于可伸縮的標題以及創建響應式表格的時候特別有用。
GroundworkCSS包含了大量的UI組件，如tabs、響應式數據表格導航、按鈕、表單、響應式導航控件、tiles(一套替代radio按鈕以及其他默認表單元素的優雅組件)、工具提示、對話框、Cycle2(一款強大的，響應式的內容滑塊)以及其他很多的有用組件。它還提供了很多矢量社交網絡圖標以及圖標字體。
你可以通過切換頁面上方的導航按鈕選擇不同的瀏覽設備要來查看這款框架的效果。通過這種方式，你可以測試在不同的瀏覽設備上各種組件的響應式布局情況。
GroundworkCSS的文檔寫的非常好，并且包含著很多的示例，為了讓你更快的上手，他還提供了多種響應式的模板。對于這款框架，唯一我可以想到的缺點就是不能自定義要下載的框架內容。
七、Gumby
Gumby 是一款基于Sass和Compass的簡單靈活并且穩定的前端開發框架。
它的流式-固定布局(fluid-fixed layout)可以根據桌面端以及移動設備的分辨率自動優化要呈現的網頁內容。它支持多種網格布局，包括多列混雜的嵌套模式。Gumby提供兩套PSD的模板，方便你在12列和16列的網格系統上進行設計。
Gumby提供了一個功能豐富的UI工具包，包括按鈕，表單，移動端導航，tabs，跳轉鏈接(skip links)，撥動開關(toggles and switches，可以方便快捷地切換元素的class，而不需要進行額外的js操作)，抽屜功能(drawers)，響應式圖片以及retina圖片等等。為了緊跟最近的設計潮流，Gumby的UI元素中還包括了Metro風格的扁平化設計，你也可以用Pretty風格的漸變設計，或者按照你的想法糅合兩種設計風格。該框架還提供了一套出眾的響應式，擁有獨立分辨率的Entypo圖標，你可以在自己的Web項目中盡情使用。
Gumby有一個很好自定義下載選擇器，你可以自行配置各個組件的顏色，并且按自己的需求方便地下載。
八、HTML KickStart
HTML Kickstart 是一款可以用來方便創建任何布局的集合HTML5，CSS和jQuery的工具包。它提供了干凈，符合標準以及跨瀏覽器兼容的代碼。
這款框架提供了多種樣式表，包括網格，排版，表單，按鈕，表格，列表以及一些跨瀏覽器兼容的Web組件比如JavaScript的幻燈片功能，tabs，面包屑導航，包含子菜單的菜單以及工具提示等等。
你可以使用99Lime UIKIT提供的UI組件來搭建你的產品線框圖。
九、IVORY
IVORY 是一款輕量，簡單但是強大的前端框架，可以用于320到1200像素寬度的響應式布局。它基于12列的響應式網格布局，包含表格，按鈕，表格，分頁，撥動開關，工具提示，手風琴，選項卡等網站中常用的組件和樣式。
當你需要一款輕量靈活，不需要額外的其他功能，并且適應不同瀏覽設備的框架時，IVORY是你最好的選擇。
十、Kube
最后，如果你的新項目需要一款實在的，不需要復雜的額外功能組件的，足夠簡單的框架，那么 Kube 將會是你正確的選擇。Kube是一款最小化的，支持響應式的前端框架，它沒有強加的樣式設計，因此給了你充分的自由來開發自己的樣式表。它提供了一些Web元素的基本樣式，比如網格，表單，排版，表格，按鈕，導航，鏈接以及圖片等等。
Kube框架包括一個簡潔的CSS文件用于方便地創建響應式布局，還包括了兩個JS文件來完成tab以及頁面的按鈕操作。如果你希望得到Kube最大化的靈活性以及個性化定制，那么你可以下載開發者版本(developer version)，這個版本包括了LESS文件(包括各種變量，mixins以及模塊)。
希望本篇文章能夠對正在從事Web前端工作的小伙伴們有所幫助。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
