基于bootstrap技术的新媒体公益平台的建设与运营

胡玉贤 胡云溪 朱静静 汪明艳

摘要：本文主要展示了一个基于bootstrap技术的新媒体公益平台的设计与实现过程。该设计方案包括以网站首页、志愿组织、志愿社区等为主要模块的网站前端界面设计，以及对用户注册、登录，个人信息，组织信息，活动信息的发布等进行数据修改和管理的后端管理设计。主要使用HTML5、bootstrap、PHP和mysql等技术对网站进行开发。项目运行表明，平台在不同的终端设备使用流畅，使用界面简洁美观，符合预期设计期望。

关键词：Bootstrap;响应式;公益网站

中图分类号：TP311      文献标识码：A

文章编号：1009-3044（2021）16-0206-03

开放科学（资源服务）标识码（OSID）：

1 引言

随着大学生公益活动的兴起，大学生志愿活动已逐渐成为社会公益活动的一项不可或缺的组成部分，本项目旨在为大学生提供优质的公益网站浏览服务，构建上海市大学生专属公益平台。为了增强用户的体验，使用户在不同的移动终端上浏览本网站时，网站界面的风格保持一致且兼容性优越。本系统利用了bootstrap技术对新媒体公益网站“上海公益在行动”进行开发。

系统的前端采用了bootstrap、HTML5等技术进行设计。Bootstrap框架帮助系统界面实现了响应式布局，能自适应不同屏幕大小和不同分辨率的移动终端;jQuery优越的选择器以及自配的函数在系统设计开发过程中也发挥着重要作用。PHP技术实现了网站前后端的连接，mysql实现网站数据库的构建。

2 系统功能设计

本平台系统功能主要设计如下：

系统前端主要由网站首页、个人中心、志愿组织、志愿活动、志愿社区、销售专区这六大板块组成。网站首页主要进行近期公益资讯发布，公益活动照片展示，优秀志愿者展示等。个人中心的主要功能有个人相册、个人资料、个人收藏等。志愿组织涵盖了个人组织、社区组织、高校组织等各个不同的组织类型。在志愿活动版块中，所有用户可以查看活动介绍并决定是否进行报名。志愿社区内还可以对网站志愿活动发表看法并浏览回复。

系统后端则是组织管理、网站管理两大板块组成。组织管理员拥有组织管理权限，登录后可以对其所在组织进行信息管理、成员管理、相册管理等。而网站管理是对整个平台的整体把控，包括个人管理、活动照片管理、志愿活动管理、组织管理等。

在开发设计的过程中还在平台内新增了销售专区，希望可以在平台内进行二手产品和贫困地区农特产品的销售，充分利用本平臺为公益事业尽一分力。

3 界面设计

本网站的界面设计由开发人员自我设计，在网页头部放置了网站名称、导航栏、搜索框、用户注册及登录入口。而在网页页脚，则放置了网站简介、网站相关链接以及联系方式等内容，简约的风格让用户使用起来一目了然。

Bootstrap提供了网站界面设计的框架，通过模板+动态内容的方式，使得开发人员可以快速生成网站界面。在开发过程中，我们根据需要设计了网站界面模板，利用PHP代码载入内容数据，生成统一的网站界面。根据所需动态内容，我们再利用css3即层叠样式表，对页面的背景、边框、字体等进行进一步的美化。

4 网站模块设计

4.1网页内容模块

本网站的内容模块主要是对公益活动内容进行展示。普通图文类页面，主要包括上海公益资讯、公益活动信息、活动报名、活动照片展示等内容页面。这类内容界面主要是水平或垂直排列，给人以美观、简约之感。而用户点赞、收藏、报名活动等页面功能与内容显示模块紧密联系，通过按钮控件加以实现。

4.2 用户管理模块

本平台用户主要分为三类，个人志愿者、组织管理员及网站管理员，对这三类授以不同权限。用户主要通过手机号进行注册，输入信息后，前端将数据发送到后台数据库进行存储。“用户注册”及“修改密码”等功能都需要进行用户验证，故在平台设计时，加入了以手机验证码为维度的用户验证。

登录功能支持手机/用户名/电子邮箱方式登陆，用户输入用户名和密码后，选择用户类型进行登陆，系统后端进行权限验证。若是本平台用户则跳转至网站首页，否则提示用户信息错误。本平台也设置了游客用户，此类用户只能浏览网站页面的活动照片、志愿资讯等。注册成为平台用户后才可以发布个人照片，报名活动，在论坛上参与讨论，购买扶贫产品等用户。用户登录后可以在个人中心添加个人信息，后端数据库会根据传送的表单完成相应数据的修改。

