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.
En este artículo, aprenderemos a anidar usando Bulma.
Anidamiento: el anidamiento significa que un elemento está encerrado dentro de otro elemento. Se utiliza para crear una interfaz de usuario interactiva.
Clases usadas:
- is-parent: esta clase se utiliza para crear un elemento principal fuera de la clase.
- is-child: esta clase se usa para crear un elemento de clase hijo dentro de la clase.
- is-ancestor: esta clase se usa para crear el mosaico principal del antepasado.
- is-vertical: esta clase se utiliza para crear el mosaico vertical.
Sintaxis:
<div class="is-ancestor">
...
</div>
Ejemplo 1: En el siguiente ejemplo, utilizaremos el elemento HTML <div> dentro del otro elemento <div>.
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">
<style>
body
{
margin-left:20px;
margin-right:20px;
}
</style>
</head>
<body>
<h1 style="color:green;font-size:36px">
GeeksforGeeks
</h1>
<strong>Bulma Nesting requirements</strong></br>
<div style="height:10px;"></div>
<div class="tile is-ancestor">
<div class="tile is-vertical is-8">
<div class="tile">
<div class="tile is-parent is-vertical">
<article class="tile is-child box">
This is child 1 of is-vertical class
</article>
<article class="tile is-child box">
This is child 2 of is-vertical class
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
This is child
</article>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: en el siguiente código, crearemos mosaicos anidados uno en otro mosaico utilizando las clases is-ancestor , is-parent y is-child de Bulma.
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">
<style>
body
{
margin-left:20px;
margin-right:20px;
}
</style>
</head>
<body>
<h1 style="color:green;font-size:36px">
GeeksforGeeks
</h1>
<strong>Bulma Nesting requirements</strong>
<br></br>
<div class="tile is-ancestor">
<div class="tile is-vertical is-8">
<div class="tile">
<div class="tile is-parent is-vertical">
<article class="tile is-child box is-dark">
Level 1 nesting
<article class="tile is-child box is-dark">
Level 2 nesting
<article class="tile is-child box is-dark">
Level 3 nesting
</article>
</article>
</article>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Referencia: https://bulma.io/documentation/layout/tiles/#nesting-requirements
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