| 标题 | 基于BootStrap的WEB开发设计研究 |
| 范文 | 李金亮 李春青 摘要：本文通过对Bootstrap的简要介绍，让读者对Bootstrap有一个基本的了解。Bootstrap作为当前较为流行的前端开发框架，为WEB开发者开辟了新的方向，大大降低了开发成本，提高了工作效率。 关键词：Bootstrap WEB开发 设计 1 概述 WEB前端开发者每天都在重复着这样的工作，使用HTML、CSS和Javascript编写模板、样式和动态交互效果，这种重复劳动不仅单调而且乏味，Bootstrap的出现使WEB前端开发者终于摆脱了这种现状。 2 什么是Bootstrap？ Bootstrap是由著名的前端开发工程师Mark Otto和Jacob Thornton共同开发的一个WEB前端工具，2011年8月Twitter公司将其开源，目前已经成为Github上比较流行的开源项目。 Bootstrap提供了一个可扩展的库，库的文档结构良好且易于阅读，其他人可基于这个库构建或扩展自己的项目。如今它已经包含了几十个组件，支持响应与非响应式WEB设计，有较强的兼容性，可在多种设备上良好的运行。它能大幅提升WEB开发者的开发效率，降低开发成本。已经有越来越多的开发者使用Bootstrap进行WEB开发设计了。 3 Bootstrap的基本结构 因为Bootstrap免费开源，使用者可以在GitHub上获取最新的Bootstrap版本。Bootstrap提供了预编译和源码两种形式的压缩包，压缩包内的文件按照类别存放在不同的目录内，并且提供了压缩与未压缩两种版本。 3.1 预编译Bootstrap版本 预编译版本是最基本的Bootstrap组织形式，使用者可以在任意的web项目中直接使用。它包含压缩（bootstrap.min.*）与未压缩（bootstrap.*）两种CSS和JS文件。字体图标文件来自于Glyphicons。 3.2 Bootstrap 源码 Bootstrap源码包含了预先编译的CSS、JavaScript和图标字体文件，并且还有LESS、JavaScript和文档的源码。 4 Bootstrap的安装 应用Bootstrap文件可分为两步： 一是安装Bootstrap的基本样式，二是调用Bootstrap的JavaScript插件。 人们通常用”link”方法调用Bootstrap样式，其中基本样式是必须调用的，而响应式布局样式是在自己的项目需要实现响应式布局的效果时才调用的，且必须在基本样式之后调用，否则响应式布局功能无效。自定义样式用来覆盖Bootstrap中的一些默认设置，便于开发者定制。 项目需要实现响应式布局的效果时，除了调用必须的bootstrap-responsive.css样式和Bootstrap.js，还需要调用JQuery，因为所有的JavaScript插件都依赖于JQuery，因此它必须在Bootstrap.js之前调用。 5 Bootstrap的功能模块 Bootstrap的功能模块从大的方面可以分为CSS、组件、JavaScript插件、定制等四个部分。各部分的功能随着Bootstrap版本的更新在不断的扩展、加强和完善。下面来简单介绍一下Bootstrap中各部分的功能。 5.1 CSS部分 Bootstrap内置了一套优秀的栅格（Grids）系统，该系统是在960gs的基础上扩展而来的，使用该系统可以轻松地构建自己所需的布局效果。 在页面排版方面，Bootstrap已经为人们定制好了标题、主体文本、强调文本、引用文本、列表、代码、表格、表单、按钮、图片等风格样式，使用者要做的就是引用相应的类名即可。 5.2 组件部分 Bootstrap提供了无数可复用的组件，包括导航、下拉菜单、图标、弹出框、进度条、面版等多个功能。这些组件在相应的JQuery插件作用下均具有交互式功能。开发这使用这些组件可大幅提升项目的交互体验，增强项目的吸 引力。要使这些组件具备交互性也非常简单，只需三步即可： 第一步套用基本的组件HTML框架； 第二步调用相应的JQuery插件； 第三步给项目中对应元素启用对应功能。 5.3 JQuery插件部分 Bootstrap中的JQuery插件主要用来实现交互功能，它为Bootstrap的组件赋予“生命”。使用时可以一次性引入所有插件，也可以单个的引入到您的项目中。 Bootstrap为使用者提供了几十种插件，常见的如：过渡效果、下拉菜单、标签页、折叠、轮播等。 5.4 定制部分 为了满足更多用户的需求，Bootstrap提供了自己独特的定制服务，包括CSS样式定制、组件定制以及JQuery插件定制。用户可以自由选择自己需要的样式及功能，去除冗余部分，这样可以使得自己的项目更加精简，代码更加高效。 6 结束语 作为一套前端开发框架，Bootstrap无疑是其中的佼佼者。它的灵活性和可扩展性加速了WEB项目开发的进程，降低了项目开发的成本，已经有越来越多的开发者使用Bootstrap进行WEB开发设计了。 参考文献： [1]Bootstrap中文网：http：//www.bootcss.com/. [2]http：//www.w3cplus.com/css/twitter-bootstrap.html. [3]陈红，吴汇川.Bootstrap方法及其应用[J].青岛大学学报（工程技术版），1997-08-30. |
| 随便看 |
|
科学优质学术资源、百科知识分享平台，免费提供知识科普、生活经验分享、中外学术论文、各类范文、学术文献、教学资料、学术期刊、会议、报纸、杂志、工具书等各类资源检索、在线阅读和软件app下载服务。