·学术论坛·基于bootstrap的响应式大学生摄影约拍网站开发
■胡玉贤    胡云溪    朱静静
上海工程技术大学    上海    201620
摘 要：本论文详细描述了一个基于bootstrap的响应式大学生摄影约拍网站设计与实现过程。网页的设计制作主要使用Bootstrap.html. css.javascript.jquery等围绕网站的响应式技术进行制作。首先介绍了摄影约拍的现状及开发背景，然后论述了网站的设计目的和需求分析等，最后较详细的论述了系统的设计和实现过程。最后对网站的上线进行测试。
关键词：Bootstrap；HTML5；响应式开发；摄影网站
引言
随着互联网的飞速发展，移动互联网的用户不断增加，人们对移动终端设备的需求已经逐渐超越PC端，即越来越多的用户倾向于通过移动设备访问互联网获取信息 ，响应式布局是移动互联网蓬勃发展的产物，在移动互联网快速发展的今天，它占据了网页前端开发领域的核心地位。
如何设计开发一款能够自适应不同尺寸的移动设备的网站，为用户提供优质的浏览服务具有重大意义。以
我们的大学生摄影约拍网站为例，我们的网站可以根据用户使用设备尺寸的大小调整页面的布局，这就使得不同设备浏览网站页面的效果会更加流畅。响应式布局可以提供优质的用户浏览体验，必将会成为互联网今后发展的主流趋势之一。
1.Bootstrap简介
1.1简介
Bootstrap是美国Twitter公司基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架。它能够兼容谷歌、火狐、IE 等大多数主流浏览器，是目前最流行的HTML5框架，使得 Web 网站的开发更加快捷。 Bootstrap提供了优雅的HTML和CSS规范，一经推出后颇受欢迎，目前用户数量庞大，在国外应用广泛。 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。Bootstrap开发前端的特点：响应式布局（2）移动设备优先（3）自定义css属性样式（4）栅栏布局
1.2选择bootstrap作为网站开发前端框架的原因
Bootstrap是基于CSS3和HTML5开发的，内置了很多具有独特风格的样式。包含了很多web组件，依靠这些组件，我们可以快速地制作一个简洁、功能齐全的网站。同时Bootstrap 的响应式布局设计，让一个网站可以兼容不同的设备，给用户提供更好的视觉使用体验。
1.3 Bootstrap的优点
（1）便利性：Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。
（2）兼容性：使用bootstrap开发的网站，可以兼容各种尺寸的终端，这极大的节约了时间和开发成本，而且方便网站的后期维护。
（3）响应式设计：bootstrap框架的响应式CSS能根据设备尺寸的不同，自适应于PC端和移动端。
（4）开源：bootstrap是完全开源的，使得技术人员可以无界限交流，用户使用更方便更随心。
2.设计目的
学习bootstrap前端开发框架，使用JavaScript实现动态网页交互的过程，PHP实现前端和MySQL数据库的连接。熟练运用制作网站的各种工具和语言，如Adobe Dreamweaver、Mysql、JavaScript、PHP等。让我们在加强对理论知识理解的同时，完整的了解到整个网站开发的过程，在实际应用中提高自己的动手能力。
3.需求分析
随着现代社会的发展，技术的不断更新，摄影行业得以经济的滋润。同时，喜欢摄影的人员越来越多，摄影约拍在大学生体中得到广泛喜好，形成了较为可观的市场规模。所以为大学生摄影爱好者提供一个专属的分享平台是十分必要的。构建这个社交平台不仅仅是为了分享摄影作品，更是分享我们大学生的日常生活。同时满足部分大学生的需要，提供网络约拍信息和二手产品出售服务。通过这个平台，减少学生的金钱花费，提供更准确的拍摄信息和安全的环境，同时让同龄人之间有着更轻松的交流沟通。
4.系统规划
在对网站进行开发之前，我们合理运用课上所学的方法，对网站进行整体的规划和布局，否则可能会导致网站开发工作量大，网站功能不明确，网站系统不符合要求等，严重的话可能会导致整个系统根本无法运行。在确定网站的整体功能后，使用bootstrap前端开发框架以及HTML5、JavaScript等开发语言对网站进行开发，最终实现网页根据浏览设备的不同而自行响应。网站系统实现的主要功能如下：
（1）照片浏览模块（2）个人信息模块（3）摄影师模块（4）照片发布模块
（5）点赞收藏模块（5）活动信息模块（7）交易发布模块
5.系统分析
图1  系统功能结构图
6.网页功能分析
根据需求分析以及与用户的沟通，本系统在设计时应满足以下目标：
网页界面整洁美观，数据存储安全可靠，能够全面展现所规划的功能界面，如活动发布、照片浏览等。同时，实现各种查询，如模糊查询，高级查询等。网页的设计与制作应该依据设备环境及用户行为的不同进行调整和响应。无论用户是在使用PC端还是移动端，界面都能够根据用户使用设备的不同自动切换图片尺寸及分辨率等，
也就是说，页面可以根据用户设备环境的不同而自行响应。
2020年07期 ·277
278 ·2020年07期
精 品JINGPIN
7.响应式分析7.1 Meta 标签
大多数移动浏览器将HTML 页面放大为宽的视图（viewport）以符合屏幕分辨率。而我们使用视图的meta 标签来进行重置。通过视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。并在<head>标签里加入这个meta 标签。
这个meta 标签为：
<meta name=”viewport” content=”width=device-width, ini-tial-scale=1”>
7.2 HTML 结构
在这个例子里，有一个包括页眉（导航栏），内容和页脚的三
层基本页面布局。
图2  页面的基本布局示例图
如何进行响应式布局是我们一开始就需要思考的部分，有些元素需要缩放（位置固定，大小也不影响布局的），有些元素需要更改布局（大小影响布局，而且需要对触摸屏设备优化的），有些布局需要隐藏（一部分长度限制较多，而且不适合触控的），这些都是我们在编写媒介查询的样式表时需要提前规划好的。
7.3媒介查询-Media Queries
媒介查询是响应式设计的核心，也是CSS3的一个重要特性之一。它根据设备反馈的条件和网站的设置告诉浏览器如何为指定视图宽度渲染页面。我们可以将所有的容器宽度从绝对的像素值设置为相对的百分比或者相对长度（rem）以使得容器大小自适应。主要根据项目的情况和需要适配的设备添加足够多的媒介查询来协助响应。媒介查询的目的在于为指定的视图宽度指定不同的CSS 规则，来实现不同的布局。媒介查询可以写在同一个或者单独的样式表中。在Bootstrap 中，已经为我们加入了很多响应式设计所需要的媒介查询的样式表。但是我们仍根据自身情况进行了额外媒介查询的样式表的编写来实现自己的效果。
8.网站总体设计与制作
（1）明确网站主题，搜集资料及网站素材。
（2）规划网站布局，包括网站的结构、网站的格调、栏目的设置、版面规划、彩搭配等。
（3）选择合适的制作工具，在本次制作过程，我们主要使用Bootstrap、PHP、以及MySQL 等开发软件。
（4）制作网页：在制作网页时，先把网页大致的框架布局好，再逐渐对小的结构进行完善，以及界面的优化。
（5）数据库的实现：主要使用MySQL 进行数据库的构建，用PHP 进行数据与网站之间的连接。
（6）网站发布以及运营维护。
9.网站的电脑端和移动设备端的显示对比
参考文献
[1]马娟.移动互联网的信息安全研究[J]。今传媒（学术版）.2015
[2]潘明明.响应式网站——《征途》的设计与制作[J].2014
[3]bootstrap.360百科:baike.so/doc/5866541-7589096.html [4]张磊.统一移动端与PC 端等前端开发框架技术的应用研究[J].信息与电脑（理论版）.2015
[5]响应式网页设计百科.baike.so/doc/6733513-6947854.html
基金项目：本文系上海工程技术大学大学生市级创新项目 项目名称是：基于bootstrap 技术的大学生摄影约拍平台开发 项目编号是：cs1903014
bootstrap 5
作者简介：胡玉贤（1999.04--），女，海南保亭人，汉族，本科在读。胡云溪（1998.09--），女，上海人，汉族，本科在读。
朱静静（1999.05--），女，重庆人，汉族，本科在读。
电脑端                                                          移动端

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。