4.3 活动管理模块

本网站对于组织用户和网站管理员，登录后可以在系统中查看组织的用户名录、活动照片名录，发布公益资讯、志愿者招募等活动信息，对组织信息进行编辑。本模块主要包括了三个功能，志愿活动的发布、活动信息修改和活动报名。组织管理员登录后，系统会根据user ID判断用户权限。组织管理员可以发布志愿活动资讯。在发布活动资讯时，组织管理员需要输入一些活动基本信息，比如，活动名、活动日、活动类别、活动地点等，活动详细信息通过Markdown语法进行填写，支持部分html语法。

5 响应式布局分析

本公益平台最大的特点就在于bootstrap的响应式布局框架，这也是整个平台界面构建的基础。bootstrap的响应式布局，可以更改页面的内容样式表以达到不同的网页效果。浏览器会获取不同移动设备的分辨率信息以调整界面样式。而bootstrap自带的栅格系统可以随着设备屏幕尺寸的改变，自动重组行与列来构建全新的界面布局，同时页面内容也会自动调整并放入新的布局中，以此达到快速实现响应式布局的目的。

媒介查询是响应式布局的关键，可以使得网站页面在不同设备的浏览器中呈现出与之适配的样式，通过一些条件询问语句声明和样式的定义，使浏览器能够应用与当前设备匹配的样式。Bootstrap中提供了许多媒介查询样式表供开发人员使用，在本次系统开发中，我们也根据实际需要进行了其他样式表的编写。

6 网站推广营销策略

本网站的推广营销策略就是最大限度整合校内资源，以较少的投入获取更多的社会价值。最终目标是创立属于上海大学生的志愿者平台，在上海各大高校及学生群体中形成一定的影响力，让上海的大学生志愿组织能够得到更多的宣传推广，吸引更多的社会公益资源。在未来，网站将结合自身特点与最终目标，顺应“互联网+”和新媒体的发展潮流，在网站推广和营销模式上进行创新。在网站的推广营销策略上，我们将对平台进行线上和线下营销。其中，线上营销主要有志愿活动推广、志愿者招聘推广、网站爱心产品销售、微信公众号推广等。线下营销包括：与校志愿者部进行合作、进行校内志愿者宣传、建立公益社团等。

7 结论

此項目是基于bootstrap技术的新媒体公益平台“上海公益在行动”的设计与实现。通过响应式布局设计，使得网站使用快捷便利，浏览体验良好，为志愿者提供了优质的公益平台。项目以“上海大学生公益”为宣传核心，希望提升大学生参与志愿活动的宣传力度，意在解决大学生参与志愿活动兴趣度普遍较低，公益活动发布平台少，推广难、宣传少、参加人数少等问题，并对贫困地区进行农特产品营销和文化宣传，获取更多的社会价值。目前网站已有一百多位学生进行关注使用，今后还将继续进行推广完善，吸引更多大学生、高校入驻使用，推动大学生公益活动的进一步发展。

参考文献：

[1] 陈荣华.基于HTML5技术的网页广告动态交互系统设计[J].现代电子技术，2020，43（21）：76-79，84.

[2] 范高智.基于Web技术的旅游智慧管理平台构建[J].现代电子技术，2018，41（11）：69-72.

[3] 顾俊.基于互联网+时代对PHP动态网站开发技术的研究[J].信息通信，2020，33（7）：85-87.

[4] 蒋睿.MySQL数据库安全研究[J].电脑知识与技术，2020，16（9）：3-4，21.

[5] 司勇，陈曦，任泽中.大学生公益创业孵化网络建设[J].中国高校科技，2019（12）：90-92.

[6]王成，李少元，郑黎晓，等.Web前端性能优化方案与实践[J].计算机应用与软件，2014，31（12）：89-95，147.

[7] 曲梦梅.新传播环境下互联网企业公益营销的实践与创新[D].上海：上海外国语大学，2019.

[8] 王一斐.互联网时代个性化公益项目的动员机制研究——以“一校一梦想”为例[D].沈阳：辽宁大学，2019.

[9] 张迦.基于HTML5的响应式新闻门户网站设计与实现[D].长沙：湖南大学，2018.

【通联编辑：光文玲】