Как увидеть заголовок запущенного приложения с помощью jumbotron - PullRequest
0 голосов
/ 22 мая 2019

Проблема в том, что когда я запускаю приложение и захожу на localhost: 8080 я не вижу заголовок, который я сделал, но когда приложение не запущено и я хочу посмотреть, как выглядит веб, я вижу его, поэтому проблема может быть в ссылка для моего main.css.

это для новейшей начальной загрузки 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";
    }
}

Я ожидаю, что тот же веб-сайт, но с заголовком, который я вставил в jumbotron.

1 Ответ

0 голосов
/ 22 мая 2019

решаемая.В main.css вместо ввода адреса изображения в «адресе» используйте «адрес»

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

.media-body {
    margin-left: 10px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...