标题和副标题(Title and Subtitle)

简单的标题可以增加页面的深度

标题分两种:

  • title标题
  • subtitle副标题
<h1 class="title">Title</h1>
  <h2 class="subtitle">Subtitle</h2>

1.大小

标题大小有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.主副标题搭配

当你把一个标题和一个副标题结合在一起时,它们会移得更近。

根据经验,建议使用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>

3.间距

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>

4.变量

Name
Type
Value
Computed Value
Computed Type
$title-color
variable
$text-strong
hsl(0, 0%, 21%)
color
$title-family
boolean
false
$title-size
variable
$size-3
2rem
size
$title-weight
variable
$weight-semibold
600
font-weight
$title-line-height
unitless
1.125
$title-strong-color
string
inherit
$title-strong-weight
string
inherit
$title-sub-size
size
0.75em
$title-sup-size
size
0.75em
$subtitle-color
variable
$text
hsl(0, 0%, 29%)
color
$subtitle-family
boolean
false
$subtitle-size
variable
$size-5
1.25rem
size
$subtitle-weight
variable
$weight-normal
400
font-weight
$subtitle-line-height
unitless
1.25
$subtitle-strong-color
variable
$text-strong
hsl(0, 0%, 21%)
color
$subtitle-strong-weight
variable
$weight-semibold
600
font-weight
$subtitle-negative-margin
size
-1.25rem

返回头部

问题反馈
返回顶部