引入bootstrap步骤
1、下载bootstrap文件
首先需要在Bootstrap官网下载所需要的版本。在该页面中可以看到Bootstrap提供了多个版本，其中包括CSS、Javascript、以及jQuery。这里我们选择下载最新的CSS和JS版本，在页面底部的"Download"部分找到"Compiled CSS and JS"，选择下载即可。
<!-- 下载CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-OgVRvuATP1z7JjHLkuOUeJLwYw3U+zx5I7kFZXy3X8uJQDQ9TNZq1tIS2jcP20U/"
crossorigin="anonymous">
<!-- 下载JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/4.5.2/js/bootstrap.min.js"></script>
2、创建HTML文件
接下来，需要创建一个HTML文件并嵌入Bootstrap所需的文件。首先可以简单的写一些HTML代码来测试是否成功引入Bootstrap。可以创建一个空白的HTML文件，并通过以下方式来引入Bootstrap：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bootstrap Test</title>
<!-- 引入CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-OgVRvuATP1z7JjHLkuOUeJLwYw3U+zx5I7kFZXy3X8uJQDQ9TNZq1tIS2jcP20U/"
crossorigin="anonymous">
<!-- 引入JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Hello, Bootstrap!</h1>
</div>
</body>
</html>
3、添加Bootstrap组件
引入Bootstrap后，可以通过添加预定义的组件来快速构建Web应用。以下是一些简单组件的使用示例：
3.1、导航栏
导航栏是Web应用中经常使用的组件，可以通过Bootstrap快速轻松的创建导航栏，以下是一个示例：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">My Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<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="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
3.2、按钮
Bootstrap中提供了丰富的按钮样式，可以根据需要选择合适的样式。以下是示例代码：
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
3.3、卡片
卡片是Bootstrap中经常使用的组件，可以作为展示内容的容器，以下是一个示例：
<div class="card" style="width: 18rem;">
<img src="https://picsum.photos/id/237/200/300" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
到这里，我们已经成功的引入并使用了Bootstrap中的一些组件。如果需要了解更多组件的使用可以查阅官方文档。