Bootstrap 在Web 开发中的应用与研究

王莉 广州华夏职业学院

引言

随着网络技术的发展,对于Web 开发技术要求也越高,Bootstrap 开发框架可以让web 开发更迅速、简单。Bootstrap将CSS 框架,JavaScript 库组合在一起,适配不同终端,将大大简化Web 开发工作,提高工作效率,降低工作成本。

1 .Bootstrap 概念

1.1 Bootstrap 概念

Bootstrap 是 由Twitter 公 司 Mark Otto 和 Jacob Thornton 两位工程师共同开发的Web 前端框架。它基于 HTML、CSS、JAVASCRIPT，是一个简洁、快速、灵活和最受欢迎的开源框架。它功能强大，它的响应式布局可以适应于PC 端及其他移动设备。

1.2 为什么使用Bootstrap?

1)响应式布局：Bootstrap 的响应式 布局，适应于PC 端、平板电脑及其他移动设备，可以在这些不同的终端切换显示，支持移动设备优先。

2)跨浏览器：Bootstrap 的跨浏览器，可以兼容所有的主流浏览器。

3)容易上手：Bootstrap 的代码简洁，灵活，易懂，可以不懂设计的你设计出漂亮的效果。

2. Bootstrap 功能介绍

1)栅格系统，Bootstrap 的栅格系统，可以让浏览器随着屏幕大小的增减，自动分配最多12 列，以实现响应式效果。

2)支持 HTML5、CSS3，Bootstrap 设置了HTML5 语义化标签和 CSS3 属性，可以通过 这些相应设置得到不同效果。

3)功能强大的组件，Bootstrap 设置了一套功能强大、实用性很强的组件，包括导航、下拉菜单、标签、工具条、字体图标、警告框、弹出框等一系列功能。

4)JavaScript 插件，Bootstrap 设置了很多实用性的 jquery 插件。jquery 是一个快速JavaScript 框架，只要引入这些插件，就可以为开发者实现 各种Web 特效。

3. Bootstrap 在Web 开发中的应用

1)Bootstrap 下载：

Bootstrap 下载方法：进入百度，搜索bootstrap，找到boostrap 中文网。

2)Bootstrap 结构

Bootstrap下载并解压后，我们可以发现它的核心目录主要分为三大部分：

1.css 样式目录，bootstrap.css 和bootstrap.min.css 是两个相同的css 文件。其中bootstrap.css 是未压缩版，bootstrap.min.css是压缩版，我们引用时，一般引入这个压缩版。

2.js 脚本目录，bootstrap.js 和bootstrap.min.js 是两个相同的js 文件。它和css 目录一样，分为未压缩和压缩版，我们引用时，一般也引入这个.min 压缩版。

3.fonts 字体，fonts 目录包含了不同后缀的字体文件。

3)引用Bootstrap 创建蓝色背景的圆角按钮

我们先来看一个蓝色背景圆角按钮的例子,首先创建一个HTML5 的页面,然后引入Bootstrap 的核心文件,包括bootstrap.min.css、jquery.min.js、bootstrap.min.js。

如果要实现移动设备优先，为移动应用设备提供更好的 支 持，我 们 需 要 加 上：＜meta> 中 name="viewport" 和content="width=device-width, initial-scale=1"属性。

代码：＜button type="button" class=" btn btn-info">按钮＜/button>可以实现一个蓝色背景的圆角按钮。

可以看出，Bootstrap 简洁，灵活，易懂。就算你不是专业的WEB 设计者，不懂HTML、CSS JavaScript 代码，你也可以通过Bootstrap 强大的功能设计出一个非常不错的效果，这为开发者提供有力的帮助。

4. 总结

总之，Bootstrap 是一个简洁、快速、灵活和最受欢迎的WEB开源框架。它为WEB 开发者提供了有力的帮助，不仅降低了开发周期，提高了工作效率，也节约了开发成本，规范了WEB 开发者的编写习惯。