En este artículo, aprenderemos cómo incluir variables de sección en la página web. Bulma es un framework CSS de código abierto desarrollado por Jeremy Thomas. Este marco se basa en la propiedad CSS Flexbox. Es altamente receptivo, minimizando el uso de consultas de medios para un comportamiento receptivo. Otra ventaja con Bulma es que simplemente necesita tener conocimientos de HTML y CSS para implementar este marco (aunque saber JavaScript puede ayudar a las funciones existentes según sus necesidades). Bulma también nos permite agregar nuestro propio estilo CSS, pero se recomienda usar una hoja de estilo externa sobre el estilo en línea.
¿Variable de héroe?
Bulma Hero es un componente esencial con la ayuda del cual podemos crear un banner de ancho completo en nuestra página web.
Sintaxis:
$variable-name: value of the variable;
Variable utilizada:
- $hero-body-padding: esta variable se usa para definir un relleno de 3 rem desde la parte superior y 1,5 rem desde el lado derecho.
- $hero-body-padding-tablet: esta variable se usa para definir el relleno de 3 rem desde la parte superior y 3 rem desde el lado derecho.
- $hero-body-padding-small: esta variable se usa para definir un relleno de 1,5 rem desde todos los lados.
- $hero-body-padding-medium: esta variable se usa para definir un relleno de 9 rem desde la parte superior y 4,5 rem desde el lado derecho.
- $hero-body-padding-large: esta variable se usa para definir un relleno de 18 rem desde la parte superior y 6 rem desde el lado derecho.
- $hero-colors: esta variable se utiliza para definir el color.
Ejemplo 1: en el siguiente código, usaremos la variable hero para diseñar la página web.
Código SCSS:
$hero-body-padding: 3rem 1.5rem;
$hero-colors: lightgreen;
.hero-head{
padding:$hero-body-padding;
color: $hero-colors;
}
Código CSS después de compilar el código SCSS:
.hero-head{
padding: 3rem 1.5rem;
color: lightgreen;
}
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">
<style>
.hero-head {
padding: 3rem 1.5rem;
color: lightgreen;
}
</style>
</head>
<body>
<center>
<h1 style="font-size: 40px; color:green; ">
GeeksforGeeks
</h1><br>
<section class="hero is-success is-fullheight">
<!-- Hero Head-->
<div class="hero-head">
<header class="navbar">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item">
GeeksforGeeks
</a>
<span class="navbar-burger"
data-target="navbarMenuHeroC">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navbarMenuHeroC" class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item is-active">
Home
</a>
<a class="navbar-item">
Practice
</a>
<a class="navbar-item">
DSA
</a>
<a class="navbar-item">
About Us
</a>
</div>
</div>
</div>
</header>
</div>
<!-- Hero content -->
<div class="hero-body">
<div class="container has-text-centered">
<p class="title">
Content
</p>
</div>
</div>
</section>
</center>
</body>
</html>
Producción:
Ejemplo 2: en el siguiente código, usaremos la variable hero para diseñar la página web.
Código SCSS (estilo.scss):
$hero-colors: lightgreen;
section{
background-color: $hero-colors;
}
Código CSS después de compilar el código SCSS (style.css):
section{
background-color: lightgreen;
}
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"> </head> <body> <center> <section> <div> <h1>GeeksforGeeks</h1> <h2>A computer science portal for geeks</h2> </div> </section> </center> </body> </html>
Producción:
Referencia: https://bulma.io/documentation/layout/hero/#variables
Publicación traducida automáticamente
Artículo escrito por abhishekpal97854368 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA