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://www.lidihuo.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>
执行上面的代码，你会得到下面的输出-
您可以使用
is-small、
is-medium 和
is-large 修饰符来更改内容的字体大小i>.content 类。
