引言

Bootstrap 5 是当前最流行的前端框架之一，它提供了丰富的组件和工具，帮助开发者快速构建响应式、美观的网页。本教程旨在帮助初学者从零开始，逐步掌握Bootstrap 5，并通过免费教程和代码下载，让你能够快速上手并应用于实际项目中。

一、Bootstrap 5 简介

Bootstrap 5 是 Bootstrap 框架的第五个主要版本，它基于最新的 HTML5、CSS3 和 JavaScript。Bootstrap 5 带来了许多新特性和改进，包括改进的响应式设计、新的组件和工具，以及更好的兼容性。

二、入门教程

1. 安装和配置

要开始使用 Bootstrap 5，首先需要将其下载到本地。你可以从 Bootstrap 官网 下载最新版本的 Bootstrap 5。

<!-- 引入 Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- 引入 Bootstrap JS 和依赖的 Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

2. 基础组件

Bootstrap 提供了一系列基础组件，如按钮、表单、导航栏等。以下是一个按钮的例子：

<button class="btn btn-primary">点击我</button>

3. 响应式网格系统

Bootstrap 的栅格系统允许你创建响应式布局。以下是一个简单的两列布局示例：

<div class="container">
  <div class="row">
    <div class="col-md-6">左侧内容</div>
    <div class="col-md-6">右侧内容</div>
  </div>
</div>

三、进阶教程

1. 插件和扩展

Bootstrap 提供了许多插件，如模态框、下拉菜单、轮播图等。以下是一个模态框的例子：

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  打开模态框
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">模态框标题</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        模态框内容...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

2. 自定义和主题

你可以根据项目需求自定义 Bootstrap 的样式和主题。以下是如何自定义按钮颜色的示例：

.btn-custom {
  background-color: #343a40;
  border-color: #212529;
}

<button class="btn btn-custom">自定义按钮</button>

四、代码下载

你可以从 Bootstrap 官网 下载完整的 Bootstrap 5 文件夹，包括 CSS、JavaScript 和字体文件。

五、总结

通过本教程，你将能够掌握 Bootstrap 5 的基本使用方法，包括组件、布局、插件和自定义样式。下载提供的代码示例，实践并学习，你将能够更快地掌握这个强大的前端框架。