SCI论文（www.lunwensci.com）:
摘要：随着智能移动终端的不断普及，传统的网页设计已经不能适应当前不同移动终端设备的需求。本文探讨了响应式设计理念，利用Bootstrap响应式设计及其关键技术，完成服务高校师生信息发布平台（以下简称平台）响应式网页前端的设计，较好地解决了不同媒体设备的使用因智能终端多样化发展面临的问题，对响应式网站的开发具有较好的实践和借鉴意义。
关键词：响应式设计；Bootstrap；高校信息发布平台
本文引用格式：杨萃洁.Bootstrap响应式设计在服务高校师生信息发布平台开发中的应用实践探究[J].教育现代化,2019,6(25):111-114,124.
互联网技术的迅猛发展催生了各种不同的移动终端设备，并且迅速普及到各类人群中，人们上网的方式已经从过去的电脑时代跨越到了现在的移动智能终端时代。而移动终端设备屏幕尺寸的多样化，使得在Web开发中一个页面能够兼容不同终端已经成为了网站开发者们的一致追求。而Bootstrap响应式的网页设计，就是为了帮助开发者更快速地完成一套网页就能够自适应任意尺寸的终端设备，尤其是Bootstrap具有支持移动优先，开发简单的特点，已经成为了当前响应式网站设计与开发的最热门的框架之一。
一响应式网页设计思想
响应式网页设计是由伊桑马科特（Ethan Marcotte）提出的，是指可以根据各种设备屏幕尺寸的大小，自动调整出适合的网页。但是网站开发者在进行网页设计时，需要强调模块化设计，以便能达到良好的页面显示效果。
二 Bootstrap框架
Bootstrap是目前最受欢迎的前端框架之一，因为其响应式、移动设备优先的设计理念，还包含有实用的布局组件、全局的CSS样式和JS插件，能够快速高效地布局适应不同大小屏幕的网页，并能够根据用户使用的设备尺寸和用户操作，自动调整页面的布局方式、图片尺寸和相应的脚本代码来适应各种屏幕尺寸的终端设备，它让前端开发变得更快速、简单。[2]本人在使用该框架进行响应式网站设计过程中，认为其具有以下几个比较突出的重要特性。
（一）移动设备优先
当用户使用移动终端设备浏览PC端的网页时，网页将会被缩放至不同设备屏幕的大小来显示完整的网页效果，那样会使用户浏览起来很不舒适。而Bootstrap支持移动设备优先的理念，只要在页面的<head>区域添meta视口标签viewport属性，确定网页在加载时根据原始的比例显示网页，并设置user-scalable=no来禁止缩放，让用户可以通过滚动条或者滑动屏幕进行浏览页面，达到原有的页面效果。
（二）丰富和强大的组件和插件集
Bootstrap提供了丰富的组件和插件，可便捷地创建图像、导航、按钮组、图标、输入框、面板组等。它自带的javaScript插件，包括过度效果、模态框、下拉菜单、滚动监听等完全遵循jQuery的使用规范和习惯，使用起来也非常简单，只需要将其引入页面即可。
（三）灵活的响应式栅格系统
Bootstrap包含了一个具有响应式、移动设备优先的栅格系统。该系统是通过一系列行与列的组合来进行页面的布局，它先定义容器的大小，并将它分成12等份，通过调整内外边距，[3]将设置的内容放在创建好的布局中。它还包含了用于简单布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类，可以根据页面布局需求灵活划分页面元素所跨越的列数，从而满足页面布局需求。
三 Bootstrap响应式设计在服务高校师生信息发布平台中的应用
（一）Bootstrap的下载与安装
登录Bootstrap中文网（http://www.bootcss.com）下载Bootstrap压缩包，将该压缩包解压到WEB项目中，然后依次将Bootstrap的三个文件:bootstrap.min.css、jquery.min.js、bootstrap.min.js引入到新建的HTML页面中，其中bootstrap.min.css需要引入到文档的<head>区域，而jquery.min.js、bootstrap.min.js这两个文件需要放在页面的最底部。需要特别注意的是由于Bootstrap依赖于Jquery，所以在引入这两个文件时，必须将jquery.min.js放在bootstrap.min.js之前。
（二）利用框架的相关控件
服务高校师生信息发布平台头部运用Bootstrap的响应式导航，宣传栏运用Carousel图片轮播控件，主体内容使用栅格系统和媒体对象等相关控件，然后结合之前设计好的页面进行布局，就可以便捷地完成能够适应不同终端设备的web信息发布平台，大大提高了项目开发的效率，[1]并降低了后期的维护成本。
（三）服务高校师生信息发布平台页面基于Bootstrap响应式设计中的实现过程
1.平台页面基本框架设计
根据前期平台的规划设计，对平台在中等屏幕以上和小屏幕以下进行的页面框架布局设计如下图1、图2所示：
2.平台设计实施方案
服务高校师生信息发布平台在进行网页设计时，结合传统PC和当前广泛应用的移动终端用户浏览的需求，利用响应式Bootstrap框架对网页进行布局，让它在各种屏幕都能够较好地显示浏览效果。整体方案以移动优先的理念进行模块化设计，即将页面分别为网页头部、轮播图宣传栏、网站主体内容和网站底部等四个模块。其中，网页头部模块又包括Logo和导航条两个子模块，当使用手机等超小屏幕移动端设备进行浏览时，Logo采用响应式设计，并限制最小值，而导航条则以汉堡按钮的形式进行折叠或展开显示；轮播图宣传栏主要是以轮播图的方式展示平台的文化和广告，采用Bootstrap图片的响应式特性实现图片的自适应；[5]网页主体部分又包括公告栏、公益服务、校园招聘、闲置物品共享、二手信息等五个子模块，并按照瀑布流式的布局方式从上到下进行布局，当屏幕为中或者大尺寸时，页面以经典方式利用Bootstraps的栅格系统进行响应式设计，网页的主体部分两行按照4:4:4和6:6两种经典比例进行布局；网页底部由于内容和布局都比较简单，所以直接使用百分百的自适应布局方式。
3.平台页面实现效果
服务高校师生信息发布平台页面在中等屏幕以上和小屏幕以下设备中实现的效果如下图3、图4所示。
（
四）关键技术
1.设置视口
在进行页面布局前首先要进行视口的设置，确保网页在较小的设备中加载时仍然能够按照原始的比例显示，从而达到原有的网页效果。具体实现代码如下：
<meta name=”viewport”content=”user-scalable = no，initial- scale=1.0，width =
device-width，minimum-scale = 1.0，maximum-scale = 1.0”/>
其中width=device-width是将网页宽度设置为等于屏幕的宽度；user-scalable=no是禁止用户缩放，但可以通过滚动条浏览页面；initial-scale=1.0是将原始缩放比例设置为1.0，即将页面初始大小设置为屏幕的100%；maximum-scale=1.0和minimum-scale=1.0是设置最大和最小比例为1。
2.网页布局的实现
在进行页面布局时，采用先针对适应小屏幕进行模块化设计，然后再逐步针对大屏幕增强内容和页面的布局。在此根据服务高校师生信息发布平台的前期需求分析，将页面基本框架分为header（包含logo和导航）、carousel（宣传轮播图）、section（主体内容）和footer四个部分，页面模块化布局及实现代码如图5、图6所示。
3.响应式导航的实现
响应式导航条的实现是在屏幕小于768像素的时候，将横向布局的导航条折叠变成竖向布局并以汉堡按钮的形式显示，用户可以通过单击汉堡按钮实现导航条的展开与折叠。[4]其中汉堡按钮图标的实现主要为span标签添加.icon-bar这个类即可，而按钮是否被触发则是通过button的data-toggle="collapse"，告诉JavaScript以折叠形式触发事件，data-target="#navbar-collapse-1"，告知JavaScript触发事件后执行的id为navbar-collapse-1的元素对象。navbar-collapse-1样式则是指明最终需要折叠的导航条菜单项。核心代码如下图7所示。
4.主体内容栅格布局的应用
利用Bootstrap的栅格系统，将主体内容分两大模块，分两行进行布局，其中第一个模块将公告栏、公益服务和校园招聘三个栏目依据栅格系统的理念按4:4:4分三列横向布局，其内容在中和大屏幕下按.col-md-4布局；在小屏和超小屏下，.col-sm-12、.col-xs-12表示三个栏目的内容按瀑布流的形式依次排列，并且每块内容单独占满屏幕的12列，即占满行；第二模块将闲置物品共享、二手信息两个栏目按6:6分两列横向布局，其内容在中和大屏幕下按.col-md-6显示；在小屏和超小屏下，.col-sm-12、.col-xs-12表示两个栏目的内容按照瀑布流的形式依次排列，并且每块内容都占满行。核心代码如图8所示。
四 Bootstrap响应式设计需要注意几个的问题
（一）合理地使用.container容器
Bootstrap中本身就提供了.container和.container-fluid两个容器类。其中.container类用于固定宽度并支持响应式布局的容器；container-fluid类用于100%宽度布局，占据全部视口的容器。[6]两个类都默认设置了左右padding值为15像素，使得页面内容不紧贴于浏览器边缘，在页面设计过程中建议不要再在.container的容器中嵌入一个或者多个container容器。
（二）“行（row）”必须包含在布局容器.container或.container-fluid类中
在应用Bootstrap栅格系统时，“行(row)”必须包含在布局容器.container或.container-fluid类中，并且内容应当放置在“列（column）”内，同时只有“列（column）”可以作为行的直接子元素，只有这样才能为其赋予合适的排列和内补。
（三）不要直接修改Bootstrap的默认样式
在使用Bootstrap进行页面布局中，有时候需要修改Bootstrap提供的默认样式，但建议不要直接修改Bootstrap里默认的CSS样式，可以通过Bootstrap中对应的类名编写自己的CSS样式来覆盖掉这些默认的样式，这里需要注意的是自己编写的样式文件必须写在默认样式之后。
五 结束语
网站的响应式设计是个复杂的过程，细节上需要根据不同的浏览器结合不同设备进行反复的测试和调整。服务高校师生信息发布平台使用Bootstrap进行响应式web设计，充分应用其提供的标准UI设计场景及跨浏览器的解决方案，大大地提高了项目前端开发的工作效率。
参考文献
[1]Bootstrap[EB/OL].http：//www.bootcss.com/
[2]曹世雄.浅析响应式在高校网站网页设计中的应用[J].计算机产品与流通,2019（1）：284-285.
[3]傅翠玉.Bootstrap框架在响应式WEB开发中的应用[J].电脑知识与技术,2018（12）：85-86.
[4]杨明辉.中职计算机网页设计教学探讨[J].教育现代化,2016,3(30):310-311.
[5]邱飞.浅析新媒体环境下高校传媒专业实践教学体系构建[J].教育现代化,2017,4(08):31-32+34.
[6]郭飞军.响应式Web设计在移动终端的实践探索[J].计算机时代,2018（5）:29-31.
关注SCI论文创作发表，寻求SCI论文修改润色、SCI论文代发表等服务支撑，请锁定SCI论文网！ 文章出自SCI论文网转载请注明出处：https://www.lunwensci.com/jiaoyulunwen/8923.html
