异常教程

Bootstrap4 教程（保姆级教程）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在 Web 开发领域，Bootstrap 是一款广受欢迎的前端框架，它通过提供预设的 CSS 和 JavaScript 组件，帮助开发者快速构建响应式、美观的网站界面。Bootstrap4 教程作为入门级和中级开发者的重要学习资源，能够显著提升开发效率，同时降低 CSS 和布局的学习门槛。本文将从基础到进阶，系统讲解 Bootstrap4 的核心功能，并通过实际案例和代码示例，帮助读者掌握关键知识点。

快速入门：Bootstrap4 的核心概念

什么是 Bootstrap4？

Bootstrap4 是由 Twitter 团队开发的开源框架，其核心目标是为开发者提供一套统一的 CSS 和 JavaScript 工具，简化网页布局和交互逻辑的实现。它通过栅格系统、预定义样式和组件库，让开发者无需从零开始编写 CSS，即可快速搭建现代化的 Web 应用。

如何引入 Bootstrap4？

要开始使用 Bootstrap4，需在 HTML 文件中引入其核心 CSS 和 JavaScript 文件。以下是基础模板示例：

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Bootstrap4 示例</title>  
    <!-- 引入 Bootstrap4 CSS -->  
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  
</head>  
<body>  
    <!-- 页面内容 -->  

    <!-- 引入 jQuery、Popper.js 和 Bootstrap4 JavaScript -->  
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>  
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>  
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>  
</body>  
</html>

关键点：Bootstrap4 的 CSS 文件负责样式，而 JavaScript 文件（依赖于 jQuery 和 Popper.js）则用于实现交互功能，如下拉菜单和模态框。

基础组件：构建页面的基石

按钮组件

按钮是网页中最常见的交互元素。Bootstrap4 提供了多种按钮样式，通过简单的类名即可快速实现：

<button class="btn btn-primary">主要按钮</button>  
<button class="btn btn-secondary">次要按钮</button>  
<button class="btn btn-success">成功按钮</button>
类名效果描述
btn基础按钮样式
btn-primary主要操作按钮
btn-success成功状态按钮

比喻：按钮组件如同网页的“开关”，通过不同的颜色和样式，帮助用户快速识别操作的优先级。

表单布局

Bootstrap4 的表单组件通过 .form-control 类实现统一的输入框样式，同时支持内联表单、水平表单等多种布局：

<!-- 垂直表单 -->  
<form>  
    <div class="form-group">  
        <label for="username">用户名</label>  
        <input type="text" class="form-control" id="username" placeholder="请输入用户名">  
    </div>  

    <div class="form-group">  
        <label for="email">邮箱</label>  
        <input type="email" class="form-control" id="email" placeholder="example@example.com">  
    </div>  
</form>

导航栏（Navbar）

导航栏是网页的核心导航结构，Bootstrap4 提供了预设的实现方案：

<nav class="navbar navbar-expand-lg navbar-light bg-light">  
    <a class="navbar-brand" href="#">Logo</a>  
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">  
        <span class="navbar-toggler-icon"></span>  
    </button>  

    <div class="collapse navbar-collapse" id="navbarNav">  
        <ul class="navbar-nav">  
            <li class="nav-item active">  
                <a class="nav-link" href="#">首页</a>  
            </li>  
            <li class="nav-item">  
                <a class="nav-link" href="#">关于</a>  
            </li>  
        </ul>  
    </div>  
</nav>

注意：data-toggle 和 data-target 属性用于触发导航栏的折叠功能，依赖于 JavaScript 支持。

布局系统：栅格化与响应式设计

栅格系统的核心逻辑

Bootstrap4 的栅格系统基于 12 列布局，通过 row 和 col-* 类实现灵活的布局控制。例如：

<div class="container">  
    <div class="row">  
        <div class="col-md-8">主要内容区域</div>  
        <div class="col-md-4">侧边栏</div>  
    </div>  
