毕业设计（论文）-基于Bootstrap的响应式电商网页的设计与制作.doc

基于Bootstrap的响应式电商网页的设计与制作计算机与信息科学学院计算机科学与技术(师范)摘要:本论文详细描述了一个基于Bootstrap的电商网站的前端网页设计与实现过程。网站的设计与制作主要围绕网站的响应式制作进行。前台网页一共包含四版块,首页、充电宝、耳机、其他、登录等。关键词:Bootstrap;JavaScript;jQuery;电商网站Abstract:,homepage,man,woman,:Bootstrap;JavaScript;jQuery;businesswebsite全套设计加扣30122505821引言随着信息技术的发展,网购已经逐渐地代替了人们传统的购物方式。人们不再仅限于在传统的市场购物。网购已经成为当下人们的主流购物方式。随之应营而生的电商业蓬勃发展。然而,随着手机的普及,特别是3G时代以及4G时代的到来,人们已习惯用手机上网。随着响应式网站的出现,人们越来越喜欢在手机等移动设备上浏览新闻资讯以及购物,手机上网率逐渐上升,手机上网将会带来巨大的商机。响应式布局可以为手机上网用户提供更好的界面和用户体验。以数码零售的网站为例,其在电脑端和移动设备端都能很好的显示网站的内容。这块做得比较好,但却没有后台功能,没能连入数据库,不能实现购买功能。,来自Twitter,是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS、JavaScript的,使得Web开大发更快捷[1]。它由Twitter的设计师MarkOtto和JacobThornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言less写成[2]。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的BreakingNews都使用了该项目。,它在jQuery的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格。并兼容大部分jQuery插件。Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速地搭建一个漂亮、功能齐完备的网站。其中包括以下组件:下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等。Bootstrap还自带了13个jQuery插件,这些插件为Bootstrap中的组件赋予了新的“生命”,其中包括:模式对话框、标签页滚动条、弹出框等等。3设计目的本次设计旨在提升设计者的动手能力,加强对理论知识的理解和实际应用。本次设计的主要目的如下。(1)加强对网站的理解,能对网站功能进行分析,并设计出合理的框架结构。(2)学习Bootstrap前端框架,实现网站在各种终端设备的正常显示,满足人们的浏览需求;学习JavaScript实现动态网页交互,从而全面实现网站的响应式布局[3]。(3)学习并能熟练运用制作网页的各种工具和语言,如DW、PS、XHTML、CSS等。4系统规划根据需求,首先要确定的是电商网站需要向用户展示的商品是什么,然后在利用sublimetext或者是Dreamweaver等工具运用HTML+CSS制作电脑端的静态网站[4]。然后,通过JQuery和JavaScript等技术将网站制作成动态网站[5]。然后,利用Bootstrap前端框架制作移动端能够正常显示且方便用户浏览的网站,可能用户看到的界面和电脑端的界面有些许不同,但是,不同的只是导航的位置,导航会成为一个菜单,需要用户点击,点击之后才会显示导航的具体内容,网站的内容还是一致的。只不过,需要用户手动滑动网页来浏览所有的内容。这里说的滑动当然不是指的滚动条,因为如果出现了滚动条,那么,这个响应式布局便不是成功的。系统实现的主要功能如下。(1)用户登录模块管理员登录成功后才能购买商品,因为涉及到购买这的信息以及付款等等问题。(2)用户登出模块用户注册后才能登录,而用户有时候不想买东西,只是看看商品。(3)商品浏览模块用户可查看各类产品。(4)产品信息模块用户可以在登录或不登陆的状态下浏览产品的基本信息、价格。(5)购物车清单列表模块用户可以在