论文题目

基于Bootstrap的网站的开发

学生姓名

学 号

专    业

物联网工程

班 级

指导教师

职 称

讲师

一、选题的目的、意义及国内外研究动态：

（一）研究的目的与意义

1. 研究目的

无线网络飞速成长的同时，用户对移动智能设备的需求与日俱增。与此同时，一些弊端也随之暴露。因为不同设备产品,屏幕类型存在着差异,倘若为每一种产品设置专门的网站,成本大且效率低下。那么如何让网页自适应各种电脑手机屏幕就具有实际研究价值。Bootstrap作为响应式网站前端开发的主流框架之一，很好地解决了不同浏览器和不同尺寸屏幕的兼容性问题[1]。它是一款简约、直观、高效的开发工具,拥有一个12列的栅格式网页布局系统,并且还提供了很多网页组件,能大大加快网页开发速度,给用户带来优质的浏览感受。本文以网站的开发为例，对Bootstrap技术进行深入研究，使网站内容在任意设备上都能完美显示。

2. 研究意义

由于移动智能产品在我国的飞速普及，使用手机、平板等产品浏览网页的用户与日俱增。据2016年第38次《中国互联网络发展状况统计报告》显示：截至2016年6月，我国手机网民规模达6.56亿，网民中使用手机上网的人群占比由2015年底的90.1%提升至92.5%，仅通过手机上网的网民占比达到24.5%，网民上网设备进一步向移动端集中[2]。但传统Web的开发，成本较大，效率低下，且只能在同一尺寸下才能实现设计者所要达到的完美效果。面对屏幕尺寸类型的日趋增长，显然，传统的网页设计方式已完全不能达到用户想要的理想状态。因此，很有必要探索出一种能自适应各种电脑手机屏幕，且操作简洁高效的应用程序，以确保良好的用户体验。

为解决这一问题，2010年，Ethan Marcotte提出了“响应式Web设计(Responsive Web Design)”的概念，最初是指可以自动识别屏幕宽度，并做出相应调整的网页设计，现扩展为页面的设计与开发应当根据用户的行为以及设备环境，能够进行自动的响应和相应的调整[3]。通俗地说就是网站能自适应手机、电脑等不同设备的屏幕。

响应式Web设计研发成本低、效率高、可拓展性强，且更具人性化。于用户而言，实用美观，于开发者而言，简洁高效。如今，响应式网站在欧美国家已逐渐普及，但在我国还是极为稀少。以大学网站为例，就本人所知，仅有湘潭大学、华东师范大学的官方网站采用了响应式网页设计。我国大多数网站都还停留在只有在电脑屏幕上才能获得满意的浏览效果，在手机上浏览，要么字体太小看不清楚，要么放大之后就只能看到网页的局部。还有一类网站，分别针对电脑端和移动端设计两套不同的网页，然后使用JavaScript脚本去判断客户端是安卓系统还是Windows系统，来分别显示不同的网页，这种方式不仅增加了网页制作的工作量，而且会存在误判。

因此，研讨响应式Web设计，具有极高的应用价值，对我国大量的传统网站进行响应式网站重构，具有巨大的市场需求。

船山学作为一门以我国十七世纪伟大思想家王船山的生平、著作和思想为研究对象的学问，己经有三百多年历史[4]。这一学问在中国哲学思想史上的地位举足轻重，各大学术派别对船山思想都极为关注。显然，对船山学的研究于当今的文化建设发展具有重要价值。所以本文以《船山研究》网站的开发为例，对Bootstrap技术进行深入研究。

（二）国内外研究动态

响应式技术是不断发展的，其中具有里程碑式意义的事件如下：

1997年，美国设计师David Siegel出版了一本里程碑式的网页制作指导书《Creating Killer Web Sites》（创建杀手级网站），表明使用GIF透明间隔图像和表格可以创建出“魔鬼般迷人”的网站[5]。从此，表格布局被正式提出，解决了当时网页布局的难题。从那时起表格布局的方式在国内外流行多年。但过了些许年后，David Siegel意识到表格布局存在着问题。

直到2005年，美国设计师Dave Shea和Molly E. Holzschlag出版了一本书籍《CSS禅意花园》，以及配套的网站（www.csszengarden.com），向人们展示了使用CSS布局可实现网页的结构和表现分离，制作出的网页十分精美。通过利用CSS布局的方式，使得网站的搜索引擎方面变得更具人性化，比如网页能被盲人有效地访问。种种优势以致CSS网页布局被迅速得到广泛使用。

到了2010年，智能手机逐渐普及，但受制于手机屏幕尺寸，网页在手机中的浏览效果并不令人满意，为此，2010年Ethan Marcotte首次提出了响应式网页设计的理念，但传统的CSS 2.1技术还无法解决响应式网页设计中的所有技术问题。

直到2011年9月，W3C发布了CSS 3的推荐标准，其最大的改进之一就是增加了对“媒体查询”的支持，利用媒体查询技术，可针对不同的屏幕分辨率或设备类型为同一个HTML元素设计不同的样式，解决了响应式网站开发的技术难题。

虽然直接使用HTML5+CSS3也能制作出电脑手机自适应的响应式网页，但这需要考虑很多不同屏幕下各种元素的大小及排列等技术细节问题，开发过程比较繁琐。为了解决Web开发领域的重复劳动以及开发环境落后的问题，2010年8月，Twitter公司的两位前员工Mark Otto和Jacob Thornton创建了Bootstrap前端开发框架，Bootstrap本身能够很好地支持响应式网页设计，因为它拥有一个12列的栅格式网页布局系统，并且还提供了很多网页组件，大大提升了网站研发效率。这使得使用Bootstrap制作响应式网页在国外逐渐流行起来。

