今天在使用bootstrap搭建前台模板的时候还像过去文件引用方式引用bootstrap的css和js文件发现都没有用。
静态资源目录结构如下:
代码如下:
<head>
<meta charset="utf-8">
<title>BRACKETS 入门</title>
<link rel="stylesheet" href="//www.greatytc.com/css/bootstrap.min.css">
</head>
经过网上一番查阅之后看到,暂时仍旧没有找到原因。(找到原因会写出来),后来我果断摒弃了这种做法。选用webjar来管理前台资源文件,因为通过手工进行管理,容易导致文件混乱、版本不一致等问题。而WebJars是将这些通用的Web前端资源打包成Java的Jar包,然后借助Maven工具对其管理,保证这些web资源版本唯一性,升级也比较容易。
关于webjars资源,有一个专门的网站http://www.webjars.org/,我们可以到这个网站上找到自己需要的资源,在自己的工程中添加入maven依赖,即可直接使用这些资源了。
-
Pom.xml
<!-- https://mvnrepository.com/artifact/org.webjars/webjars-locator --> <dependency> <groupId>org.webjars</groupId> <artifactId>webjars-locator</artifactId> <version>0.32-1</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>3.3.7-1</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.2.1</version> </dependency>
- webjars-locator 包的作用是省略 webjar 的版本。比如对于请求
http://localhost:8080/webjars/jquery/3.1.0/jquery.js
省略版本号 3.2.1 直接使用http://localhost:8080/webjars/jquery/jquery.js
也可访问。
- webjars-locator 包的作用是省略 webjar 的版本。比如对于请求
-
Html 页面引用资源文件
原:
<link rel="stylesheet" href="/css/bootstrap.min.css"/>
现:
<link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css"/>
-
其他资源文件引用方式:cdn加速服务
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">