一、背景
作为一个后端开发,总有一些后台服务需要包揽前后端的活,而前端(html+css+js)不够熟悉的情况下开发,就生产了大量丑的不忍直视的页面,虽说功能实现了,但是给人第一感觉就是low穿地心。只要花少量的时间美化下页面,就给自己做出的成果提升了一个档次,Pm等外行会觉得牛批很多,其实没啥技术含量。。
二、摘要
1.使用bootstrap快速搭建前端页面框架,先设计好静态页面,和相关js控制,后台action等留白
2.最后再改造成动态JSP、vm或者其它,避免每次修改页面呈现效果都需要重启服务。
三、开发流程
1.online页面设计
http://www.ibootstrap.cn/ 包含了布局设置、基本CSS、工具组件、JAVASCRIPT 四个类别的组件
网站可以拖动式设计自己的页面框架和元素样式,设计好自己想要的大致页面框架,点击下载即可复制html代码。
- 页面布局
使用第一个导航item 布局设置 bootstrap 栅栏式 可嵌套的布局,完全够用了
- 基本CSS
包含了最常用的html元素,作为一个后端开发,最常用的就是表单、表格了
-
工具组件
包含了按钮组、下拉菜单、导航、路径导航、分页、标签、徽章、巨幕、页头、文本、缩略图、进度条、媒体、列表组、面板,
-
JavaScript
最常用是遮罩窗体
导航栏、选项卡、提示框、手风琴切换、幻灯片