提醒：本文最后更新于 2026-05-24 06:18，文中所关联的信息可能已发生改变，请知悉！

bootstrap 框架使用方法介绍是帮助使用者对 bootstrap 框架的使用步骤更加清晰，教导使用者，帮助使用者对 bootstrap 更加熟悉和操作。

编辑

一、bootstrap 框架介绍

Bootstrap 是一个非常优秀的前端 UI 框架，一个轻量级的 UI 前端框架，是基于 HTML+CSS+JavaScript 的框架。

二、bootstrap 介绍

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS/HTML 框架。Bootstrap 提供了优雅的 HTML 和 CSS 规范，它即是由动态 CSS 语言 Less 写成。Bootstrap 一经推出后颇受欢迎，一直是 GitHub 上的热门开源项目，包括 NASA 的 msnBC（微软全国广播公司）的 Breaking News 都使用了该项目。国内一些移动开发者较为熟悉的框架，如 WeX5 前端开源框架等，也是基于 Bootstrap 源码进行性能优化而来。

三、bootstrap 的构成

1、基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。

2、CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。包括：下拉菜单，按钮组，按钮下拉菜单，导航，导航条。

3、组件：用于创建图像、下拉菜单、导航、警告框、弹出框等等。

4、JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。包括：对话框，标签页，流动条，弹出框。

四、bootstrap 版本

目前使用较广的是版本 2 和 3，其中 2 的最新版本的是 2.3.2，3 的最新版本是 3.3.7。

五、bootstrap 框架使用

（1）下载 Bootstrap

从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。其中有两种情况：一种是 Download Bootstrap：下载 Bootstrap。可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。另外一种是 Download Source：下载源代码。点击该按钮，可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。

（2）解压

下载完成后解压，会有三个文件夹分别是 css、font、js，里面带 min 的文件都是压缩后的文件，在网站上线的时候用，其他未压缩的文件可以在平时开发的时候用。

（3）建立 html 文件

使用 Dreamweaver CS6 编辑，下载 jQuery 放到 bootstrap 中的 js 目录中。在 bootstrap 的根目录下新建一个 demo.html 文件，编辑 demo.html 文件，添加对 bootstrap 框架中 css 和 js 的引用，写好源码，在写源码时，要注意格式，编辑的规范。bootstrap 框架的基本使用架构，即可在 html 中加载使用。最后可以在 body 标签内应用 Bootstrap 相关的 class。

六、注意

可注册 twitter 账号，登陆后，可关注相关网站，了解更多相关的知识，方便操作使用。