Spring Boot整合Bootstrap的超详细步骤

下面是“Spring Boot整合Bootstrap的超详细步骤”完整攻略：

1. 引入Bootstrap资源

首先，在你的Web项目中引入Bootstrap资源，具体来说，就是将Bootstrap的CSS、JS等文件引入到项目中。你可以通过下载Bootstrap的官方资源文件并手工进行配置，也可以直接使用CDN引入。

下面示例展示了通过CDN直接引入Bootstrap资源的方式：

<!-- 引入Bootstrap的CSS文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- 引入jQuery -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
<!-- 引入Bootstrap的JS文件 -->
<script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

2. 创建Spring Boot Web项目

首先，你需要创建一个Spring Boot Web项目。你可以通过使用Spring Initializr来创建一个Spring Boot Web项目，并在其中添加所需的依赖，如下所示：

<dependencies>
    <!-- Spring Boot Web 依赖 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <!-- Thymeleaf 模板引擎依赖 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
</dependencies>

3. 添加Thymeleaf Layout

接下来，你需要添加Thymeleaf Layout模板，以便在页面中引入Bootstrap的样式和JS文件。

首先，在pom.xml中添加如下依赖：

<!-- Thymeleaf Layout 模板引擎依赖 -->
<dependency>
    <groupId>nz.net.ultraq.thymeleaf</groupId>
    <artifactId>thymeleaf-layout-dialect</artifactId>
    <version>2.4.1</version>
</dependency>

然后，在src/main/resources/templates/目录下创建layout.html文件，代码如下：

<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE"></title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="../css/style.css" th:href="@{/css/style.css}"/>
    <link rel="stylesheet" href="../css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}"/>
</head>
<body>

<div layout:fragment="content"></div>

</body>
</html>

4. 编写主页面模板

接下来，在src/main/resources/templates/目录下创建index.html文件，并将其定义为Thymeleaf Layout页面模板。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout}">
<head>
    <title>Spring Boot 整合 Bootstrap</title>
</head>
<body>

<div layout:fragment="content">
    <div class="container">
        <div class="jumbotron">
            <h1 class="display-4">Hello, world!</h1>
            <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
            <hr class="my-4">
            <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
            <p class="lead">
                <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
            </p>
        </div>
    </div>
</div>

</body>
</html>

5. 运行程序

最后，通过运行程序，你可以在浏览器中查看到整合了Bootstrap的Web页面。

同样的，你可以参考下面的另一种示例来实现整合Bootstrap的Spring Boot Web应用：

@Controller
public class IndexController {
    @RequestMapping("/")
    public String index(Model model) {
        model.addAttribute("msg", "Hello, World!");
        return "index";
    }
}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Spring Boot 整合 Bootstrap</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
    <h1 th:text="${msg}"></h1>
    <button class="btn btn-primary">按钮</button>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
</body>
</html>

最后，总结一下，整合Bootstrap的步骤如下：

引入Bootstrap资源；
创建Spring Boot Web项目；
添加Thymeleaf Layout模板；
编写主页面模板；
运行程序。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Spring Boot整合Bootstrap的超详细步骤 - Python技术站