响应式网站的理念在不断的成长与进步，主要归为如下几个因素：

（1）外部环境：科技飞速发展的同时，智能产品的类型日趋多样化，面对尺寸不一、形形色色的手机电脑屏幕，传统的网页设计方式已完全不能达到用户的要求。

（2）自身特色：响应式设计技术具有灵活简洁的特点，能自适应电脑手机屏幕，使得网站建设愈加高效。

（3）内部需求：响应式设计理念一出现，各大网站及平台都迫切需要进行响应式网站的重构，以便更灵活地去适配多种产品。

总而言之，响应式Web设计是网页布局的发展趋势，必将在国内产生第二次网站重构，这将是网页布局历史上的第二次重大革命。

二、主要研究内容、创新之处：

本文以《船山研究》网站的开发为例，对Bootstrap技术进行深入研究，阐明响应式网站的研究价值，具体内容如下：

（1）阐明移动设备的普及与种类繁多，强调网站能否自适应手机电脑屏幕的重要性，提出响应式网站设计具有巨大市场需求与经济效益，分析Bootstrap的国内外研究动态、发展趋势以及研究价值。

（2）阐述了《船山研究》网站的设计与实现，对所应用到的关键技术进行介绍，其中包括Bootstrap框架、栅格系统、媒体查询、流式布局、弹性图片。

三、研究方法、设计方案或论文提纲：

（一）研究方法

本文采用Bootstrap技术，按照网站的开发步骤，设计并实现网站，并对该网站进行测试。

（二）论文提纲

绪论

1.1 研究目的及意义

1.1.1 研究目的

1.1.2 研究意义

1.2 国内外研究动态

1.3 研究内容及组织结构

1.3.1 研究内容

1.3.2组织结构

2.系统设计

2.1 网站的需求分析

2.1.1 需求分析

2.1.2 风格定位

2.2 网站的结构

2.2.1 网站的信息架构

2.2.2 前端响应式流程图

3.系统关键技术

3.1 Bootstrap框架

3.1.1 Bootstrap框架简介

3.1.2 本系统的Bootstrap框架

3.2 栅格系统

3.2.1 栅格系统简介

3.2.1 本系统的栅格系统

3.3 媒体查询

3.3.1 媒体查询简介

3.3.2 本系统的媒体查询

3.4 流式布局

3.5 弹性图片

4.详细设计

4.1 布局实现

4.1.1 首页的布局实现

4.1.2 列表页的布局实现

4.1.3 内容页的布局实现

4.2 关键技术

4.2.1 轮播图的实现

4.2.2 选项卡的实现

5.网站的实现与测试

5.1 系统功能测试

5.2 PC端效果展示

5.3 手机端效果展示

结论

参考文献

致谢

四、完成期限和预期进度：

2016年9月，确定论文的大致方向和相关资料的搜集

2016年10月，完成文献综述、开题报告和论文提纲

2016年11月，论文开题

2016年12月，向指导老师提交论文初稿

2017年2月，论文修改

2017年4月，完成论文，准备论文答辩

2017年5月，论文答辩

五、主要参考文献与资料：

[1] 陈甫.Bootstrap3在Java Web项目中的应用[J].电脑编程技巧与维护,2014,(17):27.

[2]莉华.2016上半年中国互联网调查报告[EB/OL].http://gongwen.cnrencai.com/ diaochabaogao/84911.html,2016-08-09.

[3] 张树明.基于响应式Web设计的网页模板的设计与实现[J].计算机与现代化,2013,(06):125.

[4] 方克立.的最新前沿成果——方红姣《现代新儒学与船山学》序[J].船山学刊,2015,(04):108-111

[5] 网页学习网.CSS教程:14.5 CSS排版与传统的表格方式排版的分析[EB/OL].http://www.lodidance.com/css/jc/950.html,2011-04-25.

[6] 张超.响应式网站的设计与开发[J]. 电子测试,2015,(16):5.

[7] 爱范儿.设计师眼中的“扁平化设计”[EB/OL].http://www.yixieshi.com/it/ 13842.htm1,2013-06.

[8] 曹芳.将Bootstrap技术应用于CMS建站中[J].信息技术与信息化,2016,(Z1):78.

[9] 徐涛.深入理解bootstrap[DB/CD].北京：北京华章图文信息有限公司,2014.

[10] 舒后,熊一帆,葛雪娇.基于Bootstrap框架的响应式网页设计与实现[J].北京印刷学院学报,2016,(02):49.

[11] BIG东.栅格系统 - BIG东 - 博客园[EB/OL].http://www.cnblogs.com/lxd564965917/p/6794507.html,2017-05-06.

[12] 陈员义,李艺志.基于Bootstrap响应式Web前端研究[J].福建电脑,2015,(12):72.

[13] 苏奎,董默,张彦超.响应式Web开发模式分析[J].软件,2015,(06):93.

[14] 赵建保.响应式Web设计关键技术及设计流程[J].电脑知识与技术,2014,05: 1066.

[15] 刘欢,卢蓓蓉.使用响应式设计构建高校新型门户网站[J].中国教育信息化,2013,(09):72.

[16] 熊瑞英,王宁.响应式Web设计[J].科技创新导报,2015,(26):65.

[17] 秦书荣.扁平化2.0响应式网页的设计与技术探析[J].电脑知识与技术,2016,(26):205.