Bulma - 媒体对象

上页
下一页

说明

Bulma 提供了媒体对象来构建各种类型的组件，例如博客评论、推文等，这些组件定义了一个左对齐或右对齐图像以及文本内容。

让我们通过在 article 标记中使用 media 类创建一个媒体对象元素的简单示例 −

实时演示 
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Media Object 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>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Media Object
            </span>
            <br>
            <br>
            
            <article class = "media">
               <figure class = "media-left">
                  <p class = "image is-64x64">
                     <img src = "https://tutorialspoint.com/bootstrap/images/64.jpg">
                  </p>
               </figure>
               <div class = "media-content">
                  <div class = "content">
                     <p>
                        <strong>Will Smith</strong> 
                        <small>@wsmith</small> 
                        <small>45m</small>
                        <br>
                        This is some sample text. This is some sample text. 
                        This is some sample text. This is some sample text. 
                        This is some sample text. This is some sample text. 
                        This is some sample text. This is some sample text.
                     </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>
            </article>
         </div>
      </section>
      
   </body>
</html>

执行以上代码，你会得到以下输出 −

嵌套媒体对象

你可以在深度不超过 3 级的另一个媒体对象中嵌套媒体对象。

以下简单示例描述了 嵌套媒体对象 元素的使用 −

实时演示 
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Media Object 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>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
         <span class = "title">
            Nested Media Object
         </span>
         <br>
         <br>
         
         <article class = "media">
            <figure class = "media-left">
               <p class = "image is-64x64">
                  <img src = "https://tutorialspoint.com/bootstrap/images/64.jpg">
               </p>
            </figure>
            <div class = "media-content">
               <div class = "content">
                  <p>
                     <strong>Will Smith</strong> <small>@wsmith</small> <small>45m</small>
                     <br>
                     This is some sample text. This is some sample text. This is some 
                     sample text. This is some sample text. This is some sample text. 
                     This is some sample text. This is some sample text. This is some 
                     sample text.
                  </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>
               
               <article class = "media">
                  <figure class = "media-left">
                     <p class = "image is-48x48">
                        <img src = "https://tutorialspoint.com/bootstrap/images/64.jpg">
                     </p>
                  </figure>
                  <div class = "media-content">
                     <div class = "content">
                        <p>
                           <strong>Tom Hanks</strong>
                           <br>
                           This is some sample text. This is some sample text. This is 
                           some sample text. This is some sample text. This is some 
                           sample text. This is some sample text. This is some sample 
                           text. This is some sample text.
                           <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://tutorialspoint.com/bootstrap/images/64.jpg">
                           </p>
                        </figure>
                        <div class = "media-content">
                           <div class = "content">
                              <p>
                                 <strong>Johnny Depp</strong>
                                 <br>
                                 This is some sample text. This is some sample text. 
                                 This is some sample text. This is some sample text. 
                                 This is some sample text. This is some sample text. 
                                 This is some sample text. This is some sample text.
                                 <br>
                                 <small><a>Like</a> . <a>Reply</a> . 5 hrs</small>
                              </p>
                           </div>
                        </div>
                     </article>
                     
                  </div>
               </article>
            </div>
         </article>
      </section>
      
   </body>
</html>

它显示了以下输出 −

bulma_layout.htm
打印页面
上页
下一页
广告