En este proyecto, crearemos un blog o sitio de noticias utilizando Bootstrap 5. El diseño incluirá Cards para presentar las noticias o entradas de blog y Breadcrumbs para facilitar la navegación entre las categorías y secciones del sitio.
Ver índice del contenido
1. Estructura del Proyecto
1.1. Objetivo del Proyecto
- Diseñar un blog básico o sitio de noticias con:
- Listado de entradas o noticias: Usando Cards para un diseño limpio y atractivo.
- Breadcrumbs: Para mostrar la jerarquía de navegación.
- Diseño de entradas individuales: Una página para visualizar cada noticia o artículo.
1.2. Archivos Necesarios
index.html: Página principal con el listado de noticias.entrada.html: Página para mostrar el contenido de una entrada o noticia.style.css: Opcional, para personalizar el diseño.
2. Configuración Inicial
2.1. Estructura HTML y CDN de Bootstrap
Agregamos el CDN de Bootstrap al archivo index.html.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Blog Noticias</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html>
3. Página Principal: Listado de Noticias
3.1. Barra de Navegación
Creamos una barra de navegación simple con enlaces a diferentes secciones del blog.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Blog Noticias</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#">Inicio</a></li>
<li class="nav-item"><a class="nav-link" href="#">Categorías</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contacto</a></li>
</ul>
</div>
</div>
</nav>3.2. Breadcrumbs
Añadimos un componente de Breadcrumbs para indicar la ubicación en la navegación.
<div class="container mt-4">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Inicio</a></li>
<li class="breadcrumb-item active" aria-current="page">Noticias</li>
</ol>
</nav>
</div>3.3. Listado de Noticias con Cards
Diseñamos el listado de noticias con Cards dentro de un sistema de Grid.
<div class="container mt-4">
<div class="row g-4">
<!-- Noticia 1 -->
<div class="col-md-4">
<div class="card">
<img src="img/noticia1.jpg" class="card-img-top" alt="Noticia 1">
<div class="card-body">
<h5 class="card-title">Título de la Noticia 1</h5>
<p class="card-text">Resumen breve de la noticia. Haz clic para leer más.</p>
<a href="entrada.html" class="btn btn-primary">Leer Más</a>
</div>
</div>
</div>
<!-- Noticia 2 -->
<div class="col-md-4">
<div class="card">
<img src="img/noticia2.jpg" class="card-img-top" alt="Noticia 2">
<div class="card-body">
<h5 class="card-title">Título de la Noticia 2</h5>
<p class="card-text">Resumen breve de la noticia. Haz clic para leer más.</p>
<a href="entrada.html" class="btn btn-primary">Leer Más</a>
</div>
</div>
</div>
<!-- Noticia 3 -->
<div class="col-md-4">
<div class="card">
<img src="img/noticia3.jpg" class="card-img-top" alt="Noticia 3">
<div class="card-body">
<h5 class="card-title">Título de la Noticia 3</h5>
<p class="card-text">Resumen breve de la noticia. Haz clic para leer más.</p>
<a href="entrada.html" class="btn btn-primary">Leer Más</a>
</div>
</div>
</div>
</div>
</div>4. Página de Entrada de Blog
Diseñamos la página para mostrar una entrada o noticia específica en el archivo entrada.html.
4.1. Breadcrumbs para la Entrada
<div class="container mt-4">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Inicio</a></li>
<li class="breadcrumb-item"><a href="#">Noticias</a></li>
<li class="breadcrumb-item active" aria-current="page">Noticia 1</li>
</ol>
</nav>
</div>4.2. Contenido de la Entrada
<div class="container mt-4">
<article>
<h1 class="mb-3">Título de la Noticia</h1>
<img src="img/noticia1.jpg" class="img-fluid mb-4" alt="Noticia 1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
</p>
<p>
Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<a href="index.html" class="btn btn-secondary">Volver a Noticias</a>
</article>
</div>5. Personalización con CSS (Opcional)
En style.css, puedes personalizar los componentes:
.card img {
height: 200px;
object-fit: cover;
}
article img {
max-height: 400px;
object-fit: cover;
}6. Resultado Final
Página Principal
- Muestra un listado de noticias con diseño de Cards y navegación mediante Breadcrumbs.
Página de Entrada
- Presenta el contenido detallado de cada noticia o entrada con un diseño limpio y accesible.
Este diseño puede expandirse fácilmente para incluir categorías dinámicas o un sistema de comentarios.