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

以上,分享给大家,谢谢

相关文章
|
6月前
|
开发框架 前端开发 JavaScript
使用JavaScript、jQuery和Bootstrap构建待办事项应用
使用JavaScript、jQuery和Bootstrap构建待办事项应用
109 0
|
前端开发
Bootstrap02 家居商城首页之最新上架&热门家具&分类页面
Bootstrap02 家居商城首页之最新上架&热门家具&分类页面
|
3月前
|
前端开发 JavaScript 开发者
革命性的飞跃:Apache Wicket新特性大揭秘,让你的Web开发之旅如虎添翼!
【8月更文挑战第31天】Apache Wicket作为一个成熟的Java Web框架,持续进化以适应现代Web开发需求。本文介绍Wicket的最新特性,包括响应式布局支持、组件化与模块化开发、异步请求处理、增强的表形处理以及与现代JavaScript框架的集成。通过具体代码示例展示如何利用这些特性构建高效、灵活且用户友好的Web应用程序。
38 0
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
|
5月前
|
前端开发 Apache 数据库
ThinkPHP+Bootstrap简约自适应网址导航网站源码
使用 ThinkPHP+bootstrap 开发,后台采用全局 ajax 无刷新加载,前后台自适应,前台页面非常简洁适合自己收藏网站或做导航网站。
62 1
bootstrap+thymeleaf 页面多选回显时莫名其妙多了
【1月更文挑战第5天】bootstrap+thymeleaf 页面多选回显时莫名其妙多了 问题分析处理
|
6月前
|
前端开发 数据可视化 算法
r语言Bootstrap自助法重采样构建统计量T抽样分布近似值可视化|代码分享
r语言Bootstrap自助法重采样构建统计量T抽样分布近似值可视化|代码分享
|
6月前
|
开发框架 前端开发 JavaScript
使用React、Redux和Bootstrap构建社交媒体应用
使用React、Redux和Bootstrap构建社交媒体应用
90 0
|
6月前
|
开发框架 人工智能 前端开发
使用Python、Django和Bootstrap构建在线教育平台
使用Python、Django和Bootstrap构建在线教育平台
258 0
|
6月前
|
开发框架 前端开发 开发者
Bootstrap:构建响应式网站的首选框架
Bootstrap:构建响应式网站的首选框架
129 0