Spring工程视图中如何引入css和js样式

之前我们引入css和js样式是这样的

1 <!--bootstrap的css样式-->
2 <link href="css/bootstrap.min.css" rel="stylesheet" >
3 <!--jquery ui的js样式-->
4 <script src="jquery-ui-1.12.1/jquery-ui.min.js" ></script>

而String工程里引入css和js，只需要在前面加一个th:

引入css在href前面加th:

引入js在src前面加th:

示例

1 <!--bootstrap的css样式-->
2 <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"    type="text/css" />
3
4 <!-bootstrap的js样式--->
5 <script type="text/javascript" th:src="@{/js/bootstrap.bundle.min.js}"></script>

注意：在视图中css样式放在</head>结束标签前面

js样式放在</body>结束标签前面

css和js放在工程的哪个目录下？

答：放在工程的src/main/resources/static目录下

原文地址：https://www.cnblogs.com/hzyhx/p/11107915.html

时间： 2024-10-15 19:37:20

Spring工程视图中如何引入css和js样式的相关文章

Yii2引入css和js文件

引入方式有多种: 1.可以直接在视图页面上引入 <?php use yii\helpers\Html; ?> <?=Html::cssFile('@web/css/index.css')?> <?=Html::jsFile('@web/js/jquery.min.js')?> 2.可以直接写原生代码引入,路径是项目目录/web/css 或者/js <script src="js/nav.js"></script> 3.可以使用

引入CSS和JS文件时到底应该在head标签中还是body中？

引入CSS在head中, JS建议在body的尾部引入; 这样有利于加载速度 <!DOCTYPE html> <html> <head>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="

在html中引入css和js的方法

在html中引入css代码在html中插入CSS样式表的方法有三种: 1.外部样式表(External style sheet):即所有的样式单独写在一个.css文件中,在html文件的head部分通过link进行链接 <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> 其中href表示的是外部css文件的路径和名

php ci框架中加载css和js文件失败的原因及解决方法

在将html页面整合到ci框架里面的时候,加载css和js失败.原因是ci框架是入口的框架对框架中文件的所有请求都需要经过index.php处理完成,当加载外部的css和js文件的时候要使用base_url()函数处理外部的链接. 在控制器中需要先载入url相关的类 public function test() { $this->load->helper('url'); $this->load->view('admin/test'); } 在test.php的view视图中.

SpringMVC配置了拦截器（interceptors）却显示不出css、js样式的解决办法

首先因为在web.xml里面配置了 <filter-mapping> <filter-name>characterEncodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> 导致所有的连接都会经过DispatcherServlet,会过滤掉css.js等样式,导致页面无法渲染成功因此需要在springmvc配置文件中放行静态资源 <!

在vue项目npm run build后，index.html中引入css和js 报MIME type问题

问题: 1.在vue项目中,build打包后,index页面打开会报错, MIME type ('text/html') ;报错内容:because its MIME type ('text/html') is not a supported stylesheet MIME type2.控制台报错:报错内容:http://127.0.0.1:5500/static/css/app.04f46711e76646577281177c721d6432.css 这个地址Cannot GET 解决思路:

MVC-采用Bundles方式引入css和js文件

优点:修改js或css时会自动生成hash版本号. 缺点:需要在BundleConfig中先添加对应的文件,然后在html中再引用对应的bundle,多操作了一步. web.config中 <compilation debug="true" targetFramework="4.5" /> 1.BundleConfig 如果是调试模式,前端页面会显示真实的js.css路径,生产环境是会显示前面的路径.在bundles中还可以使用通配符引用. bundle

MVC发布后项目存在于根目录中的子目录中时的css与js、图片路径问题

加载固定资源js与css <script src="@Url.Content("~/Scripts/js/jquery.min.js")" type="text/javascript"></script><link href="@Url.Content("~/Content/css/shop.css")" rel="stylesheet" type=&quo

网页设计中热门的css和js酷炫动画效果

最近在网站和博客上能发现使用各种各样很帮效果的动画效果.CodyHouse介绍了这些CSS和Javas cript的编码教程. 因为每个文件都可以整套下载,所以马上就可以使用. 固定背景效果 →效果页适用的浏览器:Chrome,Safari,Firefox,Opera,IE9+ 在Section和div垂直配置的长页面中,把背景固定,像卷帘被提起似的滚动. 产品展示滑块 →效果页适用的浏览器:Chrome,Safari,Firefox,Opera,IE9+ 把配置卡片状的各个产品,用很棒的动