Spring BootでBootstrapとjQueryを利用する

今回の記事はSpring BootでBootstrapとjQueryを使う方法が知りたい人のために書かれています。

Spring BootでBootstrapとjQueryを使って画面を整えたい！

環境
build.gradle
Thymeleaf

環境

JDK 11
Spring Boot 2.6.2
Bootstrap 5.1.3
jQuery 3.3.1

build.gradle

まずはgradleで導入する場合はbuild.gradleに以下のような記述をします。

dependencies {
	implementation group: 'org.webjars', name: 'bootstrap', version: '5.1.3'
	implementation group: 'org.webjars', name: 'jquery', version: '3.3.1'
　　　　　　　省略 ...
}

Thymeleaf

thymeleafのheadタグ内に以下を追加します。

<head>
    <!-- Bootstrap CSS -->
    <link th:href="@{/webjars/bootstrap/5.1.3/css/bootstrap.min.css}" rel="stylesheet"/>
    <title>トップページ</title>
</head>

bodyタグの最後にjQueryを利用する記述を追加します。

<body>
　　　... 省略
　　　<!-- webjar -->
    <script th:href="@{/webjars/jquery/3.3.1/js/jquery.min.js}"></script>
    <script th:href="@{/webjars/bootstrap/5.1.3/js/bootstrap.min.js}"></script>
</body>

このブログでは初心者の方向けにサーブレットとjspでwebアプリを開発する方法をサンプルコード付きで解説しています。ぜひチャレンジしてみてください。