</div>

比喻：栅格系统如同乐高积木，每一列是一个独立的“积木块”，开发者可通过调整列的宽度比例，自由拼接页面结构。

响应式断点与列类

Bootstrap4 定义了多种响应式断点（如 xs, sm, md, lg, xl），通过组合类名实现不同屏幕尺寸下的布局适配：

断点最小宽度（像素）对应类名后缀
手机（xs）无限制col-
小平板（sm）≥576pxcol-sm-
中平板（md）≥768pxcol-md-
大桌面（lg）≥992pxcol-lg-

例如，col-sm-6 col-md-4 表示在小屏幕下占 6 列，中等屏幕下占 4 列。

进阶技巧：自定义与扩展

主题颜色的修改

Bootstrap4 允许通过 Sass 变量自定义主题颜色。例如，修改主要颜色：

// 在自定义的 _variables.scss 文件中  
$primary: #ff6b6b;  

// 编译时引入  
@import "~bootstrap/scss/bootstrap";

组件的组合与扩展

通过组合 Bootstrap4 的基础组件，可以快速实现复杂功能。例如，卡片（Card）组件结合图片和文本：

<div class="card" style="width: 20rem;">  
    <img class="card-img-top" src="image.jpg" alt="卡片图片">  
    <div class="card-body">  
        <h5 class="card-title">卡片标题</h5>  
        <p class="card-text">卡片内容...</p>  
        <a href="#" class="btn btn-primary">查看详情</a>  
    </div>  
</div>

JavaScript 插件的使用

Bootstrap4 的 JavaScript 插件需通过 jQuery 或原生 JavaScript 调用。例如，模态框（Modal）的触发方式：

<!-- HTML 结构 -->  
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">  
    打开模态框  
</button>  

<div class="modal" id="myModal">  
    <div class="modal-dialog">  
        <div class="modal-content">  
            <!-- 模态框内容 -->  
        </div>  
    </div>  
</div>

注意：确保在引入 Bootstrap4 的 JavaScript 文件前加载 jQuery 和 Popper.js。

实战案例：搭建一个响应式博客页面

以下是一个完整的博客页面示例，整合了导航栏、栅格布局和卡片组件：

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <!-- 引入 Bootstrap4 资源 -->  
    ...  
</head>  
<body>  
    <!-- 导航栏 -->  
    <nav class="navbar navbar-expand-lg navbar-light bg-light">  
        ...  
    </nav>  

    <!-- 主体内容 -->  
    <div class="container mt-4">  
        <div class="row">  
            <!-- 主内容区域（8 列） -->  
            <div class="col-md-8">  
                <div class="card mb-3">  
                    <div class="card-body">  
                        <h5 class="card-title">文章标题</h5>  
                        <p class="card-text">文章内容...</p>  
                    </div>  
                </div>  
            </div>  

            <!-- 侧边栏（4 列） -->  
            <div class="col-md-4">  
                <div class="card">  
                    <div class="card-header">热门文章</div>  
                    <ul class="list-group list-group-flush">  
                        <li class="list-group-item">文章 1</li>  
                        <li class="list-group-item">文章 2</li>  
                    </ul>  
                </div>  
            </div>  
        </div>  
    </div>  
</body>  
</html>

结论

通过本文的讲解，读者应已掌握 Bootstrap4 的核心功能，包括基础组件、栅格布局、响应式设计和插件使用。Bootstrap4 教程的价值不仅在于其简化开发流程，更在于它提供了一套标准化的设计语言，帮助开发者快速构建高质量的 Web 界面。建议读者在学习后，尝试通过实际项目巩固知识，例如搭建个人博客或企业官网，逐步探索框架的更多可能性。

Bootstrap4 的学习曲线虽平缓，但深入理解其设计理念和实现原理，将显著提升开发效率。希望本文能成为您前端进阶之路上的一块基石！

最新发布

查看更多文章