Bulma es un marco CSS que facilita el desarrollo de sitios web hermosos y receptivos. Está basado en flexbox . En este artículo, veremos las partes del elemento de la tarjeta en Bulma. La tarjeta tiene las siguientes 4 partes: el lector de tarjetas, la imagen de la tarjeta, el contenido de la tarjeta y el pie de página de la tarjeta.
Clases de piezas de tarjetas Bulma: estas clases se pueden usar juntas para hacer una tarjeta. No se requieren las cuatro partes para construir una tarjeta, puede usar la parte que necesita.
- card-header: esta clase se utiliza para deformar el encabezado de la tarjeta.
- card-image: esta clase se utiliza para deformar la imagen de la tarjeta.
- contenido de la tarjeta: esta clase se utiliza para distorsionar el contenido de la tarjeta.
- card-footer: esta clase se utiliza para deformar el pie de página de la tarjeta.
Sintaxis:
<div class="card">
<div class="Card Parts Classes">
....
</div>
</div>
Ejemplo: En el siguiente ejemplo, hemos usado las cuatro partes de la tarjeta para hacer la tarjeta que se muestra en la salida.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
<style>
.card {
max-width: 300px;
margin: 0 auto;
margin-top: 25px;
}
.card-header {
justify-content: center;
padding: 10px 0px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b>Bulma Card Parts</b>
<div class="container">
<div class="card">
<div class="card-header">
<p class="is-size-3">
<b>GeeksforGeeks</b>
</p>
</div>
<div class="card-image">
<figure class="image">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220115184050/gfglogo-300x300.png"
alt="GeeksforGeeks logo">
</figure>
</div>
<div class="card-content">
<p>
GeeksforGeeks is a computer science
portal for geeks by geeks. Here you
can find articles on various computer
science topics like Data Structures,
Algorithms and many more.
</p>
</div>
<div class="card-footer">
<a href="#" class="card-footer-item">
GeeksforGeeks
</a>
<a href="#" class="card-footer-item">
Practice
</a>
<a href="#" class="card-footer-item">
Courses
</a>
</div>
</div>
</div>
</body>
</html>
Producción:
Partes de la tarjeta Bulma
Referencia: https://bulma.io/documentation/components/card/#card-parts