Bulma es un marco CSS gratuito y de código abierto basado en Flexbox. Es rico en componentes, compatible y bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño.
Bulma Media Object es un componente que es muy relevante para usar en una interfaz de redes sociales como parte de la sección de comentarios comunes. Pero esto es extremadamente útil también en el comercio electrónico, así como en los sitios web de blogs y en el propio sitio web GeeksforGeeks . El anidamiento también es una parte integral del uso del objeto de medios como la sección de comentarios porque el anidamiento nos ayuda a agregar y mostrar la parte de la interfaz de usuario de responder a un comentario.
Clases de objetos de medios de anidamiento de Bulma:
- multimedia: esta clase se agrega al contenedor de objetos multimedia .
- media-left: esta clase se utiliza para agregar una imagen, icono o texto a la izquierda del contenido del objeto multimedia.
- contenido multimedia: esta clase se agrega al contenedor de contenido al contenido multimedia.
- contenido: esta clase se utiliza para especificar el contenido del objeto multimedia.
- campo: esta clase se utiliza para agregar un campo/área de texto al objeto multimedia.
Sintaxis:
<article class="media">
<figure class="media-left">
<p>
...
</p>
</figure>
<div class="media-content">
<div class="content">
<p>
...
</p>
</div>
</div>
</article>
Ejemplo 1: El siguiente código demuestra el anidamiento de objetos de medios utilizando las clases dadas anteriormente.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css">
<!-- custom css -->
<style>
div.adjust {
margin-top: 50px;
}
</style>
</head>
<body>
<center>
<h1 style="color: green; font-size: 2.5rem;">
GeeksforGeeks
</h1>
<h3 style="font-size: 1.5rem;">
Bulma Nesting Media Object
</h3>
</center>
<div class='container adjust'>
<article class="media">
<figure class="media-left">
<p class="image is-64x64">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200819145636/icon.png">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>GeeksforGeeks Team</strong>
<br>
Initial understanding of DS and Algo:
If you are already familiar with some
of the fundamental data structures,
such as arrays and linked lists, as
well as some of the fundamental algorithms,
such as sorting and searching, you will,
on average, finish the task faster than
a total novice.
<br>
<small><a>Like</a> · <a>Reply</a>
· 13 hrs</small>
</p>
</div>
<article class="media">
<figure class="media-left">
<p class="image is-48x48">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220629143017/avatar.png">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>John Doe</strong>
<br>
By doing, computer scientists gain
knowledge. We gain knowledge from
both seeing others solve challenges
and from solving our own problems.
We can start to build pattern
recognition so that the next time a
similar issue comes, we are better
able to handle it by taking into
account a variety of alternative
techniques.
<br>
<small><a>Like</a> · <a>Reply</a>
· 14 hrs</small>
</p>
</div>
<article class="media">
Not everybody has devoted a lot of
effort to studying data structures.
If one is knowledgeable with data
structures, they shouldn't feel superior.
</article>
</div>
</article>
<article class="media">
<figure class="media-left">
<p class="image is-48x48">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220629143016/avatar1.png">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>Jane Doe</strong>
<br>
You're doing well if you can comprehend
algorithms. People typically gain this
after solving the same problem hundreds
of times, but yes, you may simply memorise
the method. By memorising the algorithm, you
will always be quicker in simple plug-and-use
circumstances relating this algorithm.
<br>
<small><a>Like</a> · <a>Reply</a>
· 17 hrs</small>
</p>
</div>
</div>
</article>
</div>
</article>
</div>
</body>
</html>
Producción:
Ejemplo 2: El siguiente código demuestra el anidamiento de objetos multimedia utilizando las clases anteriores y agregando un área de texto vacía para agregar otro comentario.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css">
<!-- custom css -->
<style>
div.adjust {
margin-top: 50px;
}
</style>
</head>
<body>
<center>
<h1 style="color: green; font-size: 2.5rem;">
GeeksforGeeks
</h1>
<h3 style="font-size: 1.5rem;">
Bulma Nesting Media Object
</h3>
</center>
<div class='container adjust'>
<article class="media">
<figure class="media-left">
<p class="image is-64x64">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200819145636/icon.png">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>GeeksforGeeks Team</strong>
<br>
Initial understanding of DS and Algo:
If you are already familiar with some
of the fundamental data structures,
such as arrays and linked lists, as
well as some of the fundamental algorithms,
such as sorting and searching, you will,
on average, finish the task faster than
a total novice.
<br>
<small><a>Like</a> · <a>Reply</a>
· 13 hrs</small>
</p>
</div>
<article class="media">
<figure class="media-left">
<p class="image is-48x48">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220629143017/avatar.png">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>John Doe</strong>
<br>
By doing, computer scientists gain knowledge.
We gain knowledge from both seeing others solve
challenges and from solving our own problems. We can
start to build pattern recognition so that the
next time a similar issue comes, we are better able
to handle it by taking into account a variety of
alternative techniques.
<br>
<small><a>Like</a> · <a>Reply</a> · 14 hrs</small>
</p>
</div>
<article class="media">
Not everybody has devoted a lot of effort to
studying data structures. If one is knowledgeable
with data structures, they shouldn't feel superior.
</article>
</div>
</article>
</div>
</article>
<article class="media">
<figure class="media-left">
<p class="image is-64x64">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200819145636/icon.png">
</p>
</figure>
<div class="media-content">
<div class="field">
<p class="control">
<textarea class="textarea"
placeholder="Add your comment.">
</textarea>
</p>
</div>
<nav class="level">
<div class="level-left">
<div class="level-item">
<a class="button is-info">Submit</a>
</div>
</div>
</nav>
</div>
</article>
</div>
</body>
</html>
Producción:
Referencia: https://bulma.io/documentation/layout/media-object/#nesting
Publicación traducida automáticamente
Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA