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.
El elemento de caja es simplemente un contenedor con una sombra, un borde, un radio y algo de relleno. Podemos usar esto en muchos lugares en el diseño de nuestro proyecto. Da un aspecto interactivo a nuestro proyecto.
Variables:
| Nombre | Descripción | Escribe | Valor | Valor calculado | Tipo calculado |
|---|---|---|---|---|---|
| $box-color | Se utiliza para dar color a la caja. | variable | $texto | hsl(0, 0%, 29%) | color |
| $caja-color-de-fondo | Se utiliza para proporcionar color de fondo a la caja. | variable | $esquema-principal | hsl(0, 0%, 100%) | color |
| $box-radio | Se utiliza para definir el radio de la caja. | variable | $radio-grande | 6 píxeles | Talla |
| $caja-sombra | Se utiliza para definir la sombra de la caja. | variable | $sombra | 0 0.5em 1em -0.125em rgba($esquema-invertir, 0.1), 0 0px 0 1px rgba($esquema-invertir, 0.02) | sombra |
| $box-relleno | Se utiliza para definir el relleno alrededor de la caja. | Talla | 1,25 rem | ||
| $box-link-hover-shadow | Se utiliza para proporcionar la sombra en el efecto de desplazamiento. | sombra | 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $enlace. | ||
| $box-link-active-shadow | Se utiliza para proporcionar sombras a los enlaces activos en el cuadro. | sombra | recuadro 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $enlace |
Ejemplo 1: este ejemplo crea un contenedor de caja usando Bulma y luego modifica la caja usando las variables.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <title>Hello Bulma!</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"> <link rel="stylesheet" href="style.css"> <!-- font-awesome cdn --> <script src= 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'> </script> </head> <body> <center> <h1 class="title has-text-centered has-text-success"> GeeksforGeeks </h1> <h3 class="subtitle has-text-centered"> A computer science portal for geeks. </h3> <div class='container'> <div class='columns is-mobile is-centered'> <div class='column is-5'> <div class='box'> <h1 class='title'> Geek for Geeks </h1> <p class='is-family-monospace'> 'GeeksforGeeks' is a computer science portal for geeks. </p> <div class='buttons'> <button class='button is-fullwidth'> Read more... </button> </div> </div> </div> </div> </div> </center> </body> </html>
Código SCSS:
$box-color:green;
.box{
color:$box-color;
}
Código CSS compilado:
.box {
color: green;
}
Producción:
Ejemplo 2: este ejemplo crea un contenedor de caja usando Bulma y luego modifica la caja usando las variables.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<link rel="stylesheet" href="style.css">
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<style>
.box {
background-color: green;
}
</style>
</head>
<body>
<center>
<h1 class="title has-text-centered has-text-success">
GeeksforGeeks
</h1>
<h3 class="subtitle has-text-centered">
A computer science portal for geeks.
</h3>
<div class='container'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class='box'>
<h1 class='title'>
Geek for Geeks
</h1>
<p class='is-family-monospace'>
'GeeksforGeeks' is a computer
science portal for geeks.
</p>
<div class='buttons'>
<button class='button is-fullwidth'>
Read more...
</button>
</div>
</div>
</div>
</div>
</div>
</center>
</body>
</html>
Código SCSS:
$box-background-color:green;
.box{
background-color:$box-background-color;
}
Código CSS compilado:
.box {
background-color: green;
}
Producción:
Referencia: https://bulma.io/documentation/elements/box/
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA