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.
La clase de imagen es una especie de contenedor, ya que las imágenes tardaron unos minutos en cargarse, un contenedor de imagen es un espacio reservado para esa imagen para que el diseño del sitio web no se rompa mientras se carga la imagen o incluso con errores de imagen.
Ejemplo 1: Este ejemplo usando Bulma para mostrar la imagen.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Image</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<!-- custom css -->
<style>
div.columns {
margin-top: 20px;
}
h1 {
margin-top: 10px;
margin-bottom: 20px;
color: green !important
}
p {
font-family: calibri;
font-size: 16px;
text-align: justify;
}
div p {
margin-top: 10px;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-6'>
<div>
<h1 class='title has-text-centered'>
Display image
</h1>
</div>
<div class='box'>
<div>
<figure class="image is-5by3">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200617121258/gfg-image2.png">
</figure>
</div>
<div>
<p>
A computer is a machine that can be
instructed to carry out sequences
of arithmetic or logical operations
automatically via computer
programming. Modern computers have
the ability to follow generalized
sets of operations, called programs.
These programs enable computers to
perform an extremely wide range of
tasks.
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo usa Bulma para mostrar un error de carga o un error de imagen.
<html>
<head>
<title>Bulma Image</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<!-- custom css -->
<style>
div.columns {
margin-top: 20px;
}
h1 {
margin-top: 10px;
margin-bottom: 20px;
color: green !important
}
p {
font-family: calibri;
font-size: 16px;
text-align: justify;
}
div p {
margin-top: 10px;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-6'>
<div>
<h1 class='title has-text-centered'>
Image Error
</h1>
</div>
<div class='box'>
<div>
<figure class="image is-5by3">
<!-- image url does not exist -->
<img src="https://false/image">
</figure>
</div>
<div>
<p>
A computer is a machine that can be
instructed to carry out sequences
of arithmetic or logical operations
automatically via computer programming.
Modern computers have the ability to
follow generalized sets of operations,
called programs. These programs enable
computers to perform an extremely wide
range of tasks.
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Explicación: la clase de imagen de Bulma actúa como un contenedor que reserva espacio para la imagen para que el diseño del sitio web no se rompa incluso cuando se produce un error de imagen. Aquí proporcionamos una URL de imagen falsa, pero a pesar de eso, el espacio está reservado para que se cargue la imagen.
Ejemplo 3: este ejemplo usa Bulma para crear una imagen redondeada.
<html>
<head>
<title>Bulma Image</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<!-- custom css -->
<style>
div.columns {
margin-top: 80px;
}
.buttons {
margin-top: 15px;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="box">
<article class="media">
<div class="media-left">
<figure class="image is-128x128">
<img class='is-rounded'
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200617121759/bill-gates.jpg">
</figure>
</div>
<div class="media-content">
<div class="content">
<p>
<strong>Bill Gates</strong>
<small>@BillGates</small>
<small>36m</small>
<br>
The horrifying killings of
George Floyd, Ahmaud Arbery,
Breonna Taylor and far too
many other Black people—and
the protests they sparked—are
shining a light on the brutal
injustices that Black people
experience every day...
</p>
</div>
<nav class="level is-mobile">
<div class="level-left">
<a class="level-item">
<span class="icon is-small">
<i class="fas fa-reply"></i>
</span>
</a>
<a class="level-item">
<span class="icon is-small">
<i class="fas fa-retweet"></i>
</span>
</a>
<a class="level-item">
<span class="icon is-small">
<i class="fas fa-heart"></i>
</span>
</a>
</div>
</nav>
</div>
</article>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 4: Este ejemplo usa Bulma para crear diferentes tamaños de imágenes.
<html>
<head>
<title>Bulma Image</title>
<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-size: 20px
}
th {
font-size: 20px;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-6'>
<div class="box">
<table class='table is-fullwidth'>
<thead>
<tr>
<th>Size</th>
<th>Image</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>24x24px</p>
</td>
<td>
<figure class='image is-24x24'>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200617121933/24x241.png">
</figure>
</td>
</tr>
<tr>
<td>
<p>32x32px</p>
</td>
<td>
<figure class='image is-32x32'>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200617122005/32x32.png">
</figure>
</td>
</tr>
<tr>
<td>
<p>48x48px</p>
</td>
<td>
<figure class='image is-48x48'>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200617122245/48x48.png">
</figure>
</td>
</tr>
<tr>
<td>
<p>64x64px</p>
</td>
<td>
<figure class='image is-64x64'>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200617122039/64x64.png">
</figure>
</td>
</tr>
<tr>
<td>
<p>96x96px</p>
</td>
<td>
<figure class='image is-96x96'>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200617122433/96x96.png">
</figure>
</td>
</tr>
<tr>
<td>
<p>128x128px</p>
</td>
<td>
<figure class='image is-128x128'>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200617122510/128x128.png">
</figure>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 5: este ejemplo usa Bulma para crear una imagen receptiva con relación de aspecto.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Image</title>
<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-size: 20px
}
th {
font-size: 20px;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-6'>
<div class="box">
<table class='table is-fullwidth'>
<thead>
<tr>
<th>Size</th>
<th>Image</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>1by1</p>
</td>
<td>
<figure class='image is-1by1'>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200617121258/gfg-image2.png">
</figure>
</td>
</tr>
<tr>
<td>
<p>5by4</p>
</td>
<td>
<figure class='image is-5by4'>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200617121258/gfg-image2.png">
</figure>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 6: este ejemplo usa Bulma para crear una imagen receptiva con relación de aspecto.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Image</title>
<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-size: 20px
}
th {
font-size: 20px;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-6'>
<div class="box">
<table class='table is-fullwidth'>
<thead>
<tr>
<th>Size</th>
<th>Image</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>4by3</p>
</td>
<td>
<figure class='image is-4by3'>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200617121258/gfg-image2.png">
</figure>
</td>
</tr>
<tr>
<td>
<p>3by2</p>
</td>
<td>
<figure class='image is-3by2'>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200617121258/gfg-image2.png">
</figure>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 7: este ejemplo usa Bulma para crear una imagen receptiva con relación de aspecto.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Image</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns {
margin-top: 5px;
}
p {
font-size: 20px
}
th {
font-size: 20px;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-6'>
<div class="box">
<table class='table is-fullwidth'>
<thead>
<tr>
<th>Size</th>
<th>Image</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>5by3</p>
</td>
<td>
<figure class='image is-5by3'>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200617121258/gfg-image2.png">
</figure>
</td>
</tr>
<tr>
<td>
<p>16by9</p>
</td>
<td>
<figure class='image is-16by9'>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200617121258/gfg-image2.png">
</figure>
</td>
</tr>
<tr>
<td>
<p>2by1</p>
</td>
<td>
<figure class='image is-2by1'>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200617121258/gfg-image2.png">
</figure>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Nota: Aquí, en todos los ejemplos anteriores, usamos algunas clases adicionales de Bulma como contenedor, columna, título, tabla, etc. para diseñar bien el contenido.
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