Spring boot carousel全屏html、css、引导
我有一个使用html和css制作全屏旋转木马的问题。当我启动我的webapp时,它只是在浏览器中显示它的空白html文件,上面只有glyphicon。当我在浏览器中打开它而不启动spring时,它工作得很好。我猜我在应用程序属性或映射中遗漏了一些东西Spring boot carousel全屏html、css、引导,html,css,twitter-bootstrap,spring-boot,thymeleaf,Html,Css,Twitter Bootstrap,Spring Boot,Thymeleaf,我有一个使用html和css制作全屏旋转木马的问题。当我启动我的webapp时,它只是在浏览器中显示它的空白html文件,上面只有glyphicon。当我在浏览器中打开它而不启动spring时,它工作得很好。我猜我在应用程序属性或映射中遗漏了一些东西 body { font-family: 'Roboto', sans-serif; } .carousel-fade .carousel-inner .item { -webkit-transition-property: op
body {
font-family: 'Roboto', sans-serif;
}
.carousel-fade .carousel-inner .item {
-webkit-transition-property: opacity;
transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
z-index: 2;
}
/* carousel fullscreen */
.carousel-fullscreen .carousel-inner .item {
height: 100vh;
min-height: 600px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
/* carousel fullscreen - vertically centered caption*/
.carousel-fullscreen .carousel-caption {
top: 50%;
bottom: auto;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
}
/* overlay for better readibility of the caption */
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: #000;
opacity: 0.3;
transition: all 0.2s ease-out;
}
/* typography */
h1,h2,h3,h4 {
font-weight: 700;
}
.super-heading {
font-size: 70px;
}
.super-paragraph {
font-size: 30px; font-weight: 300;
}
.carousel-caption .super-paragraph a,
.carousel-caption .super-paragraph a:hover
{
color: #fff;
}
#carousel-example-generic {
margin: 40px 0;
}
.demo-content {padding-top: 50px; padding-bottom: 50px; }
html
pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.demo</groupId>
<artifactId>ritagal</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>
<name>Test</name>
<description>Demo project for Spring Boot</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.0.0.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>net.sourceforge.nekohtml</groupId>
<artifactId>nekohtml</artifactId>
<version>1.9.21</version><!--$NO-MVN-MAN-VER$-->
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
4.0.0
com.demo
里塔加尔
0.0.1-快照
罐子
试验
SpringBoot的演示项目
org.springframework.boot
spring启动程序父级
2.0.0.1版本
UTF-8
UTF-8
1.8
org.springframework.boot
弹簧启动装置
org.springframework.boot
弹簧起动试验
测试
net.sourceforge.nekohtml
内科特米尔
1.9.21
org.springframework.boot
SpringBootStarterWeb
org.springframework.boot
springbootmaven插件
通过以下文件结构实现此功能
resources
│ ├── application.properties
│ ├── static
│ │ ├── css
│ │ │ └── custom.css
│ │ └── images
│ │ ├── 1.jpg
│ │ ├── 2.jpg
│ │ └── 3.jpg
│ └── templates
│ └── index.html
将html中的引用更改为
<link href='/css/custom.css' rel='stylesheet' type='text/css'>
及
...
application.properties
在我的例子中是空的我能够取得进展,根据thymeleaf-style th:href=“@{/css/custom.css}”和th:style=“'background-image:url('+@{/images/1.jpg}+);”>
现在一切正常。谢谢大家帮助我 这个白色的屏幕是什么?没有css的html?什么是prj结构?两个文件是否位于同一文件夹中?(静态)我在一个模板文件夹中有css和html,在静态文件夹中有图像。我试着把图片放进templates文件夹,结果还是一样problem@MaxShepard请在帖子中提供与此pathDone相关的配置、控制器文件,我没有此项目的配置类,只有控制器
resources
│ ├── application.properties
│ ├── static
│ │ ├── css
│ │ │ └── custom.css
│ │ └── images
│ │ ├── 1.jpg
│ │ ├── 2.jpg
│ │ └── 3.jpg
│ └── templates
│ └── index.html
<link href='/css/custom.css' rel='stylesheet' type='text/css'>
<div class="item active" style="background-image: url('/images/1.jpg');">
...