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 类来显示标题和副标题。此外，还有从
is-1 到
is-6 的 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>
执行上面的代码，你会得到下面的输出-
