springboot整合bootstrap

最新推荐文章于 2024-02-15 11:49:55 发布

多写文章能生发

最新推荐文章于 2024-02-15 11:49:55 发布

阅读量7.1k

点赞数 3

分类专栏：前端文章标签： springboot整合bootstrap springboot导入bootstrap springboot引用bootstrap

本文链接：https://blog.csdn.net/sun_luming/article/details/95197617

版权

前端专栏收录该内容

6 篇文章 3 订阅

订阅专栏

之前做前端开发，在使用bootstrap的时候都是去官网下载，然后放到项目中，在页面引用。
最近用springboot开发的时候发现，其实springboot可以让我们像导入java中的其他jar包一样导入bootstrap资源。
步骤如下：
1、在pom文件中加入以下依赖：

        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>3.3.7</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.1.1</version>
        </dependency>
        <dependency>
            <groupId>net.sourceforge.nekohtml</groupId>
            <artifactId>nekohtml</artifactId>
        </dependency>

2、页面引用

<!DOCTYPE html>
<html lang="en">
<head>
   <script src="${basePath}/webjars/jquery/3.1.1/jquery.min.js"></script>
   <script src="${basePath}/webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <link rel="stylesheet" href="${basePath}/webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<button>原始</button>
<button class="btn-warning">警告</button>
<button class="btn-danger">报警</button>
</body>
</html>

上面的代码中我是用到了${basePath},${basePath}不会配置的可以看我的另一篇文章springboot整合freemarker模板引擎后在页面获取basePath绝对路径

最后：
可以看一下bootstrap的样式我们已经使用上了：
在这里插入图片描述

多写文章能生发

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
4
评论
springboot整合bootstrap

之前做前端开发，在使用bootstrap的时候都是去官网下载，然后放到项目中，在页面引用。最近用springboot开发的时候发现，其实springboot可以让我们像导入java中的其他jar包一样导入bootstrap资源。步骤如下：1、在pom文件中加入以下依赖： <dependency> <groupId>org.web...
复制链接

扫一扫