Spring Boot 整合 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 目录中的 cssjsfonts 三个子目录复制到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">
</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">
</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">
</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">
</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}">
</head>
<body>
    <header layout:fragment="header">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">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="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">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 的表单和网格系统来创建一个登录表单和一个随机图片。文章来源地址https://www.toymoban.com/news/detail-420135.html

到了这里,关于Spring Boot 整合 Bootstrap的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 无法查看 spring-boot-starter-parent的pom.xml

    ctrl+鼠标左键 和 ctrl + B 都无法进入 Idea中maven工程下pom文件的某些依赖按ctrl点不进去

    2024年02月07日
    浏览(40)
  • IDEA+spring boot+mybatis+spring mvc+bootstrap+Mysql停车位管理系统源码

    随着时代和科技的进步,人们的生活水平越来越高,私家车的数量不断上涨,随之产生了一些问题,其中就包括停车难,很多地方人们根本找不到停车位,经常有司机为了找停车位转来转去,走了很多弯路,更重要的是浪费了大量的时间。 而停车场车位管理系统可以使司机清

    2024年02月12日
    浏览(43)
  • 报错: Could not transfer artifact org.springframework.boot:spring-boot-starter-parent:pom

    在maven项目中若要导入SpringBoot, 或是创建SpringBoot项目时,父级依赖的spring-boot-starter-parent通常都会出现 Project ‘org.springframework.boot:spring-boot-starter-parent:x.x.x’ not found 或 Could not transfer artifact org.springframework.boot:spring-boot-starter-parent:pom 的错误提示。 问题出现场景 我新建了一个

    2024年02月07日
    浏览(49)
  • Failure to find org.springframework.boot:spring-boot-starter-parent:pom:3.0.1-SNAPSHOT

    使用spring initializr创建maven程序, 在intellij idea中打开时报错: Failure to find org.springframework.boot:spring-boot-starter-parent:pom:3.0.1-SNAPSHOT in http://maven.aliyun.com/nexus/content/groups/public/ was cached in the local repository, resolution will not be reattempted until the update interval of nexus-aliyun has elapsed or updates are

    2024年02月16日
    浏览(71)
  • IDEA创建spring boot项目无法加载出maven里的pom.xml,而是settings.gradle

    在创建的maven项目里找不到pom.xml文件而是settings.gradle,如下图所示: 原因和解决方法: 是因为在创建Springboot项目的时候type里选的是Gradle,gradle和maven又不一样,换成maven就行了,具体操作如下图所示: 在用idea创建maven项目时,在Project Metadata界面Type选项下唯有Maven和Maven PO

    2024年02月09日
    浏览(58)
  • 解决Spring Boot项目中pom.xml环境配置 打包后生效 但idea版本运行无效的问题

    上文 Spring Boot中通过maven进行多环境配置 中我们通过pom.xml配置了环境选择 但这个只有在打包出来的jar中生效 我们直接通过 idea启动 这个东西确实是有点问题 其实 我们执行一下 compile 手工编译一下 然后重新启动 很明显 我们这里配置就已经生效了 这个就是 我们每次改pom.x

    2024年02月10日
    浏览(49)
  • spring boot es | spring boot 整合elasticsearch | spring boot整合多数据源es

    目录 Spring Boot与ES版本对应 Maven依赖 配置类 使用方式 @Test中注入方式 @Component中注入方式 查询文档 实体类 通过ElasticsearchRestTemplate查询 通过JPA查询 保存文档 参考链接 项目组件版本: Spring Boot:2.2.13.RELEASE Elasticsearch:6.8.0 JDK:1.8.0_66 Tips: 主要看第3列和第5列,根据ES版本选择

    2023年04月18日
    浏览(56)
  • 已解决Could not find artifact org.springframework.boot:spring-boot-starter-parent:pom:2.2.4.RELEASE

    已解决Could not find artifact org.springframework.boot:spring-boot-starter-parent:pom:2.2.4.RELEASE Could not find artifact org.springframework.boot:spring-boot-starter-parent:pom:2.2.4.RELEASE 出现找不到Spring Boot依赖的错误可能有多种原因 下滑查看解决方法 以下是一些常见的解决方法: 清理本地Maven仓库:有时候

    2024年02月05日
    浏览(37)
  • springboot web创建失败,解决Could not find artifact org.springframework.boot:spring-boot-starter-parent:pom

    jdk8不支持3.0以上的springboot版本,如果你在创建项目的时候用的是jdk8,那么我建议你在创建好项目之后自行再pom文件里降级,我刚开始接触springboot时,用的是jdk11,导入的springboot版本是2.7.1,然后弄了差不多半天都找不到原因,然后我就扩大了阿里云的搜索地址,自行在pom文

    2024年02月04日
    浏览(46)
  • 聊聊Spring Boot配置文件:优先级顺序、加载顺序、bootstrap.yml与application.yml区别详解

    在 Spring Boot 中,配置文件的优先级顺序是: application-{profile}.yml ( application-{profile}.properties ) application.yml ( application.properties ) bootstrap.yml ( bootstrap.properties )。其中, {profile} 表示不同的环境配置,如 dev 、 test 、 prod 等。 优先级从高到低,高优先级的配置覆盖低优先级

    2024年01月25日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包