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.tw/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.tw/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.tw/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.tw/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
列印頁面
上頁
下一頁
廣告
© . All rights reserved.