Bulma es un marco CSS gratuito y de código abierto basado en Flexbox. Es rico en componentes, compatible y bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño.
Una tarjeta es un componente flexible que se puede componer del contenido necesario. Incluye varios otros componentes que tenemos que agregar exclusivamente para diseñar bien nuestro contenido. Estos componentes se enumeran a continuación:
- card-header: Es un componente tipo caja horizontal con una sombra.
- card-header-title: Está alineado a la izquierda y en negrita, que se utiliza para representar el encabezado de la tarjeta.
- card-header-icon: Es un marcador de posición para el icono que se agrega a la parte del encabezado de la tarjeta.
- card-image: Es un contenedor para incluir una imagen responsiva.
- card-content: Es un contenedor donde se puede insertar cualquier elemento como párrafos, íconos, botones o imágenes.
- pie de página: Es un contenedor utilizado para almacenar los elementos de pie de página de la tarjeta.
- card-footer-item: Reservó espacios para la lista de elementos de pie de página.
Ejemplo 1: Este ejemplo representa cómo crear una tarjeta simple usando Bulma.
html
<!DOCTYPE html>
<html>
<head>
<title>Bulma Card</title>
<!-- Include Bulma CSS -->
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- Custom CSS -->
<style>
div.columns {
margin-top: 80px;
}
p {
font-family: calibri;
font-size: 20px;
}
p.has-text-danger {
margin-left: 95px;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="card">
<div class="card-content">
<p class='is-success'>
GeeksforGeeks' is a computer
science portal.it was created
with a goal in mind to provide
well written, well thought and
well explained solutions for
selected questions. The core
team of five super geeks
constituting of technology lovers
and computer science enthusiasts
have been constantly working
in this direction .
</p>
<p class='has-text-danger'>
___A computer science portal for geeks
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo crea una tarjeta con encabezado usando Bulma.
html
<!DOCTYPE html>
<html>
<head>
<title>Bulma Card</title>
<!-- Include Bulma CSS -->
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- Custom CSS -->
<style>
div.columns {
margin-top: 80px;
}
p {
font-family: calibri;
font-size: 20px;
}
p.has-text-danger {
margin-left: 90px;
}
.card-header-title {
font-size: 20px;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="card">
<div class='card-header'>
<div class="card-header-title
has-text-success">
GeekforGeeks
</div>
</div>
<div class="card-content">
<p class='is-success'>
GeeksforGeeks' is a computer
science portal.it was created with
a goal in mind to provide well
written, well thought and
well explained solutions for
selected questions. The core team
of five super geeks constituting
of technology lovers and computer
science enthusiasts have been
constantly working in this
direction .
</p>
<p class='has-text-danger'>
___A computer science portal for geeks
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 3: Este ejemplo crea una tarjeta con encabezado y pie de página usando Bulma.
html
<!DOCTYPE html>
<html>
<head>
<title>Bulma Card</title>
<!-- Include Bulma CSS -->
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- Custom CSS -->
<style>
div.columns {
margin-top: 80px;
}
p {
font-family: calibri;
font-size: 20px;
}
.card-header-title {
font-size: 20px;
}
span {
margin-left: 95px;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="card">
<div class='card-header'>
<div class="card-header-title has-text-success">
GeekforGeeks
</div>
</div>
<div class="card-content">
<p class='is-success'>
GeeksforGeeks' is a computer
science portal.it was created with
a goal in mind to provide well
written, well thought and
well explained solutions for
selected questions. The core team
of five super geeks constituting
of technology lovers and
computer science enthusiasts have
been constantly working
in this direction .
</p>
</div>
<div>
<footer class="card-footer">
<p class='card-footer-item'>
<span class='has-text-danger'>
___A computer science portal for geeks
</span>
</p>
</footer>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 4: Este ejemplo crea una tarjeta con una imagen usando Bulma.
html
<!DOCTYPE html>
<html>
<head>
<title>Bulma Card</title>
<!-- Include Bulma CSS -->
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- Custom CSS -->
<style>
div.columns {
margin-top: 20px;
}
p {
font-family: calibri;
font-size: 20px;
}
.card-header-title {
font-size: 20px;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="card">
<div class="card-image">
<figure class="image is-2by1">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200611151025/gfg202.png"
alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img src=
"https://media.geeksforgeeks.org/wpcontent/uploads/20200611151025/gfg202.png"
alt="Placeholder image">
</figure>
</div>
<div class="media-content">
<p class="title is-5">
GeekforGeeks
</p>
<p class="subtitle is-6">
@geeksforgeeks
</p>
</div>
</div>
<div class='content'>
<div class="media-content">
<p class='is-success'>
GeeksforGeeks' is a computer
science portal.it was created with
a goal in mind to provide well
written, well thought and
well explained solutions for
selected questions. The core
team of five super geeks
constituting of technology
lovers and computer science
enthusiasts have been constantly
working in this direction .
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 5: Este ejemplo crea una tarjeta de color con una imagen usando Bulma.
html
<!DOCTYPE html>
<html>
<head>
<title>Bulma Card</title>
<!-- Include Bulma CSS -->
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- Custom CSS -->
<style>
div.columns {
margin-top: 80px;
}
p {
font-family: calibri;
font-size: 20px;
}
.card-header-title {
font-size: 20px;
}
</style>
</head>
<body>
<div class='container
has-text-centered'>
<div class='columns
is-mobile is-centered'>
<div class='column is-5'>
<div class="card
has-background-primary">
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200611151025/gfg202.png"
alt="Placeholder image">
</figure>
</div>
<div class="media-content">
<p class="title is-5">
GeekforGeeks
</p>
<p class="subtitle is-6">
@geeksforgeeks
</p>
</div>
</div>
<div class='content'>
<div class="media-content">
<p class='is-success'>
GeeksforGeeks' is a computer
science portal.it was created
with a goal in mind to provide
well written, well thought and
well explained solutions for
selected questions. The core team
of five super geeks constituting
of technology lovers and
computer science enthusiasts
have been constantly working
in this direction .
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por hunter__js y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA