傅翠玉 王少茹 洪秀金

摘要：Bootstrap是一款优秀的前端开发框架，它基于Html、css、Javascript、Jquery技术，能灵活快捷地完成移动端响应式WEB开发。该文主要介绍Bootstrap框架核心技术、重要特性、优点及利用该框架快速搭建WEB项目。

关键词：Bootstrap；移动端响应式WEB开发；前端技术

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2018）21-0085-02

1 Bootstrap框架技术简介

Bootstrap基于LESS，集合了HTML、CSS、Javascript、Jquery技术，是一套简洁灵活、可扩展的优秀前端开源框架。它包含几十个组件，使用了最新的浏览器技术，为实现快速开发提供了一套前端工具包，为WEB设计师提供了优雅的HTML和CSS规范，具有较好的兼容性，能够有效解决前端开发中由于浏览器兼容性、屏幕分辨率、移动终端设备类型等因素造成的网站前端布局错乱、界面风格不统一、用户体验不友好、Javascript交互事件失效等問题。bootstrap使得响应式WEB前端开发变得更加敏捷、高效、稳定，因此已经成为当前最流行的前端开发框架之一。

2 Bootstrap的重要特性

随着移动WEB开发的兴起，WEB页面人性化的设计理念和用户体验越来越受到重视，大量的前端框架井喷出现，而Bootstrap框架能够迅速流行，被广大前端开发人员喜爱，不仅在于它内置了丰富的样式，能够提供大量插件和合集，开发页面美观精致，而且它的代码非常简洁，便于开发者在其基础上修改成项目所需要的样式。相对比QUICK UI、Flex、jQueryUI等其他的前端开发框架，Bootstrap具有以下几个突出的重要特性：

2.1 灵活的响应式栅格系统

Bootstrap 提供了一个崇尚移动优先而且非常灵活的响应式栅格系统，结合CSS媒体查询技术可以使页面布局随着终端设备分辨率大小而自动适应。栅格系统是整个Bootstrap响应式设计的核心，也是响应式设计核心理念的一个实现形式。栅格系统把窗口容器等分为12份，同时可以根据页面布局需求灵活划分页面元素所跨越的列数，满足页面布局需求。其具体实现原理比较简单，首先定义容器（container），一个容器当中可以灵活创建若干行（row），同时设置合适的对齐方式和内边距（padding）；然后在行内创建水平方向的列元素（column），列是行的唯一直接子元素，用于放置网页内容。这种定义方式就是按容器、行、列这样的顺序根据布局需求层层定义，每一行都可以划分成12列，每列都可以拥有padding属性设置列间距，bootstrap还提供了列嵌套、列偏移等功能，灵活布局列宽。

完成响应式页面设计Bootstrap除了使用栅格系统布局，还需要结合媒体查询技术设置当前屏幕的宽度，针对Bootstrap提供4种不同尺寸的屏幕设置不同的样式来适应屏幕宽度，下表显示响应式栅格系统在4种不同尺寸屏幕的分界点下工作情况：

对于网页当中常用的元素，例如基础排版，代码、表格、图片、标题文字、图标、表单、按钮等，Bootstrap框架提供简洁丰富的基本CSS样式对这些元素进行样式定义，同时允许为其添加可扩展的class增强显示效果。以图片元素为例，Bootstrap 提供了三个class可用于给元素设置简单样式，它们分别为.img-rounded（为图片添加圆角）、.img-circle（将图片变为圆形）、.img-thumbnail（缩略图功能），还可以通过在 标签添加 .img-responsive 类（图片响应式类）来让图片支持响应式设计，图片将响应式属性很好地扩展到父元素。其具体设置如下代码所示：

在这些图片基础样式之上，我们还可以添加自己定义的class样式，丰富图片的显示效果。

2.2.1 强大的组件和插件集

Bootstrap 提供了非常丰富的组件与插件，这些组件具有良好的重用性，可用于创建图像、下拉菜单、导航、按钮组、图标、输入框、面板等。

BootStrap自带的13个基于jQuery的JavaScript插件，包括过渡效果、模态框、轮播、折叠、滚动监听等，这些插件完全遵循jQuery使用规范和习惯。这些JS插件可以一次性或者单独导入页面中，不会相互影响。所有插件包含在bootstrap.min.js和bootstrap.js这两文件中，前者是压缩版，后者是未压缩版。使用插件时将其中之一引入页面即可，注意不可以全部引入，另外这些插件是基于jQuery，因此jQuery必须在所有插件之前引入页面。

Bootstrap 的组件与插件为开发者提供了高效快捷的同时，也赋予了页面美观灵动、功能完备，用户体验感高。

2.2.2 定制服务

WEB页面的风格千差万别，bootstrap提供的默认样式往往不能满足我们的需求，为了更好地满足用户的需求，Bootstrap框架提供了定制服务，使用者可以跟据页面需求定制包括CSS样式表、组件、jQuery插件等。

定制Bootstrap常用的方法是直接添加新的样式表、修改组件、插件，例如，页面中常用用的按扭图标如下图所示，要想将下面左边的默认按钮变成右边漂亮有质感的蓝色按钮，只需要我们在该按钮上定义一个新class，或者可以直接覆盖bootstrap的默认样式，前者简单，后者去除冗余代码。

另外一种方法是深度定制bootstrap less，这需要获得bootstrap框架源代码，用动态样式表语言less来修改，然后重新编译成CSS。

3 Bootstrap优点

1）具有完整的框架解决方案，支持快速开发。

2）响应式设计，兼容所有主流浏览器。

3）文档齐全、代码开源。Bootstrap中文网提供了HTML、CSS组件、jQuery插件、less教程、甚至不同版本的Bootstrap所有详细文档，其代码完全开源。

4）简单优雅、一致性高。Bootstrap 使整个 Web 应用的风格、用户体验完全一致。应用的一致性，让开发者可以把精力集中在业务处理上，而非 UI设计。

4 利用Bootstrap框架快速搭建WEB项目

Bootstrap框架快速搭建WEB项目常用方法是首先在Bootstrap官方网站下载Bootstrap框架压缩包，目前官网提供的最新版本是bootstrap-3.3.7-dist。其次将该框架解压到WEB项目中，在新建的html页面中依次引入Bootstrap的三个文件：bootstrap.min.css、jquery.min.js、bootstrap.min.js。需要注意的是这三个文件引入顺序不能错乱，在页面区引入bootstrap.min.css，而jquery.min.js、bootstrap.min.js这两个文件放在页面最底部，以防止网页未加载完毕而这两个文件先加载可能产生一些的不必要的问题，并且因为Bootstrap依赖于Jquery，所以jquery.min.js必须在bootstrap.min.js之前引入。其具体配置代码如下所示：

5 小结

Bootstrap框架以其小巧、简约、便捷、高效的特征，深受WEB前端开发设计人员的喜爱。相信随着Bootstrap版本不断更新与完善，Bootstrap被人所诰病的class语义化不足、过渡依赖html的缺点会渐渐改进。

参考文档：

[1] 徐涛.深入理解Bootstrap[M].北京：机械工业出版社，2014.

[2] Bootstrap菜鸟教程[EB/OL].http：//www.runoob.com/bootstrap/bootstrap-grid-system.html.

【通联编辑：朱宝贵】