基于BootStrapWEB开发设计研究.docVIP

鉴于BootStrap的WEB开发设计研究 鉴于BootStrap的WEB开发设计研究 PAGE / NUMPAGES 鉴于BootStrap的WEB开发设计研究 鉴于 BootStrap 的 WEB 开发设计研究 纲要：本文经过对 Bootstrap 的简要介绍，让读者对 Bootstrap 有一个基本的认识。 Bootstrap 作为目前较为流行的前端开发框架，为 WEB 开发者开拓了新的方向，大大降低了开发成本，提高了工作效率。 重点词： Bootstrap WEB 开发 设计 概括 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 插件部分 Bo