基于Bootstrap框架的响应式布局应用在民办高校招生网站开发中的意义

摘要：本文以民办高校招生网站开发作为研究，分析当下民办高校招生网站在用户使用、用户体验等方面存在的问题进行分析。提出了基于Bootstrap框架的响应式布局为民办高校招生网站开发中带来的便利和优势，为民办高校招生网站开发给出一些建议。

关键词：响应式布局;民办高校;网站开发

一、民办高校招生网站开发的趋势

民办高校招生网站在高校招生工作中承担着信息发布、录取信息查询等作用，是实现考生及考生家长与学校进行信息交互的重要渠道。同时招生网站对于民办高校来说还具有学校品牌宣传的重要价值。随着信息技术的发展，用手机进行上网浏览已经变成了我们在生活中获取信息的重要途径。2021年8月27日中国互联网络信息中心（CNNIC）在北京发布了第48次《中国互联网络发展状况统计报告》。统计数据显示截止时间至2021年6月份我国网络使用者规模达到10.11亿，相较2020年12月增长2175万互联网普及率高达71.6%，相较2020年12月提升1.2个百分点。截截止时间至2021年6月，我国手机网络使用者规模达到10.07亿，相较2020年12月增长2092万网络使用者使用手机上网的比例为99.6%。随着上网习惯的改变曾今针对 PC 端设计的大部分民办高校的招生网站，基于原有PC端的招生网站在小屏设备上展示时，既操作不便，也不够美观。而对同一网站针对不同使用设备进行分别开发则面临着开发成本的增加，这就对民办高校招生网站能够面向各种设备进行响应式设计提出了新要求。

二、响应式布局在民办高校招生网站开发应用的现状

响应式布局在我国的使用起步较晚，大部分民办高校招生网站使用响应式布局相对落后。我们在国内随机抽取了50所民办本科院校和70所民办高职院校进行了招生网站数据统计，其中招生网站中使用响应式网页设计的高校达到94%。

与公办高校招生不同的地方是民办高校的招生情况会对学校的运营利润有着直接的影响。近两年以来受疫情环境影响，线下招生开始变的颇受阻碍，寻求打开线上招生渠道已经是民办高校纷纷开始探索的新路径。如何开发出一个简洁、适用能让考生随时随地使用不同终端均能快速获取学校招生信息的招生网站，是民办高校在信息发展快速的今天所不可或缺的。

大部分民办院校在进行招生网站开发时会优先在实用性、经济成本、后期维护等方面进行考虑。针对这些特性响应式网页布局在实际开发应用中具有巨大优势。

首先，响应式网页布局只需开发出一版就可以适应所有的终端，无需为特定的终端再次进行特定开发，在节约开发成本的同时也极大节约了时间成本，非重复开发也使得网站后期的维护上变的简捷。

其次，响应式网页布局展示的内容可以通过筛选精简后进行呈现，在方便网站的信息被用户获取时也方便被大部分搜索引擎抓取和索引，有利于后续网站的SEO优化。

三、基于Bootstrap框架结构响应式布局在民办高校招生网站开发中的使用

（一）响应式布局

响应式布局的概念最早是在2010年5月由国外著名网页设计师Ethan Marcotte所提出，使用响应式布局网站可以兼容各种尺寸的终端使其无论在 PC 端还是移动端网站的风格保持一致、各模块在不同设备上的排版都灵活规整，让用户在不同端都能获取的信息相同。

（二）Bootstrap框架结构

在国外响应式网站开发中最普遍的方法是使用响应式前端框架如Bootstrap、Skeleton、Helium、The Markup Framework等。其中Bootstrap是由Twitter 推出的前端开发开源工具包，它能够兼容大部分主流浏览器，以直观、简洁著称，是目前网站前端开发中使用的主流HTML5框架。Bootstrap 在响应式开发方面可跨设备和浏览器，网页布局简单化，同时有样式化的参考文档使得学习变得容易。使用开放式的代码库让很多开发者可以根据想法进行发挥。

（三）基于Bootstrap框架结构响应式布局在网站开发中的优势

民办高校的招生网站在学校招生宣传、品牌推广、考生交互活动中均占据着重要地位。招生网站合理的布局和精简的内容信息的合理分布、图片的响应式缩放是非常必要的。

招生网站的设计遵循操作简单且美观的原则，Bootstrap框架拥有12 列栅格系统，在实际使用中Bootstrap 框架运用网格系统遵循一定的规则，进行栅格布局根据不同尺寸屏幕动态地对布局做出调整，使布局规范简洁有规则。开发响应式页面时，利用栅格可以模块化地管理元素，让页面更有层次感，根据网页布局，生成栅格系统，下载栅格系统 css 文件到网站目录。每个模块对应不同的栅格，对网站页面进行模块化管理，实现对网站页面的响应式开发。

Bootstrap框架自带了多个 jQuery 特效插件，这些插件都可以单独的引入到页面中用来实现特定的特效需求。同时也可以使用包含这些插件的 Bootstrap.js 或Bootstrap.min.js 文件一次性引入，以呈现同一页面中多种动态特效需求。这些插件让 Bootstrap框架在招生网站建设中可以用来实现一些更便捷的功能，例如在招生网站“专业介绍”中调用jQuery 搜索插件使考生和家长可以通过关键字查询到想要了解的专业信息，而这种即时搜索的方式可以在当前页面立刻显示出搜索结果无需在跳转到另外的页面，增加了使用的便利性。

四、基于Bootstrap框架结构响应式布局在民办高校招生网站在使用中的优势

适用于多终端基于Bootstrap框架的响应式布局开发的网站，以其强大的自适应功能终端上都能够精准突出展示网站的重点内容，提高了网页展示的质量。在应用于民办高校招生网站则对高校招生信息的传播展示十分有利。在获取信息的过程中考生和家长可以使用不同设备进行访问，满足不同考生及家长对招生信息的浏览与关注带来更好的视觉体验。

参考文献：

[1]中国互联网络信息中心. CNNIC 发布《第 48次中国互联网络发展状况统计报告》 [EB/OL]. （2021-08-27）.

[2]基于 BootStrap 的响应式网页设计与实现 [J]. 电脑知识与技术，2017（13）：85-87.

[3]基于 BootStrap 技术的移动端 web 开发研究 [J]. 微型电脑应用，2018（34）：4-6.

作者简介：

李宁豪（1989—），男，汉族，四川省广安市人，职务：四川科技职业学院信息中心前端工程师，学历：本科，研究方向为：信息系统开发、网站开发、网络信息安全、信息系统管理。