-
.title -
.subtitle
文档
当你使用 Bulma 创建一个网站 所需要的一切
.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>当你将标题和副标题 结合使用 时,他们会靠得更近。
一些经验之谈,建议 两者 使用不同大小,可以 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>| Name | Default value |
|---|---|
| Name | Default value |
$title-color
|
$grey-darker
|
$title-size
|
$size-3
|
$title-weight
|
$weight-semibold
|
$title-strong-color
|
inherit
|
$title-strong-weight
|
inherit
|
$subtitle-color
|
$grey-dark
|
$subtitle-size
|
$size-5
|
$subtitle-weight
|
$weight-normal
|
$subtitle-strong-color
|
$grey-darker
|
$subtitle-strong-weight
|
$weight-semibold
|
这是一个 开源项目.
错别字? Or 有疑问?
在GitHub上改进这个页面。
Bulma Partners
Check out their products!