Bulma - 內容

描述

Bulma 提供 content 類直接在頁面中使用 HTML 標記。

以下示例介紹如何使用不同型別的級別顯示內容 −

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Buttons 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">
               Buttons Content
            </span>
            <br>
            <br>
            
            <div class = "content">
               <h1>First Level</h1>
               <p>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 <sub>sample text</sub>. 
               This is some sample text.</p>
               
               <h2>Second Level</h2>
               <p>
                  <ul>
                     <li>This is some sample text. This is some sample text.</li>
                     <li>This is some sample text. This is some sample text.</li>
                  </ul>
                  
                  <h3>Third Level</h3>
               <p>
                  <ol>
                     <li>This is some sample text. This is some sample text.</li>
                     <li>This is some sample text. This is some sample text.</li>
                  </ol>
               </p>
               <h4>Fourth Level</h4>
               <blockquote>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 <sub>sample text</sub>. 
               This is some sample text.</blockquote>
               
               <h5>Fifth Level</h5>
               <p>This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.</p>
               <figure>
                  <img src = "https://tutorialspoint.tw/bootstrap/images/64.jpg">
                  <figcaption>
                     Figure 1: Placeholder for Image
                  </figcaption>
               </figure>
               
               <h6>Sixth level</h6>
               <table>
                  <thead>
                     <tr>
                        <th>Heading One</th>
                        <th>Heading Two</th>
                     </tr>
                  </thead>
                  <tbody>
                     <tr>
                        <td>Demo One</td>
                        <td>Demo Two</td>
                     </tr>
                     <tr>
                        <td>Demo Three</td>
                        <td>Demo Four</td>
                     </tr>
                  </tbody>
               </table>
            </div>
            
         </div>
      </section>
      
   </body>
</html>

執行以上程式碼結果如下所示 −

你可以透過在 .content 類中使用 is-small、is-medium 和 is-large 修飾符改變內容的字型大小。

bulma_elements.htm

列印頁面

上一個

下一個