Bootstrap 4 最新版本 v4.6.2

Bootstrap 4 快速入门

了解如何开始使用 Bootstrap 4，包括 CDN 引入、npm 安装和基本 HTML 模板结构。Bootstrap 4 仍然依赖 jQuery。

环境要求

支持浏览器：Chrome、Firefox、Safari、Edge、IE 10+
需要 jQuery：Bootstrap 4 依赖 jQuery 3.x 和 Popper.js
推荐编辑器：VS Code、WebStorm、Sublime Text 等

下载 Bootstrap 4

通过 CDN 引入（推荐）

Bootstrap 4 的 CDN 引用需要同时引入 jQuery、Popper.js 和 Bootstrap 的 CSS/JS：

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

<!-- jQuery 和 Popper.js（Bootstrap 4 的 JS 依赖） -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

注意：与 Bootstrap 5 不同，v4 的 JavaScript 插件依赖 jQuery。请确保在 Bootstrap JS 之前加载 jQuery。

通过 npm 安装

npm install [email protected] jquery popper.js

// 在 JS 入口文件中引入
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js'; // 需要 jQuery

基本 HTML 模板

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap 4 示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container py-5">
        <h1>你好，Bootstrap 4！</h1>
        <p>这是一个基本的 Bootstrap 4 页面。</p>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
            打开模态框
        </button>
    </div>

    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">模态框标题</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    模态框内容
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>

与 Bootstrap 5 的关键区别

特性	Bootstrap 4	Bootstrap 5
JavaScript 依赖	需要 jQuery + Popper.js	纯原生 JS（无需 jQuery）
data 属性	`data-toggle`、`data-target`	`data-bs-toggle`、`data-bs-target`
关闭按钮	`.close` + `×`	`.btn-close`
浮动类	`.float-left`、`.float-right`	`.float-start`、`.float-end`
间距类	`.ml-`、`.mr-`、`.pl-`、`.pr-`	`.ms-`、`.me-`、`.ps-`、`.pe-`
字体类	`.font-weight-bold`、`.font-italic`	`.fw-bold`、`.fst-italic`
定制表单	`.custom-select`、`.custom-file`	`.form-select`、原生文件输入