BootStrap5第一节：安装与调试下载与安装 1. 官网下载第一种方式是通过官网下载，下载地址是 https://

下载与安装

1. 官网下载

第一种方式是通过官网下载，下载地址是 v5.bootcss.com/docs/gettin…，下载最新的版本

2. 使用CDN

使用CDN可以跳过官网下载过程，直接将指定版本的BootStrap生产文件安装到你的项目中，目前官网给出的CDM下载地址是

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rTTiRUKnSWaDu2FjhzWFl8/JuUZMlplyWE/djenb2LoKqkgLGfEGfSrL7XDLoB1M" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-Nj1D6pu2WnJojj+67GiU9ZFNwbl7bUWX5Kj5MS22C8bGjllemM9pvQyvj14zJb58" crossorigin="anonymous"></script>

3. 安装

将下载之后的BootStrap文件夹解压之后放到项目目录中，然后在head标签中添加以下内容导入bootstrap的css

<link href="bootsrtap/css/bootstrap.min.css" rel="stylesheet"/>

在body标签之间加入以下内容引入bootstrap的js插件

<script src="bootsrtap/js/bootstrap.bundle.js"/></script>

图片.png

第一个BootStrap页面

官网给出的示例中并不能直接看到效果，可以自己写一个HTML文件，然后按照前面介绍的安装方式将下载好的源文件引入进去。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>hello bootstrap5</title>
		<link href="bootsrtap/css/bootstrap.min.css" rel="stylesheet"/>
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	
	<body>
		<script src="bootsrtap/js/bootstrap.bundle.js"/></script>
		<h1 class="text-center text-primary">Hello BootStrap,起作用了</h1>
	</body>
</html>

看一下运行效果

第一小节就先到这里，第二小节内容主要是容器相关内容