Bulma es un framework 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 reservó espacio 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.
Sintaxis:
<figure class="image">
<img src= "path">
</figure>
Sintaxis:
$property-name: property-value;
Variable utilizada:
- $dimensions: Esta variable se utiliza para definir la dimensión de la imagen. Contiene un valor de tipo string y el valor predeterminado es
Ejemplo 1: en el siguiente código, utilizaremos la variable anterior para demostrar el uso de la imagen.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"> <link rel="stylesheet" href="style.css"> <title>Bulma Variable</title> </head> <body> <center> <h1 class="title"> GeeksforGeeks </h1> <h3 class="subtitle">A computer science portal for geeks</h3> <figure class="image is-5by3"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png" alt="GFG"> </figure> </center> </body> </html>
Código SCSS:
$dimensions: 250px;
.image{
width:$dimensions;
}
Código CSS compilado:
.image {
width:250px;
}
Producción:
Ejemplo 2: en el siguiente código, utilizaremos la variable anterior para demostrar el uso de la imagen.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Image Variable</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>
<link rel="stylesheet" href="style.css">
<style>
.title{
color:green;
}
</style>
</head>
<body>
<h1 class="title has-text-centered">
GeekforGeeks
</h1>
<h3 class="subtitle has-text-centered">
A computer science portal for geeks.
</h3><br>
<div class="box">
<div>
<figure class="image">
<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>
</body>
</html>
Código SCSS:
$dimensions: 150px;
.image{
max-width:$dimensions;
}
Código CSS compilado:
.image {
max-width: 150px;
}
Producción:
Referencia: https://bulma.io/documentation/elements/image/
Publicación traducida automáticamente
Artículo escrito por bhaluram18 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA