基于Bootstrap的响应式校园电子商务网站设计

李静

摘要：随着近年来互联网+概念的提出，互联网应用的发展达到了一个新的高潮。越来越多的传统行业试图通过互联网平台创造新的发展生态。其中移动互联网的占有量更是逐年攀升，为了满足不同移动终端的显示尺寸，响应式的页面布局应运而生。该文利用bootstrap工具设计响应式校园二手商品交易商城的前端。

关键词：Bootsrap；前端设计；校园二手商品交易商城

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2017）14-0225-01

移动互联网是采用移动无线通信方式通过智能移动终端获取业务和服务的，而移动终端则包括了智能手机、电子书、平板电脑等。近年来，随着移动通信和智能移动终端的发展，更多的客户会选择移动互联网这样随时随地可以上网的方式，移动互联经济也随之高速发展。而传统的网页制作方式大多只适用于PC端的浏览器，在智能终端多尺寸的显示屏上的浏览效果却不尽如人意。

1响应式web设计的趋势

响应式Web的设计注重的是实现一个网站能兼容多个终端，通过媒体查询、弹性视觉媒体、流动布局的结合，实现兼容性网站创建，一个网站能够满足不同客户端用户需要。响应式Web设计能使客户端适应用户设备环境，智能化地适应大众的需要。

相对于传统网页设计方式，响应式网页设计能够为不同终端的客户提供更好的浏览体验，带来更多的经济效益；同时响应式网页设计也能够减少网站开发和维护成本，对于搜索引擎优化也更加友好。因此，越来越多的前端开发工程师选择响应式布局设计网页。

2 Bootstrap的优势

Bootstrap是由Twitter的设计师Mark Otto和Jacob Thornton合作开发的一款简洁、直观的用于前端开发的开源工具包。Bootstrap是基于HTMl5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分iQuery插件。

1）Bootstrap是响应式布局的。能够根据用户的终端设备进行自适应调整，提高用户的浏览体验度。

2）Bootstrap是移动设备优先的。从Bootstrap3开始，针对移动设备的样式融合进了框架的每个角落。更适应移动互联网快速发展的今天。

3）Bootstrap是易于学习的。只要具备HTML和CSS基础知识，就能够快速上手，对于高职院校的学生能够快速掌握基本技术，搭建一个极具设计感的完整网站。

4）Bootstrap含有丰富的组件。Bootstrap有丰富的HTML组件和JS组件，并且代码简洁，可以在其基础之上个性化定制开发。

3利用Bootstrap工具實现校园二手商品交易商城页面

引入bootstrap框架，利用其布局容器、导航栏、表单、按钮、栅格系统、标签、响应式工具以及轮播插件，完成校园二手商品交易商城页面的制作。

4结束语

Bootstrap是一个开源框架，提供CSS布局组件和javascript组件，对于高职院校的学生更容易掌握，从校园二手商品交易商城的开发到后期维护阶段都可以让学生参与进来，也是增加学生的实践机会。