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

基于BootStrap的WEB前端开发应用研究
丁莲;张玲;杜巍
【摘要】本文介绍了目前较为流行的WEB前端开发框架Bootstrap,研究了在前端应用中使用Bootstrap的意义、Bootstrap的基本结构、Bootstrap的功能和实际应用.让读者和广大的Web前端开发人员对Bootstrap有一个基本的了解,为WEB开发者开辟新的方向,大大降低开发成本,提高工作效率.
【期刊名称】《电子制作》
【年(卷),期】2016(000)020
【总页数】1页(P43)
【关键词】Bootstrap;WEB前端开发;CSS
【作者】丁莲;张玲;杜巍
【作者单位】成都农业科技职业学院;成都农业科技职业学院;成都农业科技职业学院
【正文语种】中文
随着互联网的飞速发展，对于Web前端开发的要求也越来越高，早期WEB前端开发者每天都在重复地使用HTML、CSS和Javascript编写模板、样式和动态交互效果，这种重复劳动不仅单调而且乏味，而且跟不上网络发展的需求。

作为一个web设计师或开发者，必须寻找新的途径来提高自己的技能，提高自己的工作质量。

Bootstrap 的出现使WEB前端开发者终于摆脱了这种现状，Bootstrap 是一个桌面应用程序，可以帮助web开发人员和设计人员创建使用Bootstrap框架的
响应式网站，它支持多种组件和高级功能，让Web开发变得更有效率。

Bootstrap是由著名的前端开发工程师Mark Otto和Jacob Thornton共同开发
的一个WEB前端工具，2011年8月Twitter公司将其开源，目前已经成为Github上比较流行的开源项目。

Bootstrap是一套基于Less的前端开发库，提供了很多常见并常用的各种CSS和JavaScript合集，以便开发人员随时使用。

Bootstrap提供了一个可扩展的库，库的文档结构良好且易于阅读，其他人可基于这个库构建或扩展自己的项目。

如今它已经包含了几十个组件，支持响应与非响应式WEB设计，有较强的兼容性，可在多种设备上良好的运行。

它能大幅提升WEB开发者的开发效率，降低开发成本。

因为Bootstrap免费开源，使用者可以在GitHub上获取最新的Bootstrap版本。

Bootstrap提供了预编译和源码两种形式的压缩包，压缩包内的文件按照类别存放在不同的目录内，并且提供了压缩与未压缩两种版本。

2.1 预编译Bootstrap版本
预编译版本是最基本的Bootstrap组织形式，使用者可以在任意的web项目中直接使用。

它包含压缩(bootstrap.min.＊)与未压缩(bootstrap.＊)两种CSS和JS
文件。

字体图标文件来自于Glyphicons。

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

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插件定制。

用户可以自由选择自己需要的样式及功能，去除冗余部分，这样可以使得自己的项目更加精简，代码更加高效。

（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＞。

作为一套前端开发框架，Bootstrap无疑是其中的佼佼者。

它的灵活性和可扩展性加速了WEB项目开发的进程，降低了项目开发的成本，已经有越来越多的开发者使用Bootstrap进行WEB开发设计了。

【相关文献】
[1]谢益辉，朱钰.Bootstrap方法的历史发展和前沿研究[J].统计与信息论坛，2008，23 02）∶90-96.
[2]刘伟，龙琼，陈芳，等.Bootstrap方法的几点思考[J].飞行器测控学报，2007，26 6）∶78-82.。