Bootstrap在Web移动开发中的应用

2017-04-26余楷鑫

电脑知识与技术 2017年6期

摘要：伴随着互联网的快速发展，各种互联网的应用已经越来越走进人们的生活之中。现阶段CSS3+HTML5的完美结合，使得前端的交互式应用更加的人性化。随着互联网+的推行，移动互联网更是飞速发展，但是传统的网页在移动互联网中的兼容性却大打折扣。Bootstrap是一个用于快速开发Web应用程序和网站的前端框架，它几乎包含了前端开发中你所需要的一切东西。本文将阐述如何利用Bootstrap快速、高效的开发出适应移动互联网的Web前端页面。

关键词：Bootstrap；移动互联网；Web开发；前端页面

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2017）06-0082-03

1 什么是Bootstrap

Bootstrap来自 Twitter，是目前很受欢迎的前端框架。Bootstrap是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。[1]Bootstrap是基于HTML5的前端开发组件，由Twitter的前端开发工程师Mark Otto和Jacob Thornton共同开发，致力于降低前端开发的难度，使前端开发更加简洁、高效。2011年8月Twitter公司开放了Bootstrap的源代码，目前Bootstrap已成为Github上比较流行的开源框架，受到广大前端开发人员的欢迎。

Bootstrap框架使用起来比较灵活，其提供的库文档可读性很强，易于掌握，开发人员可以基于Bootstrap可扩展库构建或扩展自己的项目。Bootstrap经过不断发展，对各大浏览器的兼容性做得比较好，支持响应与非响应式的WEB设计，包含了几十个组件，可以在多种设备上稳定运行。Bootstrap框架的出现，极大降低了开发成本，同时也能大幅度提高WEB前台开发的效率，现在已经有越来越多的编程开发人员使用Bootstrap框架进行WEB网页前端设计了。

2 为什么使用Bootstrap设计网页

Bootstrap框架兼容大部分jQuery插件，是基于jQuery进行个性化完善的一套框架，采用HTML5和CSS3标准进行规范，能够适应手机端的网页开发，具有自己独特的设计风格。

1） Bootstrap框架能够优先响应移动设备。自Bootstrap3.0起，Bootstrap就包含了贯穿于整个库的移动设备优先的样式。开发者不需要专门针对移动设备进行优化、识别，就能够自动地将网页站点展现在用户的移动设备上。

2）Bootstrap具有优越的兼容性，幾乎兼容所有主流的浏览器，并且对手机浏览器也具有良好的适应性。在前端开发过程中，浏览器兼容性是前端开发人员无法避免的问题，由于目前浏览器存在着很大的不同，各个浏览器对CSS的代码识别能力也不尽相同，这使得相同的CSS样式在不同的浏览器上显示出来的效果大不一样。作为前端开发人员，最头疼的莫过于浏览器的兼容性了，使用Bootstrap能够大大减轻这方面的烦恼，减少很多不必要的测试工作，提高开发的效率。

3）使用Bootstrap非常容易上手，只要具备HTML和CSS的基础知识，就可以轻松学会，利于教学与推广。

4）Bootstrap不仅开源，而且包含了功能强大的内置组件，非常容易定制使用。

目前网页设计人员在设计网页时常用的主流结构是DIV+CSS，对于网页设计人员来说，编写CSS代码是相当繁冗的过程，不仅要求有一定的美术功底，还要有相当的编程能力。在网站项目开发中，网页开发人员需要编写大量的CSS代码，这对开发人员的要求比较高，需要有一定的编程经验，利用Boostrap框架，就能够避免DIV+CSS编码过程中的样式冗余问题，使代码更加规范。Bootstrap在使用上的简洁易用的特点，使得Bootstrap在一面世就获得了巨大的反响。Boostrap很好地适应了移动互联网的发展，其简洁、直观、移动设备兼容性强的优点，让web编程开发变得更加简单、高效。

3 如何在项目中应用Bootstrap

1）我们先来看一个简单的Hello World的例子，首先新建一个Html的页面HTMLPage1.html，在该页面中引入Bootstrap的几个文件：bootstrap.css、bootstrap-responsive.css、jquery-1.7.2.min.js、bootstrap.min.js。

应用Bootstrap框架需要下载引用文件，当页面进行引用时，每个CSS和JavaScript文件都有两个版本可用（例如bootstrap.js和bootstrap.min.js）。这两个版本的效果是一样的，只不过第一种版本是常规文件，第二种版本是经过压缩后的文件，采用第二种版本进行引用，可以使我们的网页加载速度更快，使得网页浏览的体验效果也变得更加优越。

代码如下所示：

[

Hello World例子

Hello World！

...

<！—这里可以书写主要的Html代码 -->

]

上面代码中，标记里面的标签是Bootstrap CSS的链接。通常情况下，在网页的末尾，加载js代码，效果比较好，我们引用jQuery和Bootstrap 实用程序JavaScript时，把这些脚本放在网页的结尾处运行，能够使网页的性能得到一定程度的提高。在浏览器上显示效果如下图1所示：

2）要使用Bootstrap就要熟悉网格的应用。Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到12列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。网格系统通过一系列包含内容的行和列来创建页面布局。

下面列出了Bootstrap网格系统是如何工作的：

① 行必须放置在.container class 内，以便获得适当的对齐（alignment）和内边距（padding）。

② 使用行来创建列的水平组。

③ 内容应该放置在列内，且唯有列可以是行的直接子元素。

④ 预定义的网格类，比如.row 和.col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。

⑤ 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。

⑥ 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个.col-xs-4。

Bootstrap网格的基本结构如下：

[

...

.... ]

3）Bootstrap框架的组件非常丰富，包括导航条、排版、缩略图、面包屑、分页、按钮下拉菜单、按钮组、下拉菜单、警告对话框、进度条等，编程人员可以应用这些组件，快速的设计一个具有简约风格而又有自身特色的网站。

Bootstrap还配备了一组jQuery的交互插件，应用这些插件，可以很容易的实现滚动条、弹出框、标签页、模式对话框等，这些插件不仅仅可以实现网页功能，而且被设计得很精致，许多jQuery项目都一定程度上借鉴了这些插件的设计标准。模块化的组件在项目应用中，修改起来会比较方便，只需要稍微修改一下变量就可以改变网页的风格与设计。下面我们用实际应用中的一个例子来展示Bootstrap的应用，该例子为实现成绩查询功能的前台代码，应用Bootstrap的css+div的方式来实现输入框和按钮。代码如下所示：

成绩查询

；成績查询