基于BootStrap的WEB前端开发应用研究

丁 莲 张 玲 杜 巍 成都农业科技职业学院

基于BootStrap的WEB前端开发应用研究

丁 莲 张 玲 杜 巍 成都农业科技职业学院

本文介绍了目前较为流行的WEB前端开发框架Bootstrap，研究了在前端应用中使用Bootstrap的意义、Bootstrap的基本结构、Bootstrap的功能和实际应用。让读者和广大的Web前端开发人员对Bootstrap有一个基本的了解，为WEB开发者开辟新的方向，大大降低开发成本，提高工作效率。

Bootstrap；WEB前端开发；CSS

引言

随着互联网的飞速发展，对于Web前端开发的要求也越来越高，早期WEB前端开发者每天都在重复地使用HTML、CSS和Javascript编写模板、样式和动态交互效果，这种重复劳动不仅单调而且乏味，而且跟不上网络发展的需求。作为一个web设计师或开发者，必须寻找新的途径来提高自己的技能，提高自己的工作质量。Bootstrap 的出现使WEB前端开发者终于摆脱了这种现状，Bootstrap 是一个桌面应用程序，可以帮助web开发人员和设计人员创建使用Bootstrap框架的响应式网站，它支持多种组件和高级功能，让Web开发变得更有效率。

1.什么是Bootstrap？

Bootstrap是由著名的前端开发工程师Mark Otto和Jacob Thornton共同开发的一个WEB前端工具，2011年8月Twitter公司将其开源，目前已经成为Github上比较流行的开源项目。Bootstrap是一套基于Less的前端开发库，提供了很多常见并常用的各种CSS和JavaScript合集，以便开发人员随时使用。Bootstrap提供了一个可扩展的库，库的文档结构良好且易于阅读，其他人可基于这个库构建或扩展自己的项目。如今它已经包含了几十个组件，支持响应与非响应式WEB设计，有较强的兼容性，可在多种设备上良好的运行。它能大幅提升WEB开发者的开发效率，降低开发成本。

2.Bootstrap的基本结构

因为Bootstrap免费开源，使用者可以在GitHub上获取最新的Bootstrap版本。Bootstrap提供了预编译和源码两种形式的压缩包，压缩包内的文件按照类别存放在不同的目录内，并且提供了压缩与未压缩两种版本。

2.1 预编译Bootstrap版本

预编译版本是最基本的Bootstrap组织形式，使用者可以在任意的web项目中直接使用。它包含压缩(bootstrap.min.＊)与未压缩(bootstrap.＊)两种CSS和JS文件。字体图标文件来自于Glyphicons。

2.2 Bootstrap源码

Bootstrap源码包含了预先编译的CSS、JavaScript和图标字体文件，并且还有LESS、JavaScript和文档的源码。

3.Bootstrap的功能模块

Bootstrap的功能模块从大的方面可以分为CSS、组件、JavaScript插件、定制等四个部分。各部分的功能随着Bootstrap版本的更新在不断的扩展、加强和完善。

3.1 CSS部分

Bootstrap内置了一套优秀的响应式、移动设备优先的流式栅格(Grids)系统，该系统是在960gs的基础上扩展而来的，使用该系统可以轻松地构建自己所需的布局效果。在页面排版方面，Bootstrap已经为人们定制好了标题、主体文本、强调文本、引用文本、列表、代码、表格、表单、按钮、图片等风格样式，使用者要做的就是引用相应的类名即可。

3.2 组件部分

Bootstrap内置了无数可复用的组件，这些组件实现的功能主要有导航、下拉菜单、图标、警告框、弹出框、进度条、面版等多个功能。这些组件在相应的JQuery插件作用下均具有交互式功能。开发这使用这些组件可大幅提升项目的交互体验，增强项目的吸引力。要使这些组件具备交互性也非常简单，只需三步即可：第一步套用基本的组件HTML框架；第二步调用相应的JQuery插件；第三步给项目中对应元素启用对应功能。

3.3 JavaScript插件部分

Bootstrap附带了12个JavaScript插件，这些插件都要依赖于jQuery1.10+，用于扩展网站的功能，丰富用户的体验，实现交互功能，它为Bootstrap的组件赋予“生命”。使用时可以一次性引入所有插件，也可以单个的引入到您的项目中，这些插件需要与CSS组件配合使用才能达到相应的页面效果。Bootstrap为使用者提供了几十种插件，常见的如：过渡效果、下拉菜单、标签页、折叠、轮播等。

3.4 定制部分

为了满足更多用户的需求，Bootstrap提供了自己独特的定制服务，包括CSS样式定制、组件定制以及JQuery插件定制。用户可以自由选择自己需要的样式及功能，去除冗余部分，这样可以使得自己的项目更加精简，代码更加高效。

4.Bootstrap的主要应用

（1）设置移动设备优先。为了对移动设备更好的支持，需要在＜head＞中添加viewport元数据标签。代码：＜m e t a n a m e=“v i e w p o r t”content=”width=device-width,initialscale=1”＞。

（2）删格页面布局。也就是把页面划分为行与列的组合，如要布局一个1行2列的界面，则代码如下：

＜div class=”row”＞

＜div class=”col-md-6”＞…＜/div＞

＜div class=”col-md-6”＞…＜/div＞

＜/div＞

（3）应用内置CSS样式。如我们要添加一个绿色的圆角按钮，只需要添加.btn类就行了。代码：＜button type=”button”class=”btn btn=info”＞按钮＜/ button＞。

5.结束语

作为一套前端开发框架，Bootstrap无疑是其中的佼佼者。它的灵活性和可扩展性加速了WEB项目开发的进程，降低了项目开发的成本，已经有越来越多的开发者使用Bootstrap进行WEB开发设计了。

[1]谢益辉，朱钰.Bootstrap方法的历史发展和前沿研究[J].统计与信息论坛，2008，23 02）∶90-96.

[2]刘伟，龙琼，陈芳，等.Bootstrap方法的几点思考[J].飞行器测控学报，2007，26 6）∶78-82.