Bootstrap 4安装与使用 - 快速入门指南

最后编辑于2025-04-14 13:30:25.3726061 +0800 CST

Bootstrap 4 安装使用

Bootstrap 4是一个强大的前端框架，本章将介绍如何安装和使用Bootstrap 4来开发响应式网站。

安装 Bootstrap 4

我们可以通过以下几种方式来安装 Bootstrap 4：

  1. 使用 Bootstrap 4 CDN（推荐）
  2. 从官网 getbootstrap.com 或 Bootstrap中文网 下载 Bootstrap 4
  3. 使用包管理工具（npm、yarn等）

使用 Bootstrap 4 CDN

使用CDN（内容分发网络）是最简单快捷的方式，无需下载文件，直接在HTML中引用即可。

推荐使用BootCDN（国内稳定快速的前端开源项目CDN）：

html 
 1<!-- Bootstrap 4 核心 CSS 文件 -->
 2<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css">
 3 
 4<!-- jQuery文件，必须在bootstrap.min.js 之前引入 -->
 5<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
 6 
 7<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
 8<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.11.7/umd/popper.min.js"></script>
 9 
10<!-- Bootstrap 4 核心 JavaScript 文件 -->
11<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/js/bootstrap.min.js"></script>

其他可选的 CDN 服务：

注意： 使用CDN时请确保选择最新的稳定版本，本教程使用的是Bootstrap 4.6.2版本。

下载 Bootstrap 4

如果你需要离线使用或希望进行自定义修改，可以从官网下载Bootstrap 4：

  1. 访问官网 https://getbootstrap.com/ 或 Bootstrap中文网
  2. 点击"Download"按钮
  3. 解压下载的文件
  4. 将CSS和JS文件复制到你的项目中

下载后的文件结构：

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-reboot.css
│   └── bootstrap-reboot.min.css
└── js/
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.min.js
    ├── bootstrap.js
    └── bootstrap.min.js

使用包管理工具

对于更高级的开发环境，你还可以通过包管理工具安装Bootstrap 4：

bash 
 1# 使用npm
 2npm install bootstrap@4.6.2
 3
 4# 使用yarn
 5yarn add bootstrap@4.6.2
 6
 7# 使用gem (Ruby)
 8gem 'bootstrap', '~> 4.6.2'
 9
10# 使用Composer (PHP)
11composer require twbs/bootstrap:4.6.2

创建第一个 Bootstrap 4 页面

下面我们将创建一个基本的Bootstrap 4页面，包含必要的HTML结构和引用。

1. 添加 HTML5 文档类型

Bootstrap 4 要求使用 HTML5 文档类型，所以需要在文件开头添加适当的声明：

html 
 1<!DOCTYPE html>
 2<html lang="zh-CN">
 3  <head>
 4    <meta charset="utf-8"> 
 5    <title>我的第一个Bootstrap 4页面</title>
 6  </head>
 7  <body>
 8    <!-- 页面内容 -->
 9  </body>
10</html>

2. 添加移动设备视口设置

为了确保在移动设备上正确显示和缩放，必须添加viewport元标签：

html 
1<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

viewport设置说明：

  • width=device-width - 页面宽度跟随设备屏幕宽度
  • initial-scale=1 - 初始缩放比例为1（不缩放）
  • shrink-to-fit=no - 防止Safari自动缩小页面以适应屏幕

3. 添加Bootstrap容器

Bootstrap 4 需要一个容器元素来包裹网站内容。有两种容器类可供选择：

  • .container - 固定宽度容器，在不同断点有不同的最大宽度
  • .container-fluid - 100%宽度容器，占据整个视口宽度

使用固定宽度容器示例

html 
 1<!DOCTYPE html>
 2<html lang="zh-CN">
 3<head>
 4  <meta charset="utf-8">
 5  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6  <title>Bootstrap 4 固定宽度容器示例</title>
 7  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css">
 8</head>
 9<body>
10  <div class="container">
11    <h1>我的第一个 Bootstrap 页面</h1>
12    <p>这个容器有固定宽度，在不同的屏幕尺寸会自动调整。</p> 
13  </div>
14
15  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
16  <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.11.7/umd/popper.min.js"></script>
17  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/js/bootstrap.min.js"></script>
18</body>
19</html>

使用全宽容器示例

html 
 1<!DOCTYPE html>
 2<html lang="zh-CN">
 3<head>
 4  <meta charset="utf-8">
 5  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6  <title>Bootstrap 4 全宽容器示例</title>
 7  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css">
 8</head>
 9<body>
10  <div class="container-fluid">
11    <h1>我的第一个 Bootstrap 页面</h1>
12    <p>这个容器占据100%宽度，总是填满整个视口宽度。</p> 
13  </div>
14
15  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
16  <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.11.7/umd/popper.min.js"></script>
17  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/js/bootstrap.min.js"></script>
18</body>
19</html>

容器响应断点

.container 类在不同屏幕尺寸下的最大宽度：

屏幕尺寸 断点 容器最大宽度
超小屏幕 <576px 100%
小屏幕 ≥576px 540px
中等屏幕 ≥768px 720px
大屏幕 ≥992px 960px
超大屏幕 ≥1200px 1140px

这种自适应特性使得Bootstrap 4网页能够在不同设备上呈现最佳效果。

Bootstrap 4.6 与 Bootstrap 5 的区别

Bootstrap 5 已经发布，主要变化包括：

  1. 不再依赖jQuery
  2. 放弃支持IE浏览器
  3. 增强了定制能力和CSS变量支持
  4. 改进了网格系统和表单组件

本教程基于Bootstrap 4.6版本，是Bootstrap 4的最终版本，仍被广泛使用并提供了良好的浏览器兼容性。