使用Bootstrap构建琮元科技宣传网站

久闻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,效果确实不错。

二、过程总不会一帆风顺

  1. 网站的顶部参考了“精简版的营销类网站”这个案例;
  2. 另外在准备加一个大屏轮播的时候,发觉使用bxslider效果更好;
  3. 百度地图和Bootstrap的CSS有些冲突,所以引入百度地图的时候,干脆用了一个不被推荐的方式:iframe,用iframe去展现地图,然后整体的布局还是Bootstrap。这种方式的弊端,iframe性能上的影响可以暂时不管,但对响应设计的破坏是一定的,手机上浏览的话,地图部分不能适应屏幕自动调整;
  4. 还用到jquery.scollUp.js,实现回到页面顶部的功能。(当然,jQuery也是必须的)

三、上线与优化

整个过程就是周末两天抽了一些时间来开发,今天周一来就与同事看了一下,再把百度统计的代码给加上就发布了,效率还是挺高的。。。后续的还是需要美工的介入,做些广告图片和优化
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章