有 2 种类型标题:
-
标题(title)
-
子标题(subtitle)
标题(Title)和子标题(Subtitle)
简单的标题可以为您的页面增加层次
有 2 种类型标题:
标题(title)
子标题(subtitle)
Title
Subtitle
<h1 class="title">Title</h1>
<h2 class="subtitle">Subtitle</h2>
有 6 种型号可选:
Title 1
Title 2
Title 3 (default size)
Title 4
Title 5
Title 6
<h1 class="title is-1">Title 1</h1>
<h2 class="title is-2">Title 2</h2>
<h3 class="title is-3">Title 3</h3>
<h4 class="title is-4">Title 4</h4>
<h5 class="title is-5">Title 5</h5>
<h6 class="title is-6">Title 6</h6>
Subtitle 1
Subtitle 2
Subtitle 3
Subtitle 4
Subtitle 5 (default size)
Subtitle 6
<h1 class="subtitle is-1">Subtitle 1</h1>
<h2 class="subtitle is-2">Subtitle 2</h2>
<h3 class="subtitle is-3">Subtitle 3</h3>
<h4 class="subtitle is-4">Subtitle 4</h4>
<h5 class="subtitle is-5">Subtitle 5</h5>
<h6 class="subtitle is-6">Subtitle 6</h6>
当您组合一个标题和一个字标题的时候,您会发现它们离的很近。
根据经验,推荐使用相差为 2 的型号。所以如果您使用一个 title is-1
,那么就要组合一个 subtitle is-3
。
Title 1
Subtitle 3
Title 2
Subtitle 4
Title 3
Subtitle 5
<p class="title is-1">Title 1</p>
<p class="subtitle is-3">Subtitle 3</p>
<p class="title is-2">Title 2</p>
<p class="subtitle is-4">Subtitle 4</p>
<p class="title is-3">Title 3</p>
<p class="subtitle is-5">Subtitle 5</p>
New!
您想是标题和子标题之间是正常的空间,可以在第一个元素——也就是标题上使用 is-spaced
修饰符。
Title 1
Subtitle 3
Title 2
Subtitle 4
Title 3
Subtitle 5
<p class="title is-1 is-spaced">Title 1</p>
<p class="subtitle is-3">Subtitle 3</p>
<p class="title is-2 is-spaced">Title 2</p>
<p class="subtitle is-4">Subtitle 4</p>
<p class="title is-3 is-spaced">Title 3</p>
<p class="subtitle is-5">Subtitle 5</p>
$title-color
$text-strong
hsl(0, 0%, 21%)
$title-family
false
$title-size
$size-3
2rem
$title-weight
$weight-semibold
600
$title-line-height
1.125
$title-strong-color
inherit
$title-strong-weight
inherit
$title-sub-size
0.75em
$title-sup-size
0.75em
$subtitle-color
$text
hsl(0, 0%, 29%)
$subtitle-family
false
$subtitle-size
$size-5
1.25rem
$subtitle-weight
$weight-normal
400
$subtitle-line-height
1.25
$subtitle-strong-color
$text-strong
hsl(0, 0%, 21%)
$subtitle-strong-weight
$weight-semibold
600
$subtitle-negative-margin
-1.25rem
此页面为开放源码页面。
发现排版问题?或者表达模糊?
在 GitHub 改进该页内容