脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → java → SpringBoot整合Bootstrap

Spring Boot整合Bootstrap的超详细步骤

 更新时间：2023年05月08日 11:06:07   作者：wangkay88  
之前做前端开发,在使用bootstrap的时候都是去官网下载,然后放到项目中,在页面引用,下面这篇文章主要给大家介绍了关于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 页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Spring Boot + Bootstrap</title>
    <link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
</head>
<body>
    <div class="container">
        <h1>Hello, Spring Boot!</h1>
    </div>
    <script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

运行程序

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

五、使用 Bootstrap 组件

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Spring Boot + Bootstrap</title>
    <link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
</head>
<body>
    <div class="container">
        <h1>Hello, Spring Boot!</h1>
        <div class="row">
            <div class="col-md-6">
                <form>
                    <div class="form-group">
                        <label for="inputName">Name</label>
                        <input type="text" class="form-control" id="inputName" placeholder="Enter your name">
                    </div>
                    <div class="form-group">
                        <label for="inputEmail">Email</label>
                        <input type="email" class="form-control" id="inputEmail" placeholder="Enter your email">
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>
    <script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

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

高级用法：使用 Thymeleaf 和 Bootstrap

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

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Spring Boot + Bootstrap + Thymeleaf</title>
    <link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
</head>
<body>
    <div class="container">
        <h1>Hello, Spring Boot!</h1>
        <div class="row">
            <div class="col-md-6">
                <form th:action="@{/submit}" method="post">
                    <div class="form-group">
                        <label for="inputName">Name</label>
                        <input type="text" class="form-control" id="inputName" placeholder="Enter your name" th:field="*{name}">
                    </div>
                    <div class="form-group">
                        <label for="inputEmail">Email</label>
                        <input type="email" class="form-control" id="inputEmail" placeholder="Enter your email" th:field="*{email}">
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>
    <script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

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

使用CDN加速加载Bootstrap资源

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Spring Boot + Bootstrap</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css" rel="external nofollow" >
</head>
<body>
    <div class="container">
        <h1>Hello, Spring Boot!</h1>
        <div class="row">
            <div class="col-md-6">
                <form>
                    <div class="form-group">
                        <label for="inputName">Name</label>
                        <input type="text" class="form-control" id="inputName" placeholder="Enter your name">
                    </div>
                    <div class="form-group">
                        <label for="inputEmail">Email</label>
                        <input type="email" class="form-control" id="inputEmail" placeholder="Enter your email">
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>
    <script src="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 的示例：

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

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

index.html

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

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

总结

到此这篇关于Spring Boot整合Bootstrap的超详细步骤的文章就介绍到这了,更多相关SpringBoot整合Bootstrap内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 单例模式垃圾回收_动力节点Java学院整理

    单例模式垃圾回收_动力节点Java学院整理

    这篇文章主要为大家详细介绍了单例模式垃圾回收的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Spring @Lookup深入分析实现原理

    Spring @Lookup深入分析实现原理

    这篇文章主要介绍了Spring @Lookup实现原理，我们知道在spring容器中单独的一个抽象类是不能成为一个bean的，那么有没有办法呢？这个时候我们可以使用Lookup注解
    2023-01-01
  • java stream distinct()如何按一个或多个指定对象字段进行去重

    java stream distinct()如何按一个或多个指定对象字段进行去重

    这篇文章主要介绍了java stream distinct()如何按一个或多个指定对象字段进行去重问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • IntelliJ IDEA的build path设置方法

    IntelliJ IDEA的build path设置方法

    这篇文章主要介绍了IntelliJ IDEA的build path设置方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • SpringBoot多环境配置方式的新手教程

    SpringBoot多环境配置方式的新手教程

    我们平时做项目的时候,一般都会分几套环境,每一套环境的配置都是不一样的,所以这篇文章就来为大家详细介绍一下SpringBoot多环境配置方式,希望对大家有所帮助
    2023-11-11
  • Java实现格式化打印慢SQL日志的方法详解

    Java实现格式化打印慢SQL日志的方法详解

    不管我们使用何种语言开发,一旦程序发生异常,日志是一个很重要的数据,下面这篇文章主要给大家介绍了关于Java实现格式化打印慢SQL日志的相关资料,需要的朋友可以参考下
    2022-10-10
  • Java中的concurrenthashmap集合详细剖析

    Java中的concurrenthashmap集合详细剖析

    这篇文章主要介绍了Java中的concurrenthashmap集合详细剖析,有参构造后第一次put时会进行初始化,由源码可知,会先判断所传入的容量是否>=最大容量的一半,如果满足条件,就会将容量修改为最大值,反之则会将容量改为所传入数*1.5+1,需要的朋友可以参考下
    2023-11-11
  • java多线程实现交通灯管理系统

    java多线程实现交通灯管理系统

    这篇文章主要为大家详细介绍了java多线程实现交通灯管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • Redis Lettuce连接redis集群实现过程详细讲解

    Redis Lettuce连接redis集群实现过程详细讲解

    这篇文章主要介绍了Redis Lettuce连接redis集群实现过程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
    2023-01-01
  • java枚举的使用示例

    java枚举的使用示例

    我们在学习编程语言的时候都学过枚举，现在就具体来看看java中的枚举的使用
    2013-12-12

最新评论