Nie pokazuje zawartości diva [java,thymeleaf]

pytanie zadane 13 września 2018 w HTML i CSS przez heartagram Obywatel (1,770 p.)

cześć,

chciałem zrobić aplikacje webową ( w javie ) zatem zabrałem się pierw od stworzenia wyglądu. Jako, że z fronendem u mnie cienko to chciałem posłużyć się gotowymi szablonami np. bootstrap navbar. Używam dodatkowo thymeleaf. Skopiowałem przykładowy pasek nawigacyjny jednak wygląda on tak:

Zamiast tak:

Skopiowany kod 1:1 ze strony: https://getbootstrap.com/docs/4.0/components/navbar/

z dopiskiem jedynie: th:fragment="header">

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	<div class="navbar navbar-expand-lg navbar-light bg-light" 	th:fragment="header">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</div>
</body>
</html>

Plik znajduje się w : MojaNazwaAplikacji\src\main\resources\templates\header.html

wraz z innymi plikami jak index.html czy footer.html

Jakieś pomysły? :)

1 odpowiedź

odpowiedź 13 września 2018 przez miro Pasjonat (23,870 p.)

Nie masz podpiętego Bootstrapa, musisz dodać webjar i podlinkować ten framework.

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
              th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.min.css}">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
              th:href="@{/webjars/font-awesome/5.0.6/web-fonts-with-css/css/fontawesome-all.min.css}"/>

        <link rel="stylesheet" href="/css/style.css"
              th:href="@{/css/style.css}"/>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"
                th:src="@{/webjars/jquery/3.2.1/jquery.min.js}"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
                th:src="@{/webjars/popper.js/1.12.5/dist/umd/popper.min.js}"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
                th:src="@{/webjars/bootstrap/4.0.0/js/bootstrap.min.js}"></script>

komentarz 13 września 2018 przez heartagram Obywatel (1,770 p.)

Hm, dodałem zależność w pom.xml, to co poleciłeś do index.html jednak wciąż to samo

komentarz 13 września 2018 przez miro Pasjonat (23,870 p.)

Pozmieniałeś wersje bibliotek? Sprawdzaj w źródle strony czy ładuje się Tobie bootstrap.

Jak dodałeś to tylko do index.html, to nie oczekuj, że będziesz mieć to w header.html. Można importować fragmenty np. jak tutaj: https://github.com/amiroslaw/languide/tree/master/src/main/resources/templates
Sprawdź w ogóle czy w index.html będzie Tobie działać te menu, bo może to jakiś inny problem.

komentarz 13 września 2018 przez heartagram Obywatel (1,770 p.)

bootstrap , style

Status Code:

200 OK

index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Drink Shop</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.min.css}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      th:href="@{/webjars/font-awesome/5.0.6/web-fonts-with-css/css/fontawesome-all.min.css}"/>
 
<link rel="stylesheet" href="/css/style.css"
      th:href="@{/css/style.css}"/>


</head>
<body>


	<div th:replace="navbar :: navbar">Naglowek</div>

	<h1>Test</h1>


	<p>Tu bedzie fajny sklep z napojami</p>

	<div th:replace="footer :: footer">Stopka</div>
	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"
        th:src="@{/webjars/jquery/3.2.1/jquery.min.js}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
        th:src="@{/webjars/popper.js/1.12.5/dist/umd/popper.min.js}"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        th:src="@{/webjars/bootstrap/4.0.0/js/bootstrap.min.js}"></script>



</body>
</html>

footer.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.min.css}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      th:href="@{/webjars/font-awesome/5.0.6/web-fonts-with-css/css/fontawesome-all.min.css}"/>
 
<link rel="stylesheet" href="/css/style.css"
      th:href="@{/css/style.css}"/>
</head>
<body>
	<div th:fragment="footer">&copy; 2018 Footer</div>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"
        th:src="@{/webjars/jquery/3.2.1/jquery.min.js}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
        th:src="@{/webjars/popper.js/1.12.5/dist/umd/popper.min.js}"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        th:src="@{/webjars/bootstrap/4.0.0/js/bootstrap.min.js}"></script>

</body>
</html>

navbar.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.min.css}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      th:href="@{/webjars/font-awesome/5.0.6/web-fonts-with-css/css/fontawesome-all.min.css}"/>
 
<link rel="stylesheet" href="/css/style.css"
      th:href="@{/css/style.css}"/>

</head>
<body>
	
	<div class="navbar navbar-expand-lg navbar-light bg-light" 	th:fragment="navbar">
  <a class="navbar-brand" href="#">DrInK sHoP</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Cos tam <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
      
      <a th:href="@{/register}">Register</a>
   
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          My account
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Shopping cart</a>
          <a class="dropdown-item" href="#">My details</a>
          <a class="dropdown-item" href="#">Edit details</a>
          <a class="dropdown-item" href="#">Logout</a>
        </div>
      </li>
    </ul>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"
        th:src="@{/webjars/jquery/3.2.1/jquery.min.js}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
        th:src="@{/webjars/popper.js/1.12.5/dist/umd/popper.min.js}"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        th:src="@{/webjars/bootstrap/4.0.0/js/bootstrap.min.js}"></script>


</body>
</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>pl.emilfrankiewicz</groupId>
	<artifactId>DrinkShop</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>war</packaging>



	<name>DrinkShop</name>
	<description>Spring Application</description>

	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.0.3.RELEASE</version>
		<relativePath />
	</parent>

	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
		<maven.compiler.source>1.8</maven.compiler.source>
		<maven.compiler.target>1.8</maven.compiler.target>
		<java.version>1.8</java.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-jpa</artifactId>
		</dependency>

		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<scope>runtime</scope>
		</dependency>

		<dependency>
			<groupId>org.hibernate</groupId>
			<artifactId>hibernate-core</artifactId>
		</dependency>

		<dependency>
			<groupId>org.hibernate</groupId>
			<artifactId>hibernate-entitymanager</artifactId>
		</dependency>

		<dependency>
			<groupId>javax.xml.bind</groupId>
			<artifactId>jaxb-api</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.apache.tomcat.embed</groupId>
			<artifactId>tomcat-embed-jasper</artifactId>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-tomcat</artifactId>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
		<dependency>

			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>bootstrap</artifactId>
			<version>4.1.3</version>
		</dependency>

		<dependency>
			<groupId>org.webjars.bower</groupId>
			<artifactId>bootstrap</artifactId>
			<version>4.1.3</version>
		</dependency>

	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

dla testu wrzuciłem style.css w

DrinkShop/src/main/resources/static/css

h1 {
color: green;
}

i kompletnie nie wiem co jest grane, wszystko wygląda ok lecz nie działa:

komentarz 14 września 2018 przez miro Pasjonat (23,870 p.)

Sprawdzaj w źródle wygenerowanej strony czy ładuje się Tobie bootstrap.

Masz inne wersje bootstrapa

  <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>4.1.3</version>

th:src="@{/webjars/bootstrap/4.0.0/js/bootstrap.min.js}