🚀 Crear Proyecto Base: Spring Boot + Thymeleaf + SB Admin
Este proyecto base te deja un dashboard funcional usando SB Admin 2 integrado con Spring Boot y Thymeleaf.
📁 Estructura del proyecto
src/main/resources/
│
├── static/
│ ├── css/
│ ├── js/
│ ├── vendor/
│ └── img/
│
├── templates/
│ ├── fragments/
│ │ ├── head.html
│ │ ├── sidebar.html
│ │ ├── navbar.html
│ │ └── footer.html
│ │
│ ├── layout.html
│ └── dashboard.html
⚙️ Dependencias (pom.xml)
Agrega esto:
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
</dependency>
</dependencies>
🎮 Controlador
@Controller
public class HomeController {
@GetMapping("/")
public String home() {
return "dashboard";
}
}
🧱 layout.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/head :: head"></head>
<body id="page-top">
<div id="wrapper">
<div th:replace="fragments/sidebar :: sidebar"></div>
<div id="content-wrapper" class="d-flex flex-column">
<div id="content">
<div th:replace="fragments/navbar :: navbar"></div>
<div class="container-fluid" th:insert="~{::content}"></div>
</div>
<div th:replace="fragments/footer :: footer"></div>
</div>
</div>
</body>
</html>
📄 dashboard.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
th:replace="layout :: layout">
<div th:fragment="content">
<h1 class="h3 mb-4 text-gray-800">Dashboard</h1>
</div>
</html>
🧩 fragments/head.html
<head th:fragment="head">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link th:href="@{/vendor/fontawesome-free/css/all.min.css}" rel="stylesheet">
<link th:href="@{/css/sb-admin-2.min.css}" rel="stylesheet">
</head>
📌 fragments/sidebar.html
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" th:fragment="sidebar">
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="#">
<div class="sidebar-brand-text mx-3">Mi Sistema</div>
</a>
<li class="nav-item active">
<a class="nav-link" th:href="@{/}">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span>
</a>
</li>
</ul>
📌 fragments/navbar.html
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow" th:fragment="navbar">
<span>Navbar</span>
</nav>
📌 fragments/footer.html
<footer class="sticky-footer bg-white" th:fragment="footer">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>Copyright © 2026</span>
</div>
</div>
<script th:src="@{/vendor/jquery/jquery.min.js}"></script>
<script th:src="@{/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/sb-admin-2.min.js}"></script>
</footer>
📦 Pasos finales
Descargar SB Admin 2
Copiar carpetas a
/staticEjecutar proyecto
Abrir:
http://localhost:8080/
✅ Resultado
Dashboard funcional
Layout reutilizable
Estructura lista para escalar (POS, admin, etc.)
Comentarios
Publicar un comentario