久闻Bootstrap的大名,一直没有实战过,这次开发公司的网站,时间也不是很紧,就决定试试!
主要参考了这两个网站的一些资料:
1、http://www.bootcss.com,Bootstrap中文网,官网的中文版,版本基本是同步更新的;
2、http://www.csswang.com,分析了许多的设计经验。
最后的成果大家可以点击这个链接去观摩:http://www.cqcy-tech.com
一、选择Bootstrap的原因
主要是效率上考虑,Bootstrap提供常用的一些组件,可以减少工作量;另外设计是码农的短板啊,Bootstrap默认的效果出来貌似就不错哦,再找美工给做些调整和效果增强就可以了,在架构上不会有大的改动;当然也有响应设计带来的好处,我用手机浏览器访问:http://www.cqcy-tech.com,效果确实不错。
二、过程总不会一帆风顺
- 网站的顶部参考了“精简版的营销类网站”这个案例;
- 另外在准备加一个大屏轮播的时候,发觉使用bxslider效果更好;
- 百度地图和Bootstrap的CSS有些冲突,所以引入百度地图的时候,干脆用了一个不被推荐的方式:iframe,用iframe去展现地图,然后整体的布局还是Bootstrap。这种方式的弊端,iframe性能上的影响可以暂时不管,但对响应设计的破坏是一定的,手机上浏览的话,地图部分不能适应屏幕自动调整;
- 还用到jquery.scollUp.js,实现回到页面顶部的功能。(当然,jQuery也是必须的)
三、上线与优化
整个过程就是周末两天抽了一些时间来开发,今天周一来就与同事看了一下,再把百度统计的代码给加上就发布了,效率还是挺高的。。。后续的还是需要美工的介入,做些广告图片和优化