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.
Tile en Bulma framework es una clase de un solo elemento con la ayuda de la cual podemos crear diseños bidimensionales o cuadrículas tipo metro, etc.
Habrá casos en los que tengamos que manipular nuestros mosaicos de cierta manera para lograr el resultado deseado. Esto se puede hacer usando los modificadores de mosaico. Aprendamos los modificadores de mosaicos y comprendamos cómo se pueden usar y qué manipulaciones pueden realizar en nuestros mosaicos.
El elemento mosaico tiene un total de 16 modificadores. Hay 3 modificadores contextuales, 1 modificador direccional y 12 modificadores de tamaño de las clases is-1 a is-12. Las clases se enumeran a continuación en el respectivo orden mencionado.
Clases de modificadores de Bulma Tiles:
- es-ancestro: Es el comienzo de la tesela. Este modificador envuelve otros mosaicos.
- is-parent: Es un modificador, que viene debajo del modificador is-ancestor .
- is-child: Es un modificador, que viene debajo del modificador is-parent .
- is-vertical: esta clase hace que el mosaico sea vertical.
- is-1: Es una clase de modificador de tamaño que comienza desde is-1 hasta is-12 class.
Sintaxis:
<div class="tile is-ancestor">
<div class="tile is-vertical is-2">
...
</div>
...
</div>
Ejemplo 1: echemos un vistazo a un programa que incluye los tres tipos de modificadores que se han discutido anteriormente.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale = 1">
<title>Bulma Tiles Example</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src="https://use.fontawesome.com/releases/v5.1.0/js/all.js">
</script>
<style>
body {
margin-left: 20px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="content" style="text-align:center;">
<h1 class="has-text-success">GeeksforGeeks</h1>
<strong>Tile Modifiers</strong>
</div>
<div class="container">
<div class="tile is-ancestor">
<div class="tile is-vertical is-3">
<div class="tile is-child notification
has-text-success has-background-dark">
<p class="title">This tile is Vertical</p>
<div class="content">
We are vertical!
</div>
<br>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child notification
has-text-success has-background-dark">
<p class="title">Middle Tile</p>
<div class="content">
We are middle!
</div>
<br>
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child notification
has-text-success has-background-dark">
<p class="title">Wide tile</p>
<div class="content">
We are wide!
</div>
<br>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: el siguiente código también demuestra las clases de modificadores de mosaico anteriores.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale = 1">
<title>Bulma Tiles Example</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src="https://use.fontawesome.com/releases/v5.1.0/js/all.js">
</script>
<style>
body {
margin-left: 20px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="content" style="text-align:center;">
<h2 class="has-text-success">GeeksforGeeks</h2>
<strong>Tile Modifiers</strong>
</div>
<div class="container">
<div class="tile is-ancestor">
<div class="tile is-4 is-vertical is-parent">
<div class="tile is-child box notification
has-background-dark has-text-success">
<p class="title">Tile 1</p>
<p>
CSS (Cascading Style Sheets) is a
stylesheet language used to design
the webpage to make it attractive.
</p>
</div>
<div class="tile is-child box notification
has-background-dark has-text-success">
<p class="title">Tile 2</p>
<p>
The reason for using this is to simplify the
process of making web pages presentable.
</p>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child box notification
has-background-dark has-text-success">
<p class="title">Tile 3</p>
<p>
More importantly, it enables you to do
this independent of the HTML that
makes up each web page.
</p>
<p>
It is the basic structure of HTML webpage
and we use CSS style inside webpage. In
a web page, we use internal CSS (i.e.
adding CSS code inside head tag of HTML
code).
</p>
<p>
It is the combination of Hypertext and
Markup language. Hypertext defines the
link between the web pages
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Referencia: https://bulma.io/documentation/layout/tiles/#modifiers
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA