Spring Boot 整合 Bootstrap

一、添加 Bootstrap 依赖

在 pom.xml 文件中添加以下依赖：

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

这里使用 WebJars 来管理 Bootstrap 的依赖，它可以将前端框架作为一个 jar 包进行引用，方便管理和升级。

二、配置静态资源

在 Spring Boot 项目中，静态资源默认放置在 src/main/resources/static 目录下。因此，我们需要将 Bootstrap 的静态资源也放置在该目录下。

在 src/main/resources/static 目录下新建一个名为webjars的目录。
在 webjars 目录下新建一个名为 bootstrap 的目录。
将 bootstrap-5.1.3 目录中的 css、js和 fonts 三个子目录复制到src/main/resources/static/webjars/bootstrap 目录下。

这样，我们就成功将 Bootstrap 的静态资源放置在了 Spring Boot 项目的静态资源目录下。

三、创建一个 Bootstrap 页面

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Spring Boot + Bootstrap</title><linkrel="stylesheet"href="/webjars/bootstrap/css/bootstrap.min.css"></head><body><divclass="container"><h1>Hello, Spring Boot!</h1></div><scriptsrc="/webjars/bootstrap/js/bootstrap.min.js"></script></body></html>

运行程序

访问

http://localhost:8080

，应该能看到一个带有标题的页面，这就说明我们已经成功地整合了 Bootstrap 前端框架。

五、使用 Bootstrap 组件

除了引入 Bootstrap 的样式和脚本文件外，我们还可以使用 Bootstrap 提供的组件来构建页面。以下是一个使用 Bootstrap 栅格系统和表单组件的示例：

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Spring Boot + Bootstrap</title><linkrel="stylesheet"href="/webjars/bootstrap/css/bootstrap.min.css"></head><body><divclass="container"><h1>Hello, Spring Boot!</h1><divclass="row"><divclass="col-md-6"><form><divclass="form-group"><labelfor="inputName">Name</label><inputtype="text"class="form-control"id="inputName"placeholder="Enter your name"></div><divclass="form-group"><labelfor="inputEmail">Email</label><inputtype="email"class="form-control"id="inputEmail"placeholder="Enter your email"></div><buttontype="submit"class="btn btn-primary">Submit</button></form></div></div></div><scriptsrc="/webjars/bootstrap/js/bootstrap.min.js"></script></body></html>

在这个页面中，我们使用了 Bootstrap 的栅格系统来将表单组件布局为两列，使用了表单组件来收集用户的姓名和电子邮件地址，并使用了按钮组件来提交表单。

高级用法：使用 Thymeleaf 和 Bootstrap

除了手动编写 HTML 页面外，我们还可以使用 Thymeleaf 模板引擎来结合 Bootstrap 来构建页面。下面是一个使用 Thymeleaf 和 Bootstrap 的示例：

<!DOCTYPEhtml><htmlxmlns:th="http://www.thymeleaf.org"><head><metacharset="UTF-8"><title>Spring Boot + Bootstrap + Thymeleaf</title><linkrel="stylesheet"href="/webjars/bootstrap/css/bootstrap.min.css"></head><body><divclass="container"><h1>Hello, Spring Boot!</h1><divclass="row"><divclass="col-md-6"><formth:action="@{/submit}"method="post"><divclass="form-group"><labelfor="inputName">Name</label><inputtype="text"class="form-control"id="inputName"placeholder="Enter your name"th:field="*{name}"></div><divclass="form-group"><labelfor="inputEmail">Email</label><inputtype="email"class="form-control"id="inputEmail"placeholder="Enter your email"th:field="*{email}"></div><buttontype="submit"class="btn btn-primary">Submit</button></form></div></div></div><scriptsrc="/webjars/bootstrap/js/bootstrap.min.js"></script></body></html>

在这个页面中，我们使用了 Thymeleaf 的表达式语言来动态地生成表单组件，使用了 Thymeleaf 的表单绑定来将表单数据绑定到模型对象上。使用 Thymeleaf 可以让我们更加便捷地生成 HTML 页面，并且提供了强大的表达式语言来处理页面逻辑。

使用CDN加速加载Bootstrap资源

在生产环境中，为了加速页面加载速度，我们可以将 Bootstrap 的静态资源文件放在 CDN 上。这样可以减少服务器的压力，并且可以利用 CDN 的分布式网络加速页面加载。以下是一个使用 CDN 加速加载 Bootstrap 资源的示例：

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Spring Boot + Bootstrap</title><linkrel="stylesheet"href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css"></head><body><divclass="container"><h1>Hello, Spring Boot!</h1><divclass="row"><divclass="col-md-6"><form><divclass="form-group"><labelfor="inputName">Name</label><inputtype="text"class="form-control"id="inputName"placeholder="Enter your name"></div><divclass="form-group"><labelfor="inputEmail">Email</label><inputtype="email"class="form-control"id="inputEmail"placeholder="Enter your email"></div><buttontype="submit"class="btn btn-primary">Submit</button></form></div></div></div><scriptsrc="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.2/js/bootstrap.min.js"></script></body></html>

使用Thymeleaf Layouts

在使用 Thymeleaf 和 Bootstrap 构建页面时，我们还可以使用 Thymeleaf Layouts 来更加方便地组织页面结构。Thymeleaf Layouts 是一款 Thymeleaf 模板引擎的扩展，提供了布局和片段的功能，可以让我们更加方便地重用页面结构。以下是一个使用 Thymeleaf Layouts 的示例：

<!DOCTYPEhtml><htmlxmlns:th="http://www.thymeleaf.org"xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"><head><metacharset="UTF-8"><titlelayout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">Spring Boot + Bootstrap</title><linkrel="stylesheet"th:href="@{/webjars/bootstrap/css/bootstrap.min.css}"></head><body><headerlayout:fragment="header"><navclass="navbar navbar-expand-lg navbar-light bg-light"><aclass="navbar-brand"href="#">Navbar</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarNav"aria-controls="navbarNav"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarNav"><ulclass="navbar-nav"><liclass="nav-item active"><aclass="nav-link"href="#">Home <spanclass="sr-only">(current)</span></a></li><liclass="nav-item"><aclass="nav-link"href="#">Features</a></li><liclass="nav-item"><aclass="nav-link"href="#">Pricing</a></li></ul></div></nav></header><divclass="container"><sectionlayout:fragment="content"></section></div><scriptth:src="@{/webjars/jquery/jquery.min.js}"></script><scriptth:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script></body></html>

在这个页面中，我们定义了一个 layout 命名空间，并使用 layout 命名空间中的 title-pattern 属性来动态设置页面标题。在 header 片段中定义了导航栏，而 content 片段则留给子页面来填充。

index.html

<!DOCTYPEhtml><htmlxmlns:th="http://www.thymeleaf.org"xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"layout:decorate="layout"><head><metacharset="UTF-8"><title>Home</title></head><body><headerlayout:fragment="header"></header><sectionlayout:fragment="content"><h1>Hello, Spring Boot!</h1><divclass="row"><divclass="col-md-6"><form><divclass="form-group"><labelfor="inputName">Name</label><inputtype="text"class="form-control"id="inputName"placeholder="Enter your name"><divclass="form-group"><labelfor="inputEmail">Email address</label><inputtype="email"class="form-control"id="inputEmail"placeholder="Enter your email"></div><divclass="form-group"><labelfor="inputPassword">Password</label><inputtype="password"class="form-control"id="inputPassword"placeholder="Enter your password"></div><buttontype="submit"class="btn btn-primary">Submit</button></form></div><divclass="col-md-6"><imgsrc="https://picsum.photos/500/300"alt="Random image"class="img-fluid"></div></div></section></body></html>

在子页面中，我们使用 layout:decorate 属性来引用 layout.html，并使用 header 和 content 片段来填充导航栏和主要内容。在主要内容中，我们使用 Bootstrap 的表单和网格系统来创建一个登录表单和一个随机图片。

标签： bootstrap spring boot 前端

本文转载自: https://blog.csdn.net/qq_54351538/article/details/129476292
版权归原作者 wangkay88 所有，如有侵权，请联系我们删除。

Spring Boot 整合 Bootstrap