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