Spring BootでBootstrapとjQueryを利用する

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

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

環境

  • 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>

コメント

タイトルとURLをコピーしました