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

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 于 2011 年八月开发的，是一个用于快速开发 Web 应用程序和网站的前端框架。

编辑

一、bootstrap 简介

1.Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。全球数以百万计的网站都是基于 Bootstrap 构建的。

2.Bootstrap 是完全开源的由 Twitter @mdo 和 @fat 构建, 采用 LESS CSS, 通过 Node 编译, 代码托管、开发、维护都在 GitHub 平台上

3.Bootstrap 为所有开发者、所有应用场景而设计，所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。

二、bootstrap 特点

1. 预处理器

Bootstrap 提供了可以直接使用的 CSS 文件，源码是用 CSS 预处理器。如需快速上手可以直接使用编译好的 CSS 文件，或者你也可以自己编译源码。

2. 功能完备

Bootstrap 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档。

3. 一个框架、多种设备

你的网站和应用能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备，这一切都是 CSS 媒体查询（Media Query）的功劳。

三、bootstrap 教程

首先，在学习 bootstrap 教程时必须掌握 HTML、CSS、JS 的基础知识。

1. 源码结构

jquery2.x 不支持 IE8 以下的，bootsrtap 插件无法正常使用，建议用 jquery1.12.0 的在 IE8 下基本功能可以使用，css3 语法仍不兼容。

fonts-google 字体，国内环境加载慢需要下载到本地

2. 引入核心文件（引入核心 js css）

用 Meta 标签代码让 360 双核浏览器默认极速模式不是兼容模式
<meta name=”renderer” content=”webkit” />
让 IE 以最高级模式渲染文档，强制 IE 使用 Chrome Frame 渲染
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>

3. 全局 CSS 样式

设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。
深入了解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最佳实践。

4. 可复用组件

无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。

5. 栅格系统

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

6. 栅格参数

超小屏幕 手机 (<768px) .col-xs-
小屏幕 平板 (≥768px) .col-sm-
中等屏幕 桌面显示器 (≥992px) .col-md-

大屏幕 大桌面显示器 (≥1200px) .col-lg-
.container 最大宽度 None（自动）750px 970px 1170px

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。它包含了易于使用的预定义类，还有强大的 mixin 用于生成更具语义的布局。

7.container 容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。

.container 类用于固定宽度并支持响应式布局的容器。默认 1200px，槽边 15px

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

8. 导航条

导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。

响应式导航条依赖 collapse 插件，定制 Bootstrap 的话时候必将其包含。通过调整源码中的 @grid-float-breakpoint 值，就可以控制导航条何时堆叠排列，何时水平排列，默认值是 768px。

9.Well 效果

默认效果，把 Well 用在元素上，能有嵌入（inset）的的简单效果。

可选类 / 样式，通过这两种可选修饰类，可以控制此组件的内补（padding）和圆角的设置。

10.Affix 固定浮动

固定元素在顶部或者底部，可以通过样式控制或者 js 控制