使用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也是必须的)

三、上线与优化

整个过程就是周末两天抽了一些时间来开发,今天周一来就与同事看了一下,再把百度统计的代码给加上就发布了,效率还是挺高的。。。后续的还是需要美工的介入,做些广告图片和优化
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值