New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →

Titles

用来增加页面深度的简单 标题

Colors No
Sizes Yes
Variables Yes

2种类型 的标题:
  • .title
  • .subtitle

Title

Subtitle

<h1 class="title">Title</h1>
<h2 class="subtitle">Subtitle</h2>

Sizes | 尺寸 #

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-1subtitle 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>

Variables | 变量 #

你可以使用 这些变量自定义 这些 element。只需要在导入 Bulma 之前设置这些变量 学习如何开始.

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

Made with Bulma
这是一个 开源项目. 错别字? Or 有疑问? 在GitHub上改进这个页面。

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!