文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用jumbotron查看运行应用程序的标题

问如何使用jumbotron查看运行应用程序的标题
EN

Stack Overflow用户

提问于 2019-05-22 14:32:59

回答 1查看 47关注 0票数 0

问题是当我运行应用程序并转到localhost:8080时，我看不到我创建的头文件，但当应用程序不运行时，我想看看网页的外观，所以问题可能出在我的main.css的链接中。

这是为最新的bootstrap 4.3.1 java 12 spring boot 2.1.5编写的

home.html

<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Home page</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <link href="../static/css/main.css" th:href="@{/css/main.css}" rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="jumbotron home-jumbo">
        <div class="container text-center text-white jumbo-container">
            <h1 class="display-3">Foodie</h1>
            <p>Welcome in our restaurant. You can order what You want and how much You want and we will do it for
                You.</p>
        </div>
    </div>
    <div th:remove="all-but-first">
        <div class="media col-6 offset-3" th:each="item: ${items}">
            <i class="fas fa-utensils fa-4x"></i>
            <div class="media-body">
                <h5 th:text="|${item.name}(${item.price}zł)|">Pizza Margherita (25zł)</h5>
                <p th:text="${item.shortDescription}">Short description pizza margherita, delicious classic on thin
                    crust and melt cheese.</p>
            </div>
        </div>
        <div class="media col-6 offset-3">
            <i class="fas fa-utensils fa-4x"></i>
            <div class="media-body">
                <h5>Pizza Capriciosa (26zł)</h5>
                <p>Short description pizza margherita, delicious classic on thin crust and melt cheese.</p>
            </div>
        </div>
        <div class="media col-6 offset-3">
            <i class="fas fa-utensils fa-4x"></i>
            <div class="media-body">
                <h5>Pizza Mafioso (27zł)</h5>
                <p>Short description pizza margherita, delicious classic on thin crust and melt cheese.</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>

main.css

.home-jumbo {
    background: url("../img/fork.png") center;
}

.media-body {
    margin-left: 10px;
}

HomeCotroller

package pl.karol.foodieapp;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import pl.karol.foodieapp.item.Item;
import pl.karol.foodieapp.item.ItemRepository;

import java.util.List;

@Controller
public class HomeController {

    private ItemRepository itemRepository;

    @Autowired
    public HomeController(ItemRepository itemRepository) {
        this.itemRepository = itemRepository;
    }

    @GetMapping("/")
    public String home(Model model) {
        List<Item> items = itemRepository.findAll();
        model.addAttribute("items", items);
        return "home";
    }
}

我希望同样的网站，但包括我放在巨无霸的标题。

bootstrap-4

thymeleaf

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-05-22 17:54:35

解决了。在main.css中，不是在" address“中键入图像url地址，而是使用”address“

.home-jumbo {
    background: url('../img/fork.png') center;
}

.media-body {
    margin-left: 10px;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56250630

复制

相似问题

问如何使用jumbotron查看运行应用程序的标题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jumbotron查看运行应用程序的标题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jumbotron查看运行应用程序的标题
EN