「SpringBoot2.6」ThymeleafにBootstrap5.1.3を追加する方法

2022年2月4日

環境
Windows10 64bit
Spring Boot 2.6.3
Spring Tool Suite 4
JavaSE 11
Thymeleaf 3
Bootstrap 5.1.3

使用例
1.pom.xmlにBootstrapのライブラリを追記します

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

2.ライブラリを更新する方法
プロジェクトを右クリックし、「Maven(M)->「プロジェクトの更新(U)」->「OK」をクリックします。

3.Bootstrapからコードを追加
(1).公式のBootstrapのページを表示し、「ドキュメント」をクリックします。

https://getbootstrap.jp/

(2)例としてButtonsを使用します。
Components->Buttonsをクリックし、表示されたコードをコピーします。

(3).Buttons (ボタン)のコードを下記ファイルにコピーします

ファイル名　src/main/resources/templates/bootstrap/index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>BootstrapのButtons (ボタン)のサンプル</title>
<link th:href="@{/webjars/bootstrap/5.1.3/css/bootstrap.min.css}" rel="stylesheet" >
</head>
<body >
<!-- Buttons(ボタン)　Start -->
<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>

<button type="button" class="btn btn-link">Link</button>
<!-- Buttons(ボタン)　End -->

<script th:src="@{/webjars/bootstrap/5.1.3/js/bootstrap.min.js}"></script>
</body>
</html>

4.コントローラ側のクラス(BootstrapController.java)

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class BootstrapController {
      
      @GetMapping("/bootstrap")
    public String input1() {
        return "bootstrap/index";
    }

}

5.動作確認

以下のブラウザにアクセスすると/src/main/resources/配下のtemplatesフォルダのbootstrapフォルダのindex.htmlを表示します。
http://127.0.0.1:8080/bootstrap

Spring Boot

Posted by arkgame

関連投稿: