Bootstrap技术在Web移动开发中的应用研究

潘惠苹

摘  要： 移动设备的迅速普及和快速发展，对网页的开发设计工作提出了新的要求。在过去，由于上网设备单一，网页设计开发相对简单，但是随着移动设备的占比不断增长，对网页的兼容性要求越来越高，需要开发者能够在Bootstrap框架下做好web移动开发工作，只有这样才能让网页适应更多的设备，从而达到更好的视觉体验。

关键词： Bootstrap技术; Web移动开发; 网页

中图分类号：TP3          文献标志码：A     文章编号：1006-8228（2019）05-27-03

Abstract： With the rapid popularization and rapid development of mobile devices， new requirements have been put forward for the development and design of Web pages. In the past， Web design and development was relatively simple because of the single Internet devices. However， with the increasing proportion of mobile devices， the requirement for Web page compatibility is getting higher and higher. In order to make the web pages adapt to more devices， the developers are required to be well done with mobile Web development within the Bootstrap framework， so as to achieve a better visual experience.

Key words： Bootstrap technology; mobile Web development; Web page

0 引言

在Web移动开发过程中，需要在Bootstrap技术基础上，通过的良好的技术准备以及相应的开发工作，完成对移动端的有效开发工作，使网页设计能够适应不同设备的屏幕。本文对Web移动开发设计进行了简单概述，通过对响应式网页设计的探讨，以及对弹性化设计的分析等，实现对移动设备的完美兼容，能够更好地完成Web移动开发工作。

1 Web移动开发设计的简单概述

我国的智能移动终端普及率不断提高，迎来了的移动互联网发展的高峰，在这个阶段，传统的网站内容提供商，需要优化自身网站的页面，使其不仅能够适应传统的桌面设备，也能够支持移动设备，实现良好的兼容，从而提高网站的易用性。帮助企业顺利的推广自身，同时也能帮助人们以较为舒适的状态浏览的网站。因此，Web移动开发设计适用于那些没有足够的资金和技术能力来实现移动程序开发的用户和企业，同时对于一些互联网公司而言，也是必须要考虑的开发方向。这些都是对Web前端工程师的考验，只有出色的设计和良好的内容，才能够为今后移动互联网的迅猛发展提供重要的技术铺垫[1]。

2 Web移动开发分析

2.1 响应式网页设计概述

响应式网页设计与开发，需要其网页能够根据移动设备尺寸、屏幕分辨率、屏幕方向等众多参数（其中也包括用户的具体需求等），来对网页进行优化，使其能适应这些设备。从而能够对各种设备进行良好的兼容即有效的适应不同类型的设备，如PC机、平板电脑或者智能手机等等。根据实际设备的具体参数，对分辨率，页面布局以及显示方向等，都能够适应设备的屏幕，从而达到较为理想的显示效果。根据各种设备对网页的访问量来看，移动端占比更为庞大，为了能够得到快速的相应速度，需要的遵循“移动优先”的原则进行，尽可能的满足的移动端设备。在具体设计中，应该以用户体验为核心要素。并围绕其展开一定的布局和设计。然后，再考虑PC端设备，从而能够达到良好的适应效果[5]。

2.2 弹性化设计分析

在进行响应式网页设计过程中，需要的网页设计具有一定的弹性化，使其网络页面的展示效果能够根据设备尺寸的大小进行必要的切换，在不同设备下图片的大小可以实现自适应布局，大小可以自动调整，达到最佳的阅读效果。这样避免了页面割裂现象而破坏整体显示效果，以及对数据的使用过程在造成非常不利的影响。因此，在实际的应用过程中，响应式的网页设计，虽然不是最完美的解决方案，但也能够在一定程度上为用户访问网页提供一个很好的解决方案。

2.3 媒体查询服务

媒体查询服务在实际的Web开发设计过程中有着重要的应用。媒体查询服务需要根据不同的设备媒体类型以及显示条件针定义CSS样式表（又称之为层叠样式表）。在实现响应式的过程中，可以通过媒体查询服务，利用层叠样式表中的规章，指定媒体类型，使页面能够在不同的媒体类型下表现出不同的形式。在CSS、HTML和XML中都可以进行媒体查询设置。其中主要在CSS应用较多，通过对其进行适当的设计可以很方便的实现不同的页面设置规则。从而能够达到相关设计要求。

2.4 流式布局

传统PC端口的固定布局最外层的宽度是固定的，无论是处于怎样的环境中，其宽度都不会变化即都是一样的。这样在制作过程中更容易对整体界面进行优化，从而能制作出相對优良的页面布局。PC端口的固定布局这种相对的兼容性较差，并不能完美适配各种设备。但是流式布局能够有效解决这一问题，其外部容器的宽度能够适应设备屏幕，从而在达到良好的表现效果。因此在进行移动开发的过程中，不能将页面中各个组成的宽度设置为固定值，应当采用百分比。使其能够适应屏幕尺寸大小，从而在设备进行访问页面的时候能够和设备窗口相适应。还要利用CSS中的元素浮动属性，当显示设备的分辨率发生变化时，相应的显示内容也会根据页面的宽度进行变化，从而能够自动调整宽度，适应屏幕的变化[2]。

