Bulma - Content 内容
描述
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://www.tutorialspoint.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.html
