准备动作
-
进入官网下载压缩包
https://getbootstrap.com/docs/5.2/getting-started/download/
-
解压，然后把文件放在这个目录：\src\main\resources\static
结构如下：
-
将head内容改为如下：
就是引入bootstrap.css。我只引入这一个，引入其他方法一样。
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet"
th:href="@{/bootstrap-5.2.1-dist/css/bootstrap.css}"
href="/static/bootstrap-5.2.1-dist/css/bootstrap.css">
</head>
使用方法：添加相应的class
以按钮为例，为按钮设置不同的class就可以相应不同的状态：
<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>
效果如下
其他标签类似，具体内容参考官方教程：
https://getbootstrap.com/docs/5.2/forms/form-control/
菜鸟教程：
https://www.runoob.com/bootstrap/bootstrap-tutorial.html
中文站
https://v4.bootcss.com/docs/getting-started/introduction/