开发者社区> 怡泽堂堂主> 正文

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

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

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

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

以上,分享给大家,谢谢

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Jetstrap 在线构建 Bootstrap 的工具
Jetstrap 是一个 100% 基于 Web 的 Twitter Bootstrap 构建工具,无需下载软件,只需登录并构建即可。并且别人可以访问你构建的产品。
693 0
bootstrap 组件之 进度条 滚动监控 旋转加载 消息推送框 组件学习总结
bootstrap 组件之 进度条 滚动监控 旋转加载 消息推送框 组件学习总结
39 0
bootstrap 组件之分页 提示框 提示工具组件
bootstrap 组件之分页 提示框 提示工具组件
48 0
组件之 媒体对象(图文混排)、 导航组件, 手动实现bootstrap的导航栏
组件之 媒体对象(图文混排)、 导航组件, 手动实现bootstrap的导航栏
17 0
bootstrap 组件 之模态框组件
bootstrap 组件 之模态框组件
18 0
bootstrap 组件之 输入框组 超大屏幕 列表组件学习总结
bootstrap 组件之 输入框组 超大屏幕 列表组件学习总结
28 0
bootstrap 组件之表单 组件学习总结
bootstrap 组件之表单 组件学习总结
32 0
bootstrap 组件之轮播图 折叠面板 下拉菜单 学习总结
bootstrap 组件之轮播图 折叠面板 下拉菜单 学习总结
12 0
bootstrap 组件之卡片总结
bootstrap 组件之卡片总结
8 0
+关注
怡泽堂堂主
七年金融科技从业经历,四年技术研发经历,三年技术团队管理经验,两年金融产品管理、敏捷项目管理、研发团队管理、金融数据分析经验,两年企业征信、个人征信数据和产品经验,经历多年的一线实战磨炼,主导或参与多个从0到1,从1到N的项目,思维活跃、雷厉风行、简单高效
文章
问答
文章排行榜
最热
最新
相关电子书
更多
函数计算最佳实践:快速开发一个分布式 Puppeteer 网页截图服务
立即下载
QQ移送页面框架优化实践
立即下载
QQ移动页面框架优化实践
立即下载