Bootrstap5 入门教程
本教程将帮助你快速上手 Bootstrap 5，一个广泛使用的前端框架，用于创建响应式和移动优先的网页。无论你是前端开发的新手还是有经验的开发者，本教程都将为你提供必要的知识，让你能够高效地使用 Bootstrap 5 来构建现代化的网页。
1. 什么是 Bootstrap 5？
Bootstrap 是一个免费的、开源的前端框架，由 Twitter 的开发团队创建。它提供了大量的 HTML、CSS 和 JavaScript 组件，帮助开发者快速构建美观、响应式的网站和应用。Bootstrap 5 是 Bootstrap 的最新版本，于 2021 年发布，带来了许多新特性和改进。
2. 安装 Bootstrap 5
你可以通过以下几种方式安装 Bootstrap 5：
2.1 使用 CDN
在你的 HTML 文件中添加以下链接：
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>2.2 使用 NPM
如果你使用 npm 包管理器，可以运行以下命令来安装 Bootstrap：
npm install bootstrap然后在你的项目中引入 Bootstrap 的 CSS 和 JavaScript 文件。
2.3 下载源码
你也可以从 Bootstrap 官方网站 下载 Bootstrap 的源码，并手动引入到你的项目中。
3. 基本 HTML 结构
Bootstrap 5 需要一些基本的 HTML 结构来正常工作。以下是一个简单的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 示例</title>
<!-- 引入 Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">我的网站</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切换导航栏">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">关于</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">联系</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-5">
<h1>欢迎使用 Bootstrap 5</h1>
<p>这是一个使用 Bootstrap 5 创建的简单示例。</p>
</div>
<!-- 引入 Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>4. 基本样式
4.1 Typography（排版）
Bootstrap 提供了丰富的排版样式，你可以直接使用这些类来格式化文本。
<h1 class="display-1">这是一个大标题</h1>
<p class="lead">这是一个引导段落。</p>
<p class="text-muted">这是一个灰色文本。</p>
<p class="text-primary">这是一个主色调文本。</p>4.2 色彩主题
Bootstrap 5 提供了一组预定义的颜色类，你可以用来设置文本和背景颜色。
<p class="text-primary">主色调文本</p>
<p class="text-secondary">次要色调文本</p>
<p class="text-success">成功状态文本</p>
<p class="text-danger">危险状态文本</p>4.3 间距和排版
Bootstrap 提供了灵活的间距类，可以帮助你轻松控制元素的 margin 和 padding。
<div class="p-3 bg-light">这是一个有内边距的 div。</div>
<div class="m-3 bg-light">这是一个有外边距的 div。</div>
<div class="mt-4">这是一个只有上边距的 div。</div>5. 表单
5.1 基本表单
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">电子邮件地址</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">我们不会与任何人分享你的电子邮件地址。</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">记住我</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>5.2 按钮
<button type="button" class="btn btn-primary">主按钮</button>
<button type="button" class="btn btn-secondary">次按钮</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-danger">危险</button>6. 响应式设计
Bootstrap 5 使用响应式网格系统来创建适应不同设备的布局。
6.1 网格系统
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-4">列 1</div>
<div class="col-md-6 col-lg-4">列 2</div>
<div class="col-md-6 col-lg-4">列 3</div>
</div>
</div>在这个例子中，列在中等屏幕（md）上占用6个单位，在大屏幕（lg）上占用4个单位。
7. 组件
7.1 卡片（Cards）
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">卡片标题</h5>
<p class="card-text">一些示例文本。一些示例文本。</p>
<a href="#" class="btn btn-primary">去了解更多</a>
</div>
</div>7.2 模态框（Modals）
<!-- 按钮触发模态框 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
打开模态框
</button>
<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">模态框标题</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>7.3 轮播图（Carousel）
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>8. JavaScript 插件
Bootstrap 5 提供了许多有用的 JavaScript 插件，这些插件可以帮助你创建交互式元素。
8.1 模态框（Modal）
<!-- 触发模态框的按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
打开模态框
</button>
<!-- 模态框内容 -->
<div class="modal fade" id="myModal" 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>8.2 工具提示（Tooltip）
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="工具提示文字">悬停我</button>
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>9. 自定义
9.1 自定义编译
你可以通过修改 Bootstrap 的 Sass 文件来自定义样式。首先，安装 Node.js 和 npm，然后安装 Bootstrap 的 Sass 文件：
npm install bootstrap然后在你的 Sass 文件中引入 Bootstrap：
// 引入 Bootstrap 变量
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
// 自定义变量
$primary: #007bff;
// 引入 Bootstrap
@import "~bootstrap/scss/bootstrap";10. 结语
通过本教程，你已经了解了 Bootstrap 5 的基础知识，包括安装、基本结构、样式、表单、响应式布局、组件和 JavaScript 插件。希望这些内容能帮助你快速上手 Bootstrap 5，并创建出美观、响应式的网页。
继续探索 Bootstrap 5 的更多功能，并参考官方文档以获取更多信息和高级用法。