SpringBoot引入BootStrap登陆页面

原创于 2019-11-14 11:12:36 发布 · 927 阅读

1 ·

CC 4.0 BY-SA版权

SpringBoot 专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何在SpringBoot项目中引入Thymeleaf模板引擎和Bootstrap前端框架，实现美观的登录页面设计。文章详细展示了依赖配置、控制器映射及样式路径修改等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.引入thymeleaf和webjars中的bootstrap

		<dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>4.3.1</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

2.BootStrap提供的登陆页面

在这里插入图片描述
效果

3.引入SpringBoot项目

在这里插入图片描述

4.首页映射

@Controller
public class indexController {

    @RequestMapping("/")
    public String index(){
        return "index";
    }

}

5.修改index.html中引入样式的路径

    <!--引入webjars中的bootstrap的css    -->
    <link th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.css}" rel="stylesheet">


    <!--引用bootstrap官方登陆页面的css    -->
    <link th:href="@{/css/signin.css}" rel="stylesheet">

需要注意的是，SpringBoot编译后static和templates在同一个文件夹下