最近在設計官網，并進行一些項目的原型設計和開發，尋找了很久，想找到一個更簡單、快速的方式，基于一些已有的模板或框架進行快速建設，結果發現很多時間都是徒勞，走過的路分享給大家，以防再度踩坑：

網上搜索原型構建工具：包括WEB、APP（統稱為移動端，包括Android和IOS），發現有國內外的現成工具，其中大致分析如下：

1、飛冰：ICE 或iceworks， 阿里家的前端圖形化一鍵工具，有現成的模板、插件、物料庫，很豐富，主要偏向于后臺的界面搭建，且只能把核心的業務畫面操作完成，后續如果需要研發時，則會出現一些架構上的調整，嘗試了下，以非前端專業出身的角度來看，不夠簡單，只能達到部分需求

2、Element 2.9 Fullerene： 網站快速成型工具。Element，一套為開發者、設計師和產品經理準備的基于 Vue 2.0 的桌面端組件庫，查看了官網，很簡單的介紹，沒有詳細的模板或是資源，操作方式也 沒有十分明確的寫明，對于一個非前端專業出身來說，看不懂，只能放棄

3、UI Leader http://www.uileader.com/ 是一家前端解決方案領導者，有WeTouch移動云平臺、QuickUI 4.0、Quick V等幾款產品，做的都很不錯，其中WeTouch 移動云平臺是APP、小程序、H5 的一站式解決方案，目前的客戶也比較多，多是企業級客戶，分免費和收費版本，看了下，因之前沒學過專業的jquery技術，所以只是基于存量的認知，感覺學習成本太高，所以放棄

4、Axure RP、Mockplus、Justinmind、墨刀等目前來看，對于WEB、APP都支持，但在移動互聯網的時代，都更偏向于移動APP的原型設計，其中Axure RP和Justinmind屬于國外的產品，Mockplus和墨刀屬于國內的產品，均各自都有優勢，但側重點不同，下文有相關介紹，感興趣的可以看下：

https://blog.csdn.net/jongde1/article/details/53128397

最后總結

個人感覺，去年有用過墨刀做APP原型，學習成本不高，上手比較簡單，已有一些現場的參考項目，可以直接使用，但不是所有功能都可用，而xiaopiu為最近一段時間接觸比較多的，網上評論也比較好，個人試用后，感覺比墨刀、mockplus做的好一些，有更多的國內外的參考模板，并支持組件、頁面、項目等級別的范例創建或引入，比較方便

另外今年的產品中，普遍都增加的RPD的協作功能，在原型設計的同步，能更方便的把產品原型文檔產出，確實很方便。

結合這段時間的經歷和思考，確定在網站、后臺系統、移動APP等方面的原型設計，目前來看沒有辦法使用一個工具全部搞定，想想也是，小而美，每塊都選擇適合自己的才是王道，大致確定下來的技術選型原則如下：

前臺網站：

Bootstrap 4.X 來設計，并從網上搜索Bootstrap Template，作為物料庫（模板庫），然后使用SubLime Text2進行編輯，因為是新網站，所以建議用Bootstrap最新的版本，此版本已有很多新特性，且相信未來會更加流行，關于Bootstrap相關介紹鏈接：
Bootstrap 4.X介紹
https://v4.bootcss.com/
Sass相關介紹
https://www.sasscss.com/
Bootstrap4的示例項目
https://getbootstrap.com/docs/4.0/examples/
基于Bootstrap進行網站開發的慕課視頻
http://www.imooc.com/learn/182
Bootstrap 3和4的對比
https://blog.csdn.net/weixin_42041193/article/details/81068002

Bootstrap Template的免費資源下載鏈接：（已驗證，確實可免費下載）

https://startbootstrap.com/templates/

https://themehunt.com/items/popular

https://colorlib.com/wp/themes/

后臺系統：

Gitee上的開源項目：

jeesite4、renren-fast、renren-fast-vue、renren-security，后三個都屬于renren的，比較簡單，且界面簡潔

對應的Gitee鏈接如下：
https://gitee.com/thinkgem/jeesite4

https://gitee.com/renrenio/renren-fast

https://gitee.com/renrenio/renren-fast-vue

https://gitee.com/renrenio/renren-security

移動APP：

xiaopiu，可以免費創建10個項目，并建立自己的頁面庫、組件庫、項目庫等，方便后續做資源復用

https://www.xiaopiu.com/feature

以上，分享給大家，謝謝

另外打個廣告：

阿里云云產品優惠券和打折券：

https://chuangke.aliyun.com/invite?userCode=

我的域名米店，已上架200多個域名：

https://mi.aliyun.com/shop/38495

總結

以上是生活随笔為你收集整理的快速构建网站或移动端页面：关于Bootstrap的学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。