快速构建网站或移动端页面：关于Bootstrap的学习笔记

news/2024/5/12 20:20:03/文章来源:https://blog.csdn.net/weixin_37896608/article/details/90732633

最近在设计官网，并进行一些项目的原型设计和开发，寻找了很久，想找到一个更简单、快速的方式，基于一些已有的模板或框架进行快速建设，结果发现很多时间都是徒劳，走过的路分享给大家，以防再度踩坑：

网上搜索原型构建工具：包括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/