Spring BootにBootstrapを追加するサンプルです。
確認環境 ・Spring Boot 2.3.3 ・Bootstrap v4.5.0 ・JDK 11.0.2 ・STS 4.7.2 |
目次
サンプル | pom.xmlの設定 |
Bootstrapからコードを追加 |
pom.xmlの設定
pom.xmlのdependenciesの箇所に以下を追記します。
<!-- https://mvnrepository.com/artifact/org.webjars/bootstrap -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>4.5.2</version>
</dependency>
Bootstrapのライブラリです。
Bootstrapからコードを追加
Bootstrapからコードを追加します。
1.公式のBootstrapのページを表示し、「ドキュメント」をクリックします。
https://getbootstrap.jp/
2.例としてBadgeを使用します。
Components→Badgeをクリックし、表示されたコードをコピーします。
3.上記でコピーしたコードをビューに貼り付けます。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<link rel="stylesheet" th:href="@{/webjars/bootstrap/4.5.2/css/bootstrap.min.css}">
<title>check</title>
</head>
<body >
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
</body>
</html>
9~16行目がコピペしたコードです。
5行目は、BootstrapのCSSへのリンクの設定です。
4.ブラウザで画面を表示すると、デザインされたBadgeが表示されます。
Bootstrapのページには、様々なデザインされたものがあります。
Javascriptが必要なものもあります。その場合はベージに記載があります。
また有料のデザインもあります。
関連の記事