Azulejos de anidamiento de Bulma

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 sobre anidar mosaicos con la ayuda de Bulma CSS.

Mosaicos anidados: los mosaicos se utilizan para dividir la página web en varias partes de diferentes tamaños.

Clase utilizada:

  • title: Esta clase se utiliza para dividir la página web en diferentes tamaños.

Sintaxis:

<element-name class="title">...</element-name>

Ejemplo 1: en el siguiente código, haremos uso de la clase de título .

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>
        .tile {
            background-color: lightgreen;
            border: 2px solid green;
        }
  
        body {
            margin: 15px;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color:green;font-size:36px">
              GeeksforGeeks</h1><br>
          
        <div class="tile">GFG</div>
    </center>
</body>
  
</html>

Producción:

 

Ejemplo 2: en el siguiente código, haremos uso de la clase de título para segregar la página web en varias partes.

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>
        .columns {
            background-color: lightgreen;
            border: 2px solid green;
        }
  
        body {
            margin-left: 15px;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color:green;font-size:36px">
              GeeksforGeeks</h1><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 
                                        notification is-primary">
                            <p class="title">Header Tile</p>
  
                            <p class="subtitle">Navigation part</p>
  
                        </article>
                        <article class="tile is-child 
                                        notification is-warning">
                            <p class="title">Body</p>
  
                            <p class="subtitle">Content of the page</p>
  
                        </article>
                    </div>
                    <div class="tile is-parent">
                        <article class="tile is-child 
                                        notification is-info">
                            <p class="title">Content </p>
  
                            <p class="subtitle">With an image</p>
  
                            <div class="image is-4by3">
                                <img
                                    src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png">
                            </div>
                        </article>
                    </div>
                </div>
            </div>
        </div>
    </center>
</body>
  
</html>

Producción:

 

Referencia: https://bulma.io/documentation/layout/tiles/#modifiers

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *