如何在springboot中使用bootstrap 
时间: 2023-05-25 10:02:25 浏览: 16
A:要在Spring Boot中使用 Bootstrap 首先需要将其引入项目中,在 pom.xml 文件中添加以下依赖:
```
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>4.5.0</version>
</dependency>
```
引入成功后,就可以在 HTML 中引入 Bootstrap 样式了,例如,在 HTML 文件中添加如下代码即可使用 Bootstrap 的样式:
```
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Example</title>
<link rel="stylesheet" href="/webjars/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<h1>Hello, world!</h1>
<div class="jumbotron">
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</body>
</html>
```
以上代码片段中,`/webjars/bootstrap/4.5.0/css/bootstrap.min.css` 是添加的 Bootstrap 样式文件路径,`<div class="jumbotron">...</div>` 是使用了 Bootstrap 样式的一个样例。
但要注意的是,如上代码中在 HTML 的头部引入样式时使用的是相对路径,而在 Spring Boot 中尽可能使用 Thymeleaf 之类的模板引擎去引用资源。
相关推荐













Spring Boot 是一个基于 Spring 框架的快速开发 Web 应用程序的框架,Bootstrap 是一个流行的前端框架,FreeMarker 是一种模板引擎。它们可以一起使用来构建一个完整的后台管理系统。
下面是搭建后台管理系统的步骤:
1. 创建 Spring Boot 项目
使用 Spring Initializr 创建一个新的 Spring Boot 项目。在选择依赖时,选择 Web、FreeMarker 和 Thymeleaf(或者其他模板引擎)。
2. 集成 Bootstrap
在 pom.xml 文件中添加 Bootstrap 的依赖:
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>4.6.0</version>
</dependency>
在 application.properties 中配置静态资源路径:
spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,classpath:/webjars/
3. 集成 FreeMarker
在 pom.xml 文件中添加 FreeMarker 的依赖:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
在 application.properties 中配置 FreeMarker 的模板路径:
spring.freemarker.template-loader-path=classpath:/templates/
4. 创建控制器
创建一个控制器来处理请求和渲染模板。可以使用 @Controller 注解来标记控制器:
java
@Controller
public class HomeController {
@GetMapping("/")
public String index() {
return "index";
}
}
5. 创建模板
在 templates 目录下创建 index.ftl 模板文件,使用 Bootstrap 的样式和组件来构建页面。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后台管理系统</title>
</head>
<body>
后台管理系统
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
</button>
首页 (current)
用户管理
订单管理
欢迎来到后台管理系统
<script src="/webjars/jquery/3.6.0/jquery.min.js"></script>
<script src="/webjars/bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>
6. 运行应用程序
在控制台中运行应用程序:
mvn spring-boot:run
访问 http://localhost:8080/ 即可看到后台管理系统的首页。
总之,Spring Boot、Bootstrap 和 FreeMarker 的结合可以让我们快速开发出一个美观、实用的后台管理系统。




