Bootstrap5安装

最新推荐文章于 2025-03-16 19:43:15 发布

听海边涛声

最新推荐文章于 2025-03-16 19:43:15 发布

阅读量858

点赞数 4

文章标签： bootstrap

本文链接：https://blog.csdn.net/panghuangang/article/details/141570986

版权

方式一：直接从官网下载Bootstrap5资源库

下载资源库

在这里插入图片描述

下载下来的是个压缩包：
在这里插入图片描述

解压以后，下面有两个目录：
在这里插入图片描述

css目录下的内容：
在这里插入图片描述

js目录下的内容：
在这里插入图片描述

在html文件中引用、使用

只要把html和bootstrap文件夹放在一起，然后用相对路径引用bootstrap.bundle.min.js 和 bootstrap.min.css文件即可。

具体步骤如下：
1）将解压目录更改名称为bootstrap5，放在网站目录。例如：
在这里插入图片描述

2）在网页head部分引用bootstrap.min.css文件：

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

在这里插入图片描述

3）在网页底部，并且在</body>之前，引用bootstrap.bundle.min.js：

<script src="bootstrap5/js/bootstrap.bundle.min.js"></script>

在这里插入图片描述

备注：bootstrap.bundle.min.js 和 bootstrap.min.css文件的引用路径以项目中实际存放路径为准。

示例：
在这里插入图片描述

在这里插入图片描述

方式二：使用bootstrap的cdn

https://getbootstrap.com/docs/5.3/getting-started/download/#cdn-via-jsdelivr

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

在这里插入图片描述