Bulma - 卡片

描述

卡片元件將內容顯示在框中以獲得更好的外觀。它包括主容器內的以下內部元素 −

card − 這是主容器，包含所有元素。
card-header − 它表示水平欄。
card-header-title − 在此類中，文字左對齊，採用粗體字。
card-header-icon − 用於顯示標題圖示
card-image − 它指定用於建立響應式影像的全寬容器。
card-content − 用於顯示卡片內容。
card-footer − 使用包含控制元件水平列表的卡片頁尾定義。
card-footer-item − 在 card-footer 類中使用，並且具有可重複列表項。

以下示例展示瞭如何使用上述類來展示卡片 −

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Card</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script defer src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
      <script defer src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>

   <body>  
      <div class = "container">
         <h1 class = "is-size-2">Card</h1><br>
         <div class = "card">
            <div class = "card-image">
               <figure class = "image is-3by1">
                  <img src = "http://3.bp.blogspot.com/-B8jn4_pTmko/Vi3zmDIhnII/AAAAAAAACBY/5EEv6Ep_z6w/s1600/tutorialpoint.png" alt="Placeholder image">
               </figure>
            </div>
            <div class = "card-content">
               <div class = "media">
                  <div class = "media-left">
                     <figure class = "image is-48x48">
                        <img src = "https://lh3.ggpht.com/FnKKlX-4e6SZjODG0_9TMd5FZ7zuO_OOh7lbRgqB8DxWTZVUiALW6qh3YUT6xARYdZQ=w720-h310" alt="Placeholder image">
                     </figure>
                  </div>
                  <div class = "media-content">
                     <p class = "title is-4">Tutorialspoint</p>
                     <p class = "subtitle is-6">https://tutorialspoint.tw/</p>
                     <time datetime = "2016-1-1">11:09 PM - 1 Jan 2016</time>
                  </div>
               </div>          
            </div>
            
         </div>
      </div> 
      
   </body>
</html>

執行上述程式碼，您將獲得以下輸出 −

bulma_components.htm

列印頁面