SpringBoot配置BootStrap

杨胖胖
427 阅读1分钟

离线安装方式

bootstrap官网下载最新的编译好的生产文件，将下载好的css文件和js文件放到springboot项目下的resources目录下，然后在模板文件中引入bootstrap。

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

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

在线安装方式

在webjars中找到bootstrap的最新包，

图片.png这里选择5.1.3最新版本，也是官网最新的版本，然后配置pom.xml。

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>5.1.3</version>
</dependency>

配置pom.xml之后依然要在需要使用bootstrap效果的html文件中引入。

    <link href="/webjars/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="/webjars/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>

CDN安装

除了上面提供的两种安装方式，还可以使用CDN在线安装。

  1. 国内CDN地址 www.staticfile.org
  2. 国外CDN地址 cdnjs.com/

以国内CDN为例，在CDN主页搜索并且选择对应版本的bootstrap，这里选择最新的5.1.3，复制所选择的CDN地址

图片.png

将html文件中的引入方式改为通过CDN引入，CDN地址就是刚刚复制的内容。

<link href="https://cdn.staticfile.org/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>

验证效果

为了验证bootstrap是否成功引入，可以在static目录下创建一个index.html，按照上面介绍的方式配置bootstrap。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理系统</title>
<!--    <link href="/webjars/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">-->
    <link href="bootstrap5.1.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-success">
<div class="container-fluid bg-primary">
<p>欢迎123</p>
</div>
<script src="bootstrap5.1.3/js/bootstrap.bundle.min.js"></script>
<!--<script src="/webjars/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>-->
</body>
</html>

然后启动服务，在浏览器中输入localhost：8080看是否引入成功，看到以下效果说明配置成功。

图片.png

avatar
文章
阅读
粉丝