Spring boot carousel全屏html、css、引导

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

我有一个使用html和css制作全屏旋转木马的问题。当我启动我的webapp时,它只是在浏览器中显示它的空白html文件,上面只有glyphicon。当我在浏览器中打开它而不启动spring时,它工作得很好。我猜我在应用程序属性或映射中遗漏了一些东西

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');">
...