Bootstrap 3 最新版本 v3.4.1

Bootstrap 3 快速入门

Bootstrap 3 是最流行的移动优先前端框架之一，至今仍有大量项目在使用。本文介绍如何快速开始使用 Bootstrap 3。

环境要求

支持浏览器：Chrome、Firefox、Safari、Edge、IE 8+
需要 jQuery：Bootstrap 3 依赖 jQuery 1.9.1+
移动优先：Bootstrap 3 是第一个采用移动优先策略的版本

通过 CDN 引入

Bootstrap 3 推荐通过 CDN 引入，最简单的方式是使用以下代码：

<!-- Bootstrap 3 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<!-- jQuery -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

<!-- Bootstrap 3 JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

基本 HTML 模板

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 3 页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>你好，Bootstrap 3！</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap 3 的特性

移动优先：从移动端开始设计，逐步扩展到桌面
12 列网格：灵活的响应式网格系统
jQuery 插件：所有 JavaScript 组件基于 jQuery
Font Awesome 集成：Bootstrap 3 没有内置图标库，通常配合 Font Awesome 使用
Less 源码：使用 Less 预处理器编写

Bootstrap 3 与 5 的主要区别

特性	Bootstrap 3	Bootstrap 5
CSS 预处理器	Less	Sass
JavaScript 框架	jQuery	原生 JS (Vanilla JS)
网格系统	col-xs/md/lg	col-sm/md/lg/xl/xxl
实用工具类	较少	大量新增
图标库	需第三方	内置 Bootstrap Icons
表单	form-group, form-control	功能更丰富的表单组件