ブルマ-コンテンツ

説明

Bulmaは、ページでHTMLタグを直接使用する_content_クラスを提供します。

以下の例では、さまざまなタイプのレベルを使用してコンテンツを表示する方法について説明します-

<!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://www.finddevguides.com/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-content

ブルマ-コンテンツ

説明