Bulma | Objeto multimedia

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

Deja una respuesta

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