Bootstrap响应式设计应用研究*——以大学生创业服务网为例

邬紫琴 ，卢诗怡 ，张 妮

（广西农业职业技术学院，广西 南宁 530007）

随着移动互联网的发展，以智能手机为代表的移动终端设备越来越普及，利用移动设备获取资源成为大众重要的学习方式。然而，原大学生创业服务网是依托PC端而建，在以往传统的PC电脑上浏览起来很便捷，而在移动设备上虽然也可以访问，但是却需要用户通过手动调整、缩放页面等操作来获取信息，无法获得良好的用户体验感。相比之下，响应式设计使用了具有更加弹性的机制。响应式设计是指能让同一个页面根据不同显示设备的屏幕尺寸自动调整网页布局，保证页面呈现最佳显示效果。大学生创业服务网中使用响应式设计只需要修改前端设计，并不涉及后台的修改，开发成本大大降低，同时一套网站适应了不同的尺寸的终端设备，运行维护便捷，还保证了网站地址的唯一性。

1 响应式设计理念

响应式网页设计最早是由网页设计师Ethan Marcotte提出的。响应式网页设计的理念是页面的设计与开发应根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的调整[1]。这就意味着，只需要制作一套网站便可以自动适应不同的终端设备。相对于经常采用固定布局的传统网页设计，响应式网页更强调设计的灵活性，它通常使用模块化设计，页面中每个元素的大小、位置甚至表现形式都是动态的，能够依据终端设备尺寸的大小而自动适应，并呈现出较好的网页效果。面对越来越多样化的终端设备以及操作系统的差异，响应式网页设计强大的兼容性、适应性和跨平台的特性让其越来越受到广大网页制作者的青睐。

目前，常见的响应式设计的框架主要有Bootstrap、Foundatiton、GroundworkCSS、Compass CSS 等，这些框架都几乎使用了响应式网格系统，包涵了丰富的样式和组件，利用这些框架能够快速地进行响应式网站的开发。

2 Bootstrap框架

2.1 Bootstrap框架介绍

Bootstrap是基于HTML、CSS、JavaScript的一个前端框架，是GitHub上非常热门的开源项目。它由动态CSS语言Less写成，主要包括了全局CSS样式、组件、JavaScript插件和定制四大部分。CSS样式提供了很多常用的样式，开发者通过直接引用类名，就可方便地设置网页的各类CSS样式，以及设计出先进的栅格系统；组件部分提供了大量可重复使用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等多种的功能；JavaScript插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件，或者逐个引入到页面中；框架还可通过自定义Bootstrap 组件、Less 变量和 jQuery 插件，定制一份属于自己的 Bootstrap 版本[2]。

2.2 Bootstrap框架的特点

Bootstrap框架能很好地适应各种设备，且应用简单，上手速度快。其主要具有以下几个特点：

1）开发速度快，容易上手。Bootstrap集成了很多的样式、组件和插件，只要简单地引用即可得到需要的网页设计，不需要另外编写大量的代码。而且对于使用人员而言，只要掌握简单的HTML和CSS语法便很容易使用。

2）移动优先，兼容性好。Bootstrap框架提供了一套响应式、移动设备优先的流式栅格系统，运用该栅格系统可便捷地让网页适应不同特性的显示设备。不仅支持主流的浏览器，而且还充分贯彻了移动优先的宗旨，全面支持移动平台的开发。

3）插件丰富，且易于修改。Bootstrap框架内置了丰富的jQuery插件，是基于jQuery进行个性化完善的一套框架，使用者可以便捷地实现各种响应式功能[3]。同时，该框架的代码编写非常简洁，便于开发者对样式进行修改，以实现个性化网页的设计。

3 Bootstrap响应式设计在大学生创业服务网的具体应用

鉴于移动端浏览逐渐普及的趋势，以及在综合分析多种智能终端设备的环境以及考虑后期维护、人力技术成本的前提下，课题组决定采用Bootstrap框架对学校大学生创业服务网进行响应式设计和开发。

3.1 设计方案

响应式网页设计能自适应各种终端设备，这也决定了其与传统PC网页相比在前期网页设计上最大的不同是要兼顾不同尺寸的终端设备。虽然响应式的重要特点之一便是移动优先，但是考虑到大学生创业服务网站的很多访问者还是通过PC端进行浏览，所以在设计过程中，采用了以PC浏览为主、兼顾移动浏览为辅的思路进行设计。大学生创业服务网站在改版设计过程中，尽量保留了原网站的主体内容，但是在界面上进行了精心的设计。大学生创业服务网设计主要分为header头部导航、section网页主体、footer网页底部三部分内容。其中，header头部包含logo信息和网页主菜单，section主体部分包含了大图展示以及各栏目信息模块，footer底部主要就是简单的版权信息。在传统的PC端浏览中，大学生创业服务网主要采取经典的三栏显示布局。而在小屏幕的移动浏览中则采用单栏式瀑布流的方式进行优化显示[4]。

3.2 网页设计与开发

3.2.1 Bootstrap框架的下载与应用

Bootstrap的安装非常便捷，其官网上提供了未编译的源代码和预编译的压缩版本。为了使用方便，大学生创业服务网使用的是Bootstrap的预编译版本。预编译的 Bootstrap主要包含了已编译的 CSS 和 JS（bootstrap.*），以及已编译压缩的 CSS 和 JS（bootstrap.min.*），同时也包含了 Glyphicons 的字体。为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

同时为了使其成为一个Bootstrap模板，需要包含响应的CSS和JS文件，加入如下文件，就可以开始用Bootstrap开发网站和应用程序了。

3.2.2 页面框架和布局设计

网页方案设计好之后，便着力实现网页的基本框架和布局设计。创业服务网主要采用HTML5进行整体框架建设，大学生创业服务网在传统的PC端浏览中显示的是三栏布局，而在小屏幕的手机端的浏览中显示的是单栏的布局，主要采用的是基于Bootstrap的栅格式布局，网站的结构代码大致如下：

至此，基于Bootstrap的大学生创业服务网响应式框架基本完成，只需在对应的模块添加对应的代码便可得到想要的效果。鉴于不同的设备，屏幕的宽度、比例都不一样，为了使网页能适应不同的屏幕尺寸，Bootstrap主要通过其媒体查询有效地解决问题。如上代码中，主要引用了class=“col-sm-4”样式，使大学生创业服务网在大中屏幕主体内容按照4∶4∶4的比例分三栏显示，而在小屏幕的浏览中，主体内容单栏显示。同时，针对在IE9以下的浏览器对HTML5不能完全兼容的问题，采用引入html5.min.js和respond.min.js文件进行解决[5]。

3.2.3 导航菜单的响应式设计

在传统的PC浏览中，因为屏幕空间充足，一般主菜单都全部显示出来，而在移动手机端浏览中，因为屏幕比较小，所以一般都是折叠起来的。大学生创业服务网的主菜单主要包含有首页、中心简介、新闻动态、通知公告、基地项目、政策文件、专项宣传、合作共赢等栏目，同时，包含有网站LOGO，主要通过采用Bootstrap的折叠导航菜单实现，其实现关键代码如下：

该响应式菜单主要应用了Bootstrap框架中的媒体查询@media、navbar-toggler样式和 data-toggle属性实现导航的折叠功能，当菜单在屏幕尺寸小于768px时，菜单实现响应式的折叠导航。

3.2.4 前端优化和系统整合

基于Bootstrap的大学生创业服务网的前端的响应式设计已基本完成，对于一些细节还需要进一步进行优化，比如为了让不同设备对图片有更好的兼容和显示，对图片采用了img-fluid样式。同时，前端的设计也仅仅只是完成静态的设计，还需要嵌入对应的代码，真正实现网站信息的动态发布、查询等功能。

3.3 调试与效果展示

调试是网站建设的重要环节，便于进一步发现问题并修正。对初步搭建完成的广西农业职业集团网进行了调试，首先在360、IE、谷歌、火狐等常用浏览器进行了调试，测试网页是否存在错位等现象。然后利用谷歌浏览器提供的模拟各种不同设备尺寸的窗口进行响应式的测试。最后，还通过在PC、平板电脑以及不同尺寸的手机上进行测试，以充分保证网站的正常运行。

4 结语

仿真结果表明，Bootstrap作为一款优秀的前端开发框架，其代码开源，且具有很强的灵活性和扩展性，利用它能高效便捷地实现各类响应网页的设计与开发。课题组基于Bootstrap框架高效便捷地对大学生创业服务网进行了响应式的改版设计，为大学生创业服务信息的发布、资源的共享和信息化建设提供服务。此外，随着移动设备的广泛使用，响应式网页也成为当前网页设计开发的必然趋势，而Bootstrap的出现，让广大开发者能够以较小的代价完成响应式网页的前端设计，且能给用户带来了更好的体验感，值得大力推广。