3 Bootstrap框架

Bootstrap是通过Twitter设计和开发的网页开发框架，其中包含了HTML、CSS等。其设计初衷是为了解决在不同设备下的兼容问题，如果按照传统技术进行开发，是很难实现的。而Bootstrap的有效利用，使其很好的解决这一问题，能够有效的适应不同设备的开发环境，让相应的网页开发工作变得较为容易，并且基于的Bootstrap框架下开发的网页以及相关产品，具有一定的可维护性，正是这些优点，让Bootstrap技术得到了迅猛发展，其提供了丰富多彩的开发模块，为各种功能的实现提供了多种方法，能够有效的帮助开发人员做好的网页的开发工作。

4 Bootstrap在Web开发设计中的应用

4.1 创建Bootstrap生产开发环境

为了能够有效的完成相应的Web前期开发，下载Bootstrap，根据相应的文件结构进行合理的安排，采用Bootstrap基本模板进行网页的开发工作。其中的文件类型要注意其具有一定的次序，如js要放在body之前，对于其中的jQuery.min.js要首先加载，进行元素的填充工作，并利用系统提供的组件进行排版，从而有效的完成相应的填充工作，最后需要在不同的设备进行必要的测试，使其能够达到相应的要求。

4.2 设计优化

为了达到良好的设计效果，需要根据实际情况优化，如Web页面设计效果图，需要编写自定义的html代码结构来優化，只有这样才能够根据实际情况，做好相应的代码设计，使html语义化。还可通过添加修改的CSS代码，使其能够实现Web的前端效果。设计人员之间应加强沟通，并对设计工作进行总结，对存在的问题进行综合分析，根据分析结果，寻找到代码结构与页面效果两者之间的平衡点从而获得较为理想设计效果[4]。

4.3 Bootstrap技术在Web移动开发中的应用技巧

在使用Bootstrap的过程中，需要研究源代码，例如基于Bootstrap的源代码，在使用过程中需要遵循一定的使用规范，使其在使用和维护的过程中都能够较为舒适，这需要技巧。如CSS声明顺利，属性相同应当归为一组，从而更好地完成相应的顺序排列。如positioning、box model、visual等等，还有相应的命名规范，需要参照Bootstrap源代码命名规则，使其能够添加和修改CSS代码，如下：

…

…

…

为了能够使用媒体查询，可以把相关代码放在一起，使其能够方便阅读和维护。从而提高代码效率，降低冗余出错率[3]。

4.4 移动设备兼容代码设置

为了能够的让网页适应不同尺寸的设备需要在中添加代码，如下：

Content="width-device=width，initial-scale-1.0">

这段代码的有效引入，可以让网页智能化排版，适应不同尺寸的移动端设备。另外，使设计元素的比例保持不变。如对超小屏幕、小屏幕、中等屏幕以及大屏幕等，通过对不同屏幕的有效支持，能够完成对相关设备的良好支持[2]。

4.5 实流式布局

在Bootstrap框架中采用栅格系统能实现页面的流式布局。所谓的栅格系统就是通过一系列的行与列的组合，创建页面布局，将页面内容放到创建好的布局正当中，就能够实现对各种屏幕兼容。网格系统原理相对来说较为简单，通过对容器定义其大小，平分为12份等等，通过流式布来对不同屏幕规格的设备进行列宽的控制，并通过CSS样式实现的无缝变换，从而获得较为理想的显示效果[6]。

5 总结

综上所述，在Web移动开发中需要采用Bootstrap技术作为重要框架体系，首先需要创建Bootstrap开发环境，并按照相关要求进行设计优化工作，还要注意在Web移动开发中的应用技巧，从而能够很好的实现相应的移动开发工作，使其能够用各种屏幕尺寸下的移动设备，从而达到更加良好的视觉体验。

参考文献（References）：

[1] 罗宏俊，冯瑞.基于Web技术进行移动应用开发和中间件的研究[J].计算机系统应用，2017.11：19-27

[2] 徐晓.基于Bootstrap技术的移动端Web开发研究[J].微型电脑应用，2018.9：4-6

[3] 余楷鑫.Bootstrap在Web移动开发中的应用[J].电脑知识与技术，2017.6：82-84

[4] 丁莲，张玲，杜巍.基于BootStrap的Web前端开发应用研究[J].电子制作，2016.10x：43-43

[5] 钟叶.Bootstrap框架在响应式Web开发中的应用与研究[J].科技广场，2017.2：26-28

[6] 舒后，熊一帆，葛雪娇.基于Bootstrap框架的响应式网页设计与实现[J].北京印刷学院学报，2016.2：47-52