基于Bootstrap框架的响应式课程设计与实现-以《高空气象观测》网络课程为例论文

基于Bootstrap框架的响应式课程设计与实现
——以《高空气象观测》网络课程为例

王永锋

(中国气象局气象干部培训学院,北京)

摘 要: 随着智能手机的普及以及网络学习逐渐向移动平台方向发展的趋势,响应式网络课程的设计作为一种新的设计理念,能实现一个课件对多种设备的兼容。本文以《高空气象观测》网络课程为例,探索并实践了基于Bootstrap框架的响应式课程设计,对改造传统网络课程适应移动学习环境具有重要的应用价值。

关键词: 响应式课程设计;Bootstrap框架;响应式布局

干部学院在开展面授培训的同时,大力开展远程培训,建成能够支持1万人同时在线、1000人同时浏览学习的远程教育网,充分发挥了远程网络培训超时空、跨地域、强辐射、低成本的优势。随着嵌入式硬件技术的不断发展以及智能手机、平板电脑、智能手表等各种智能移动设备的广泛应用,人们对知识的渴求日益增加,目前的教育平台不能满足现代社会中人们的碎片化学习需求。正是基于这种现状,为了适应互联网应用逐渐向移动平台方向发展的趋势,也建设移动学习平台,这就使得大部分在 PC 机上显示的教学资源不能很好地在移动互联设备上直接呈现。不能保持不同系统平台环境下网页布局的一致性,如何使传统课程资源适应移动学习,适配所有终端设备成为一个新的问题。基于Bootstrap 框架的响应式网页设计就是一种全新的设计理念, 根据这一理念所制作出来的网页框架可以作为通用模板,开发者根据需求选择模板,从而设计出适应不同设备的网站,增强用户体验[1]

暗笑了半晌的钱总倒是从王祥身上看到了商机。他起初还在隔岸观火,不亦乐乎。不过看王祥年轻气盛,这次虽然被骗得挺惨,但是打架都是从挨打学起,有了这次被骗的经历,王祥也算是从老道那里出师了。于是就想收下王祥当自己手下:

本文以《高空气象观测》网络课程为例,探索并实践了基于Bootstrap 框架的响应式课程设计,这对改造传统网络课程适应移动学习环境具有重要的应用价值。

一 Bootstrap框架介绍

Bootstrap是由Twitter公司主导开发的,基于HTML5、 CSS 和 JS 框架的一个用于前端开发的最流行的开源工具包,主要用于开发响应式布局、 移动设备优先的Web项目,提供了精致、经典、通用,并使用HTML5、 CSS 和JS构建的组件,包括布局、网格、表格、按钮、表单、导航等,让前端开发更快速、简单地构建网页并适配所有设备。

二 响应式栅格系统

响应式设计是目前比较流行的web应用技术,开发人员只需正确地实现响应式web设计,网页就可以适应于不同的设备。而Bootstrap响应式栅格系统抛弃了原有的以PC为核心的设计思维,完全内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口尺寸的增加,系统会自动分为最多12列,通过指定1到12的值来表示其跨越的范围。例如,3个等宽的列可以使用3个.col-md-4(适用于中等屏幕)来创建。整个系统通过一系列的行(row)与列(column)的组合创建页面布局。

另外通过媒体查询技术实现对不同设备的灵活支持。也包括一个最大宽度,限制CSS到一组较窄的设备中。

