基于Bootstrap的响应式高校招生网站的开发

陶瑜 龚花兰 郭自飞

基于Bootstrap的响应式高校招生网站的开发

陶瑜 龚花兰 郭自飞

（沙洲职业工学院，江苏 张家港 215600）

根据高校招生网站响应式设计的需求，提出了基于Bootstrap的响应式招生网站的开发，分析了Bootstrap框架技术的优势及其关键的布局工具栅格系统，给出了高校招生网站开发的一些建议。

响应式设计；Bootstrap；栅格系统

引言

高校招生网站承担着高校招生信息的发布宣传、考生的通知录用、实现与考生及家长信息交互的任务，美观、实用、操作简便是其基本要求。目前，大部分高校的招生网站是针对PC端设计的，随着智能手机与 PAD用户的增长，基于原有PC 端的招生网站在小屏设备上展示时，既操作不便，也不够美观，这就对高校招生网站能够面向各种设备进行响应式设计提出了新要求。

1 响应式网站

响应式网页设计（Responsive WebsiteDesign）是Ethan Marcotte在2010年提出的。简单来说，就是一个网站可以兼容不同的终端，无论用户使用的是PC机、PAD还是手机，页面都可以自动切换分辨率、图片的尺寸、文字的大小以及相关的脚本功能，能够适应不同的设备。[1]

2 响应式设计构建高校招生网站的设计技术

高校招生网站，主要是用来向考生及家长展示招生信息及与家长实现信息交互，怎样使得招生网站第一眼就给人留下深刻印象？从直观上来说，信息的合理分布、图片的响应式缩放是非常必要的。目前响应式设计主要基于四种技术：媒体查询、流式布局、弹性图片、弹性盒子布局。[2]

2.1 媒体查询

媒体查询主要是对屏幕分辨率进行查询识别，它使用不同的 CSS 样式来书写，以适应不同的媒体。

CSS中用@media screen语句来区分不同的设务，在设计页面时添加断点，不同的断点有不同的效果。如：@media(max-width:480)，@media(max-width:767)，@media(max-width:979)，@media(max-width:1200)，这些不同的查询断点就是临界点。跨过这些临界点，网页的布局就会发生变化，不同的媒体就会有不同的页面展示。

2.2 流式布局

流式布局即百分比布局，主要是靠百分比进行排版。百分比的排版方式不同于固定的px像素排版，它不固定具体尺寸，可随着不同的设备自动调整大小，在不同分辨率下显示相同的版式，如设置网页主体的宽度为80%，而不是固定地使用px像素。

2.3 弹性图片

不同的设备有不同的分辨率，在PC端，因为屏幕较大，可以展示比较大的图片，而切换到PAD或者手机端时，在PC端能够正常展示的图片会因屏幕尺寸变小而无法正常展示，这就需要页面中的图片能够弹性显示。

弹性图片指的是不给图片设置固定尺寸而是根据设备不同的分辨率进行缩放，用来适应各种设备的尺寸，这对于网站页面的展示是极为重要的。要实现弹性图片展示，CSS实现方法非常简单，就是图片采用百分比而不是固定像素：img{max-width:100%;}。

2.4 弹性盒子布局

弹性盒子布局即Flex布局，任何一个容器都可以指定为Flex布局。

弹性盒子布局能够根据浏览器窗口大小的改变自行扩展或收缩内部元素，智能调整元素之间的间隔，如给标签加上属性display:flex，该标签就成为了flex容器。

3 Bootstrap框架技术对响应式高校招生网站的开发

3.1 Bootstrap概述

Bootstrap是基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，它将超文本标记语言、级联样式表和JavaScript有机地集成在一起，使得基于Bootstrap框架开发的页面能够适应不同大小设备的显示，降低了开发成本，提高了网站开发效率。[3]

3.2 栅格系统

栅格系统（grid systems）也叫“网格系统”，它运用固定的网格，遵循一定的规则，进行页面的布局设计，使布局规范简洁有规则。开发响应式页面时，利用栅格可以模块化地管理元素，让页面更有层次感。栅格系统生成之后，每一格都对应屏幕的百分比，如，.col-xs-1:5%, col-xs-2:10%, col-xs-3:15%，依此类推，col-xs-20:100%，每个模块对应不同的栅格，对网站页面进行模块化管理，实现对网站页面的响应式开发。

3.3 Bootstrap对响应式高校招生网站的开发

（1）生成栅格系统

根据网页布局，生成栅格系统，下载栅格系统css文件到网站目录。一般栅格系统css文件名为bootstrap.css，把此css文件加载在页面head头部，语句为：”；另外在body的后面加载jQuery.min.js文件，即可以在模拟设备上进行测试，检查是否响应。

（2）前端静态页面开发

静态页面的开发原则是按照网页PS设计原图来开发。在设计响应式高校招生网站时，最先的步骤是PS制图，设计出网站首页面、二级页面、三级页面，这样前端开发就能根据PS图来开发静态页面。

在进行前端静态页面开发时，可以将招生网站页面划分为多个模块，如头部、底部、列表、侧边栏等，在HTML5中写CSS样式、.js文件，搭建出各个模块。每个模块都有自己独立的功能与文件，在开发的每一个子页面中分别调用所需模块，这样在需要修改网站页面时，只要修改对应的模块，而不需要再修改页面。

招生网站的设计遵循操作简单且美观的原则，在网站的开发时可以使用 Bootstrap提供的插件，如bootstrap-table表格插件可以对招生网站考生信息记录进行查询、分布、排序等操作；使用bootstrap-table表格插件和jstree树形列表插件构架二级页面左侧树，对树列表条件和查询条件进行处理；使用bootstrap datetimepicker日期插件来展示当前日期。

（3）网站实现

前端静态页面开发完成，之后给网站分配域名、进行后台数据库设计、前台服务器配置，接着进行站点、栏目等一系列配置，响应式的高校招生网站就实现了。

4 结语

Bootstrap的响应式高校招生网站，可以使用不同设备（包括手机、平板电脑、台式机）进行访问，提高了网页展示的质量，满足考生及家长对招生信息的浏览与关注，给用户带来了更好的视觉体验。

[1] 严珩. 小微公司官网的响应式网站开发与实现[J]. 电子技术与软件工程, 2018 (20): 58.

[2] 张倩. 基于检验检测行业电子商务平台的视觉设计研究[J]. 科技与创新, 2019 (4): 69-70+72.

[3] 傅翠玉, 王少茹, 洪秀金. Bootstrap框架在响应式WEB开发中的应用[J]. 电脑知识与技术, 2018 (21): 85-86.

Development of Responsive College Enrollment Website Based on Bootstrap

TaoYu, Gong Hualan, Guo Zifei

In this paper, the development of the responsive enrollment website based on Bootstrap is proposed according to the demand of responsive design of college enrollment website. The advantages of Bootstrap framework technology and its key grid system of layout tool are analyzed, and some knowledge about the development of college enrollment website is offered.

responsive design; Bootstrap; grid system

TP311.52

A

1009－8429(2020)03－0005－03

2020-06-11

2020年江苏省高等学校大学生创新创业训练计划项目（202011288006Y）

陶 瑜（1980－），女，沙洲职业工学院信息技术中心工程师；

龚花兰（1965－），女，沙洲职业工学院信息技术中心高级工程师；

郭自飞（2000－），男，沙洲职业工学院电子信息工程系2019级计算机专业学生。