Bulma - 标签和标题
说明
Bulma 提供称为标签的小标签来显示附加信息。您需要添加 tag 类，才能在页面中插入标签标签。
以下示例描述了如何显示标签标签、使用颜色修饰符(例如 is-black、is-dark、is-light、is-white、is-primary、is-link、is-info、is-success、is-warning、is-danger)显示不同类型的颜色，以及页面元素的标签标签大小(使用 is-medium 和 is-large 等类) −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements 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">
Tags
</span>
<br>
<br>
<span class = "is-size-5">
Basic Tag
</span>
<br>
<span class = "tag">
Simple Tag
</span>
<br>
<br>
<span class = "is-size-5">
Tag Colors
</span>
<br>
<span class = "tag is-black">Black</span>
<span class = "tag is-dark">Dark</span>
<span class = "tag is-light">Light</span>
<span class = "tag is-white">White</span>
<br>
<br>
<span class = "tag is-primary">Primary</span>
<span class = "tag is-link">Link</span>
<span class = "tag is-info">Info</span>
<span class = "tag is-success">Success</span>
<span class = "tag is-warning">Warning</span>
<span class = "tag is-danger">Danger</span>
<br>
<br>
<span class = "is-size-5">Tag Sizes</span><br>
<span class = "tag is-primary is-medium">Medium</span>
<span class = "tag is-info is-large">Large</span>
<br>
<br>
</div>
</section>
</body>
</html>
执行上述代码，您将得到以下输出 −
标签列表和颜色组合
Bulma 允许在容器中使用 tags 类创建标签列表，并以不同类型的颜色显示标签。
让我们创建一个简单的示例，在页面中显示标签列表(使用 tags 类)和颜色组合(使用上述颜色修饰符)−
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements 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">
Tags
</span>
<br>
<br>
<span class = "is-size-5">
List of tags
</span>
<br>
<br>
<div class = "tags">
<span class = "tag">India</span>
<span class = "tag">Srilanka</span>
<span class = "tag">England</span>
<span class = "tag">Australia</span>
<span class = "tag">Spain</span>
<span class = "tag">Russia</span>
<span class = "tag">South Africa</span>
<span class = "tag">Ireland</span>
<span class = "tag">Zimbabwe</span>
</div>
<span class = "is-size-5">
Tags with Delete and Color Combinations
</span>
<br>
<br>
<div class = "tags has-addons">
<span class = "tag is-success">India</span>
<a class = "tag is-delete"></a>
</div>
<div class = "tags has-addons">
<span class = "tag is-warning">Srilanka</span>
<a class = "tag is-delete"></a>
</div>
<div class = "tags has-addons">
<span class = "tag is-danger">Srilanka</span>
<a class = "tag is-delete"></a>
</div>
</div>
</section>
</body>
</html>
上述代码将显示以下输出 −
标题和副标题
您可以使用元素中的 .title 和 .subtitle 类来显示标题和副标题。此外，还有 6 种尺寸类型，从 is-1 到 is-6，用于在页面中显示标题和副标题。
以下示例演示了如何在页面中使用 .title 和 .subtitle 类以及尺寸 −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements 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 = "is-size-3">Title and Subtitle</span>
<br>
<h1 class = "title">Tutorialspoint (title)</h1>
<h2 class = "subtitle">easy way for learning online (subtitle)</h2>
<span class = "is-size-3">Sizes of Title and Subtitle</span>
<br>
<h1 class = "title is-1">Tutorialspoint (is-1)</h1>
<h1 class = "subtitle is-1">easy way for learning online</h1>
<br>
<h2 class = "title is-2">Tutorialspoint (is-2)</h2>
<h2 class = "subtitle is-2">easy way for learning online</h2>
<br>
<h3 class = "title is-3">Tutorialspoint (is-3)</h3>
<h3 class = "subtitle is-3">easy way for learning online</h3>
<br>
<h4 class = "title is-4">Tutorialspoint (is-4)</h4>
<h4 class = "subtitle is-4">easy way for learning online</h4>
<br>
<h5 class = "title is-5">Tutorialspoint (is-5)</h5>
<h5 class = "subtitle is-5">easy way for learning online</h5>
<br>
<h6 class = "title is-6">Tutorialspoint (is-6)</h6>
<h6 class = "subtitle is-6">easy way for learning online</h6>
</div>
</section>
</body>
</html>
执行上述代码，您将得到以下输出 −
bulma_elements.html