@media(max-width:767px)/*超小屏幕

@media(min-width:768px)and(maxwidth:991px)/*小屏幕

@media(min-width:992px)and(maxwidth:1199px)/*中等屏幕

@media(min-width:1200px)/* 大屏幕

通过表1可查看 Boot-strap 的响应式栅格系统是如何在多种屏幕设备上工作的。

可见当时的劳动管理是非常精细的,队干要进行私自加减工分几乎不可能。因为在收工时或次日,记分员便会向大家声报各人的工分数,同时两名记分员均保存一份工分表,总记工员每月还会按时张榜公布。所以,队干暗箱操作的可能性不大,即便有,社员也会很快察觉。

表1 Bootstrap栅格系统设备与布局关系[2]

三 基于Boot-strap响应式设计的网络课程页面实现

图1

为了满足干部学院远程教育网的课件能够自动适应移动学习平台的需求, 《高空气象观测》 网络课程确立了实现响应式设计的技术目标。同时只考虑了两个媒体查询的断点: 在小于768px的小屏中使用如图1所示的布局 ,否则就切换到图2的布局。

珠三角区域:以出口机电产品为主,我国对美49%的机电较重、42%的机电较轻产品由珠三角出口,也是涉税商品占比最高的区域。预计珠三角受影响箱源约100万TEU。

图2

(一) 排版架构

图3

编写页面结构代码如下:

图4

页面排版的好坏直接影响产品风格。由于手机和电脑相比,屏幕小很多,不能把电脑所有的应用都移植过来,秉持一个简明的原则。本例手机排版结构包括两部分:每章导航(.navlist)和主体。主体又包括了标题、学习菜单(.menu1)、知识点视频讲解(.video1)和每章知识点(.zsd),结构示意图如图3所示。电脑排版结构示意图如图4所示。

(二) 头部区框架文件

<script src=”js/bootstrap.js”></script>

<!doctype html>

<html>

嘉善田歌作为音乐类非物质文化遗产存在着一种文化凝聚力,可以代表嘉善当地艺术文化、生活情趣和社交活动,是一种内在的、传统的、稳定的和珍贵的文化资源,拥有不可再生性。嘉善田歌的传承主体大致可以被分为三大类,传承者、传播者和接受者。要保护传承嘉善田歌文化关键就在于要优先保护传承主体,不断扩大受众群体以及社会管理机制创新这三个方面。

<head>

现阶段我国部分地区中出现中小微企业招工困难的问题,而与此同时随着教育普及化的不断深入发展,高校毕业生的数量逐年增多,大学生的职业生涯发展成为亟待解决的问题。企业的招工难及大学生就业难问题是多种因素影响下的结果,也是社会经济发展迅速与社会就业需求供给结构矛盾的重要反应,因此应着重解决我国就业结构中的矛盾性问题。

<meta http-equiv="X-UA-Compatible"content="IE=edge"><!--Edge模式告诉任何 IE 版本IE以最高级模式渲染文档,避免版本升级造成的影响--->

<meta charset="utf-8">

<meta name="viewport" content="width=devicewidth,initial-scale=1.0,maximum-scale=1.0,userscalable=0">

<title>高空气象观测</title>

<link href=”css/main.css” rel=”stylesheet”type=”text/css” />

<link href=”css/pages.css” rel=”stylesheet”type=”text/css” />

<link rel=”stylesheet” href=”css/bootstrap.min.css”>

②石孝友《卜算子》(见也如何暮):双调44字,上阕4句3仄韵,下阕4句3仄韵。句式:5575。5575。

<script type=text/javascript src=”js/jquery.min.js”></script>

.zsd em:hover{background:url(../images/zsdbg2.gif) left center no-repeat;cursor:pointer;}

为了把页面设计为Bootstrap标准模板,需要包含相应的CSS和JAVASCRIPI文件。主页文件为index.html,头部区主要框架模板如下:

</head>

《健康儿童行动计划(2018-2020年)》提出,到2020年,覆盖城乡的儿童健康服务体系进一步完善,儿童医疗保健服务能力不断提升,儿童健康水平得到提高。婴儿死亡率和5岁以下儿童死亡率分别控制在7.5‰和9.5‰以下,0-6个月婴儿纯母乳喂养率达到50%以上。该计划提出儿童健康促进行动、新生儿安全行动、出生缺陷综合防治行动、儿童早期发展行动、儿童营养改善行动、儿童重点疾病防治行动、儿童医疗卫生服务改善行动、儿童健康科技创新行动等八项行动。

.zsd{width:100%;border-right:1px solid#d0d6d9;min-height:auto;}

</html>

(三) 响应式布局结构

使用CSS3 Media Query(媒介查询)是响应式设计的核心,它根据条件告诉浏览器如何为指定视图宽度渲染页面。在响应式设计中,一般通过独立的样式表,根据屏幕宽度自动调整布局。本案例中,我们定制了Bootstrap的less文件,以便更灵活地实现所需的功能,样式表为pages.css,用于修饰上面HTML标记的CSS代码如下:

当视图宽度小于等于767像素时,如下规则将会生效。

@media screen and (max-width:767px){

.menu1{zoom:1;overflow:hidden;width:100%;displ ay:block;background:#1f8adc;}

1.来稿文风体裁不限,内容须符合法律规定,且必须为原创,禁抄袭剽窃,文责自负。稿件中引用的资料、史实、引语、数字,涉及的人物姓名及其职务、职称,以及有关单位部门的名称(一般要求全称)等均应准确无误。

.menu1 a{float:left;width:15%;height:22px;lineheight:22px;color:#fff;background:#1f8adc;textalign:center;font-size:12px;cursor:pointer;borderradius: 3px;margin:15px 0.75%;}

.menu1 a.current{background:#f2c53a;color:#333;font-weight:bold;}

.main_con .l_side_con{ margin:0px;width:100%;min-height:auto;}

.zsd em{background:url(../images/zsdbg3.gif);display:block;height:33px;lineheight:33px;border-bottom:1px;margin:4px 10px;padding-bottom:4px;}

.play_box{ width:100%;margin-bottom:0;}

3) 对比模型B、C和模型D、E,可知增设的抗震墙在结构中不参与承受竖向荷载时较参与承受竖向荷载抗震能力有所提高.

.play_box video{width:100%;float: left;}

<body>………..</body>

农业规模化是现代农业一个重要标志。它代表着农业机械化,没有机械化,规模农业的生产和管理才能实现;还意味着农业标准化、品牌化。机械化智能化参与的农业生产能最大限度实现标准化,使品牌需要的质量与稳定有了可靠保障;规模化还蕴含着农业效益的提升。过去有专家说“减少农民是致富农民的唯一出路”——减少农民意味着农业经营主体可使用管理更多土地,规模化以及规模化带来的效益才可能实现。

.con2{border:0px solid #d0d6d9;height:auto;marg in:0;zoom:1;overflow:hidden;}

<script type=text/javascript src=”js/jwplayer.js”></script>

.main_con .r_side_con{ display:none;} }当视图宽度大于等于768像素时,如下规则将会生效。

@media screen and (min-width:768px){

.menu{zoom:1;overflow:hidden;}

.menu a{float:left;width:144px;height:42px;line-height:42px;background:url(../images/study.gif) no-repeat;text-align:center;font-size:14px;cursor:pointer;}

.menu a.current{background:url(../images/study_m_current.gif);color:#333;font-weight:bold;}

.con2{border:1px solid #d0d6d9;height:371px;margin:20px 0 0 0;zoom:1;overflow:hidden;}.play_box{width:660px;float:right}.play_box video{width:100%;}

.zsd{width:222px;border-right:1px solid#d0d6d9;min-height:422px;}

这里有各种古里精怪的新奇物品,如大好几号的木铅笔、手工制作的硬皮笔记本,印着毛主席、奥巴马头像的杯子和本子、各种潮流的鼠标垫,或者写着各种红色标语的饰物。这里还是实现梦想的虚幻空间,你可以“寄给未来/过去的自己一张明信片”。这里有“老相机制造坊”逗号先生、精致的饰品小店“八六子”、萌物大合集“一家很奇特的小店”。还有许多迎合时下年轻人爱好的地方,如“猫咪咖啡馆”:一家可以玩猫的咖啡馆、“芝士火锅店”:纯粹是传统与西式结合的产物。此外,以旗袍、围巾、高级成衣等为代表的服饰风格更是引领着都市潮流。正因为这些新面孔、新做法、新理念,才吸引住了人们的眼球,并产生消费的欲望。

.zsd em{background:url(../images/zsdbg3.gif) left center no-repeat;display:block;font-style:normal;height:27px;line-height:31px;border-bottom:1px dotted #ddd;margin:4px 10px;padding-bottom:4px;}

这些编码方法具有一定的主观性,但研究目的只是借波特一致性系数以说明标准与试卷a的一致性是否比试卷b好,编码标准是一致的,能降低影响,当然如果有更多的人参与到编码中,可以降低主观性.

.zsd em:hover{background:url(../images/zsdbg2.gif) left center no-repeat;cursor:pointer;}}

上面的两端样式代码展示了2个媒介查询,为指定的视图宽度指定不同的CSS规则来实现不同的布局。演示效果如图1和图2所示。

(四) 响应式导航条

本案例在Bootstrap响应式导航条的基础上设计,当视口宽度小于等于768像素时,导航条在移动设备上折叠; 当视口宽度大于等于768像素时, 导航条内部的元素不显示。导航代码如下:

(五) Javascript

Bootstrap使用jquery的Javascript,它不会使每个用户都为了相似的功能,去下载一份相同的代码,而是将常用的函数放进去一个代码库,按需取用。就是说写更少的代码,实现更多的交互效果和应用功能[3]。为了动态改变知识点列表播放内容,本案例中使用document对象函数,获取指定节点内容,这样可以减少HTTP请求, 加快站点的加载速度。代码如下:

太阳亮堂堂地升了起来,这一早晨,他一直在绊绊跌跌地,朝着光辉的海洋上的那条船走。天气好极了。这是高纬度地方的那种短暂的晚秋。它可能连续一个星期。也许明后天就会结束。

四 总结

Bootstrap作为前端开发框架的佼佼者,能够自动判断不同设备并根据这些不同的需求自行对页面进行响应式调整,以其灵活性和可扩展性,确保整个WEB应用的风格一致,加速了响应式网页项目开发的进程, 推动了响应式技术的发展。通过本案例的开发实践,对于改造传统网络课程适应干部学院移动学习平台具有很大的参考价值,避免了由于浏览设备差异进行的重复开发,不仅提高了效率,节省了大量人力物力,也保证了 PC 端和移动端网页视觉效果的一致性。

参考文献

[1] 舒后,熊一帆,葛雪娇.基于Bootstrap框架的响应式网页设计与实现[J].北京印刷学院学报,2016,24(2) :47-52.

[2] 未来科技 .Bootstrap实践-从入门到精通 [M].北京:中国水利水电出版社, 2017:8.

[3] 刘春茂 .HTML5+CSS3+JAVASCRIPT 网页设计案例课堂 [M].北京:清华大学出版社, 2018:1.

本文引用格式: 王永锋.基于Bootstrap框架的响应式课程设计与实现 ——以《高空气象观测》网络课程为例[J].教育现代化,2019,6(53):190-194,210.

doi: 10.16541/j.cnki.2095-8420.2019.53.065

作者简介 :王永锋,男,工程师,中国气象局气象干部培训学院,从事多媒体技术、课件开发方面的工作。

标签:;  ;  ;  ;  

基于Bootstrap框架的响应式课程设计与实现-以《高空气象观测》网络课程为例论文
下载Doc文档

猜你喜欢