快速构建网站或移动端页面:关于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

以上,分享给大家,谢谢

相关文章
|
1月前
|
开发框架 前端开发 JavaScript
使用JavaScript、jQuery和Bootstrap构建待办事项应用
使用JavaScript、jQuery和Bootstrap构建待办事项应用
11 0
|
6月前
|
前端开发
Bootstrap02 家居商城首页之最新上架&热门家具&分类页面
Bootstrap02 家居商城首页之最新上架&热门家具&分类页面
bootstrap+thymeleaf 页面多选回显时莫名其妙多了
【1月更文挑战第5天】bootstrap+thymeleaf 页面多选回显时莫名其妙多了 问题分析处理
|
1月前
|
开发框架 前端开发 JavaScript
使用React、Redux和Bootstrap构建社交媒体应用
使用React、Redux和Bootstrap构建社交媒体应用
13 0
|
1月前
|
开发框架 人工智能 前端开发
使用Python、Django和Bootstrap构建在线教育平台
使用Python、Django和Bootstrap构建在线教育平台
31 0
|
1月前
|
开发框架 前端开发 开发者
Bootstrap:构建响应式网站的首选框架
Bootstrap:构建响应式网站的首选框架
33 0
|
6月前
|
前端开发 JavaScript
Javascript知识【BootStrap技术实现商品页面】(下)
Javascript知识【BootStrap技术实现商品页面】
|
6月前
Bootstrap03购物车页面&登录注册界面&其他组件使用
Bootstrap03购物车页面&登录注册界面&其他组件使用
|
8月前
|
JSON 前端开发 JavaScript
BootStrap框架下使用JS动态加载table并点击相关列弹出二级页面
在这里记录一下,也是在公司用到的一个例子,刚刚解决,正好趁热打铁。前端页面是采用BootStrap框架搭建的,主要的样式涉及到项目,在这里就不截图了,直接上代码:
84 1
|
前端开发 开发者 容器
Bootstrap- 响应式工具|学习笔记
快速学习 Bootstrap- 响应式工具
116 0
Bootstrap- 响应式工具|学习笔记