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. El famoso objeto mediático que prevalece en las interfaces de las redes sociales, pero es útil en cualquier contexto.
Ejemplo 1: Este ejemplo ilustra una interfaz de redes sociales simple usando el objeto de medios de bulma.
<html>
<head>
<title>Bulma Media Object</title>
<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>
<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</strong>
<small>@GfG</small> <small>39m</small>
<br>
Prior knowledge of DS and Algo:
If you are already well versed with the
basic data structures like Arrays,
Linked Lists etc. and some of the basic
algorithms like Sorting, Searching etc.
then you will comparatively take much
less time than a complete newbie
as you already know the basics.
</p>
</div>
<nav class="level is-mobile">
<div class="level-left">
<a class="level-item">
<span class="icon is-small">
<i class="fas fa-reply"></i></span>
</a>
<a class="level-item">
<span class="icon is-small">
<i class="fas fa-retweet"></i></span>
</a>
<a class="level-item">
<span class="icon is-small">
<i class="fas fa-heart"></i></span>
</a>
</div>
</nav>
</div>
<div class="media-right">
<button class="delete"></button>
</div>
</article>
</div>
</body>
</html>
Producción:
Ejemplo 2: podemos incluir cualquier elemento de Bulma como entrada, botones, íconos, área de texto, etc. En este ejemplo, incluimos el elemento de área de texto dentro del objeto multimedia de Bulma para ilustrar cómo funcionan juntos.
<html>
<head>
<title>Bulma Media Object</title>
<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>
<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="field">
<p class="control">
<textarea class="textarea"
placeholder="Ask your query...">
</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:
Textarea en objeto multimedia
Ejemplo 3: Este ejemplo ilustra objetos multimedia anidados.
<html>
<head>
<title>Bulma Media Object</title>
<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>
<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>Barbara Middleton</strong>
<br>
Prior knowledge of DS and Algo:
If you are already well versed with the basic data
structures like Arrays, Linked Lists etc.
and some of the basic algorithms
like Sorting, Searching etc.
then you will comparatively take much less
time than a complete newbie
as you already know the basics.
<br>
<small><a>Like</a> · <a>Reply</a> · 3 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/20200819154857/
7pitvZTX400x400-300x300.jpg">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>Sean Brown</strong>
<br>
Computer scientists learn by experience.
We learn by seeing others solve problems
and by solving problems by ourselves.
... By considering a number of different
algorithms, we can begin to develop
pattern recognition so that
the next time a similar problem
arises, we are better able to solve it.
<br>
<small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
</p>
</div>
<article class="media">
Not everyone has spent too much time on Data Structures.
One should not feel superior if they know data structure well.
</article>
<article class="media">
The concept of an abstract data type
might be hard for some people to grasp,
but it's really not that difficult.
</article>
</div>
</article>
<article class="media">
<figure class="media-left">
<p class="image is-48x48">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200819154907
/Z0pcI00C400x400-300x300.jpg">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>Kayli Eunice </strong>
<br>
If you are able to understand
algorithms you're doing good. ...
By memorizing the algorithm you will always
be quicker on simple plug and use
situations regarding this algorithm,
people usually acquire this after solving
the same problem hundreds of times
but yes you can simply memorize the algorithm.
<br>
<small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
</p>
</div>
</div>
</article>
</div>
</article>
</div>
</body>
</html>
Producción:
Objeto multimedia anidado
Publicación traducida automáticamente
Artículo escrito por hunter__js y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA