عنوان و زیر عنوان

عناوین ساده برای عناوین ساده برای افزودن عمق به صفحه خود

رنگ ندارد
سایز دارد
متغیر ندارد

2 نوع عنوان وجود دارد:

  • عنوان
  • زیر عنوان

عنوان

زیرنویس


<h1 class="title">عنوان</h1>
<h2 class="subtitle">زیرنویس</h2>
                    

اندازه #

6 اندازه مختلف وجود دارد:

عنوان 1

عنوان 2

عنوان 3 (سایز پیش فرض)

عنوان 4

عنوان 5

عنوان 6


<h1 class="title is-1">عنوان 1</h1>
<h2 class="title is-2">عنوان 2</h2>
<h3 class="title is-3">عنوان 3</h3>
<h4 class="title is-4">عنوان 4</h4>
<h5 class="title is-5">عنوان 5</h5>
<h6 class="title is-6">عنوان 6</h6>
                    

زیرنویس 1

زیرنویس 2

زیرنویس 3

زیرنویس 4

زیرنویس 5 (اندازه پیش فرض)

زیرنویس 6


<h1 class="subtitle is-1">زیرنویس 1</h1>
<h2 class="subtitle is-2">زیرنویس 2</h2>
<h3 class="subtitle is-3">زیرنویس 3</h3>
<h4 class="subtitle is-4">زیرنویس 4</h4>
<h5 class="subtitle is-5">زیرنویس 5</h5>
<h6 class="subtitle is-6">زیرنویس6</h6>
                    

وقتی عنوان و زیرنویس را با یکدیگر ترکیب می کنید، آنها به هم نزدیکتر می شوند.

به عنوان یک قانون کلی ، توصیه می شود از اختلاف اندازه دو استفاده کنید. بنابراین اگر از عنوان is-1 استفاده می کنید ، آن را با زیرنویس -3 ترکیب کنید.

عنوان 1

زیرنویس 3

عنوان 2

زیرنویس 4

عنوان 3

زیرنویس 5


<p class="title is-1">عنوان 1</p>
<p class="subtitle is-3">زیرنویس 3</p>

<p class="title is-2">عنوان 2</p>
<p class="subtitle is-4">زیرنویس 4</p>

<p class="title is-3">عنوان 3</p>
<p class="subtitle is-5">زیرنویس 5</p>
                    

جدید!

اگر از کلاس اصلاح کننده is-spaced در عنصر اول استفاده کنید ، می توانید فاصله طبیعی بین عنوان و زیرنویس را حفظ کنید.

عنوان 1

زیرنویس 3

عنوان 2

زیرنویس 4

عنوان 3

زیرنویس 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>
                    

متغیرها #

برای شخصی سازی این کامپوننت می توانید از این متغیرها استفاده کنید. قبل از وارد کردن Bulma یک یا چند متغیر مورد از متغیر هارا به سادگی تنظیم کنید.یاد بگیرید چگونه.

نام نوع مقدار پیش فرض مقدار ماسبه شده
نام نوع مقدار پیش فرض مقدار ماسبه شده
$title-color color $text-strong hsl(0, 0%, 21%)
$title-family boolean false
$title-size size $size-3 2rem
$title-weight font-weight $weight-semibold 600
$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 color $text hsl(0, 0%, 29%)
$subtitle-family boolean false
$subtitle-size size $size-5 1.25rem
$subtitle-weight font-weight $weight-normal 400
$subtitle-line-height unitless 1.25
$subtitle-strong-color color $text-strong hsl(0, 0%, 21%)
$subtitle-strong-weight font-weight $weight-semibold 600
$subtitle-negative-margin size -1.25rem