in English

Tipografiya

Bootstrap tipografiyasi uchun hujjatlar va misollar, jumladan global sozlamalar, sarlavhalar, asosiy matn, roʻyxatlar va boshqalar.

Ushbu sahifada

Global sozlamalar

Bootstrap asosiy global displey, tipografiya va havola uslublarini o'rnatadi. Ko'proq nazorat kerak bo'lganda, matnli yordamchi dasturlar sinflarini tekshiring .

Har bir OS va qurilma uchun eng yaxshisini tanlaydigan mahalliy shrift to'plamidan foydalaning.font-family
Ko'proq qamrab oluvchi va foydalanish mumkin bo'lgan turdagi shkala uchun biz brauzerning standart ildizidan foydalanamiz font-size(odatda 16px), shuning uchun tashrif buyuruvchilar kerak bo'lganda o'zlarining brauzer sozlamalarini sozlashlari mumkin.
$font-family-base, $font-size-baseva $line-height-baseatributlaridan bizning tipografik bazamiz sifatida foydalaning <body>.
Global havola rangini orqali o'rnating $link-color.
( Sukut bo'yicha) ga $body-bgo'rnatish uchun foydalaning .background-color<body>#fff

Ushbu uslublar ichida topilishi mumkin _reboot.scssva global o'zgaruvchilar ichida aniqlanadi _variables.scss. O'rnatishga ishonch hosil $font-size-baseqiling rem.

Sarlavhalar

<h1>, orqali barcha HTML sarlavhalari <h6>mavjud.

Sarlavha	Misol
`<h1></h1>`	h1. Bootstrap sarlavhasi
`<h2></h2>`	h2. Bootstrap sarlavhasi
`<h3></h3>`	h3. Bootstrap sarlavhasi
`<h4></h4>`	h4. Bootstrap sarlavhasi
`<h5></h5>`	h5. Bootstrap sarlavhasi
`<h6></h6>`	h6. Bootstrap sarlavhasi

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

.h1orqali .h6sinflar ham mavjud, ular sarlavhaning shrift uslubiga mos kelishini xohlasangiz, lekin tegishli HTML elementidan foydalana olmasangiz.

h1. Bootstrap sarlavhasi

h2. Bootstrap sarlavhasi

h3. Bootstrap sarlavhasi

h4. Bootstrap sarlavhasi

h5. Bootstrap sarlavhasi

h6. Bootstrap sarlavhasi

html

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

Sarlavhalarni moslashtirish

Bootstrap 3 dan kichik ikkilamchi sarlavha matnini qayta yaratish uchun kiritilgan yordamchi dasturlardan foydalaning.

Xira ekranli sarlavhali ikkinchi darajali matn

html

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Sarlavhalarni ko'rsatish

An'anaviy sarlavha elementlari sizning sahifangiz mazmunida eng yaxshi ishlashi uchun mo'ljallangan. Ajralib turish uchun sarlavha kerak bo'lganda, ekran sarlavhasidan foydalanishni o'ylab ko'ring - kattaroq, biroz ko'proq fikrli sarlavha uslubi.

Displey 1

Displey 2

Displey 3

Displey 4

Displey 5

Displey 6

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

$display-font-sizesSarlavhalarni ko'rsatish Sass xaritasi va ikkita o'zgaruvchi orqali sozlanadi $display-font-weightva $display-line-height.

Sarlavhalarni ko'rsatish ikkita o'zgaruvchi orqali sozlanishi $display-font-familyva $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

Qo'rg'oshin

Qo'shish orqali xatboshini ajratib ko'rsatish .lead.

Bu asosiy paragraf. Bu oddiy paragraflardan ajralib turadi.

html

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Inline matn elementlari

Umumiy inline HTML5 elementlari uchun uslublar.

Belgilash tegidan foydalanishingiz mumkinta'kidlashmatn.

~~Ushbu matn qatori o'chirilgan matn sifatida ko'rib chiqilishi kerak.~~

~~Ushbu matn qatori endi aniq emas deb hisoblanishi kerak.~~

Ushbu matn qatori hujjatga qo'shimcha sifatida qarash uchun mo'ljallangan.

Matnning ushbu qatori tagiga chizilgan holda ko'rsatiladi.

Matnning ushbu qatori nozik nashr sifatida ko'rib chiqilishi kerak.

Bu qator qalin matn sifatida berilgan.

Bu satr kursivli matn sifatida berilgan.

html

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

E'tibor bering, bu teglar semantik maqsadlarda ishlatilishi kerak:

mos yozuvlar yoki belgilar uchun belgilangan yoki ta'kidlangan matnni ifodalaydi.
mualliflik huquqi va yuridik matn kabi yon sharhlar va kichik nashrlarni ifodalaydi.
<s>endi tegishli bo'lmagan yoki endi aniq bo'lmagan elementni ifodalaydi.
matnli bo'lmagan izohga ega ekanligini ko'rsatadigan tarzda ko'rsatilishi kerak bo'lgan ichki matn oralig'ini ifodalaydi.

Agar siz matnni uslublashni istasangiz, uning o'rniga quyidagi sinflardan foydalanishingiz kerak:

.markbilan bir xil uslublarni qo'llaydi .
.smallbilan bir xil uslublarni qo'llaydi .
.text-decoration-underlinebilan bir xil uslublarni qo'llaydi .
.text-decoration-line-throughbilan bir xil uslublarni qo'llaydi <s>.

Yuqorida ko'rsatilmagan bo'lsa-da , HTML5 da bemalol foydalaning . qo'shimcha ahamiyatga ega bo'lmasdan so'z yoki iboralarni ajratib ko'rsatish uchun mo'ljallangan , asosan ovoz, texnik atamalar va boshqalar uchun.

Matn yordam dasturlari

Matn va rang yordamchi dasturlarimiz yordamida matnni tekislash, o'zgartirish, uslub, vazn, chiziq balandligi, bezak va rangni o'zgartiring .

Qisqartmalar

<abbr>Hoverda kengaytirilgan versiyani ko'rsatish uchun qisqartmalar va qisqartmalar uchun HTML elementining stilize qilingan ilovasi. Qisqartmalarda sukut bo'yicha chizilgan va yordamchi texnologiyalar foydalanuvchilariga qo'shimcha kontekstni taqdim etish uchun yordam kursoriga ega bo'ladi.

.initialismBiroz kichikroq shrift o'lchami uchun qisqartma qo'shing .

attr

HTML

html

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Blok tirnoq

Hujjatingizdagi boshqa manbadan kontent bloklarini keltirish uchun. <blockquote class="blockquote">Iqtibos sifatida har qanday HTMLni aylantiring .

Blok qo'shtirnoq elementida joylashgan taniqli iqtibos.

html

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

Manbaga nom berish

HTML spetsifikatsiyasi blok tirnoq atributini tashqarida joylashtirishni talab qiladi <blockquote>. Atributni taqdim etishda oʻzingizni <blockquote>a ichiga oʻrang <figure>va sinf bilan a <figcaption>yoki blok darajasidagi elementdan (masalan, ) foydalaning .blockquote-footer. Manba ishining nomini ham o'rashga ishonch hosil qiling <cite>.

Blok qo'shtirnoq elementida joylashgan taniqli iqtibos.

html

<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Hizalama

Blok tirnoqning hizalanishini o'zgartirish uchun kerak bo'lganda matn yordam dasturlaridan foydalaning.

Blok qo'shtirnoq elementida joylashgan taniqli iqtibos.

html

<figure class="text-center">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Blok qo'shtirnoq elementida joylashgan taniqli iqtibos.

html

<figure class="text-end">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Ro'yxatlar

Uslubsiz

Ro'yxatdagi standart list-styleva chap chekkalarni olib tashlang (faqat darhol bolalar uchun). Bu faqat bevosita bolalar roʻyxati elementlariga taalluqlidir , yaʼni siz har qanday ichki roʻyxatlar uchun ham sinf qoʻshishingiz kerak boʻladi.

Bu ro'yxat.
Bu butunlay uslubsiz ko'rinadi.
Strukturaviy jihatdan, bu hali ham ro'yxat.
Biroq, bu uslub faqat bevosita bolalar elementlari uchun amal qiladi.
O'rnatilgan ro'yxatlar:
- bu uslubga ta'sir qilmaydi
- hali ham o'q ko'rsatadi
- va tegishli chap chekkaga ega bo'ling
Bu ba'zi holatlarda hali ham foydali bo'lishi mumkin.

html

<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

Mos ravishda

marginRo'yxatdagi o'qlarni olib tashlang va ikkita sinf kombinatsiyasi bilan bir oz yorug'lik qo'llang .list-inlineva .list-inline-item.

Bu ro'yxat elementi.
Va yana bir.
Lekin ular inline ko'rsatiladi.

html

<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they're displayed inline.</li>
</ul>

Tavsif ro'yxatini tekislash

Tarmoq tizimimizning oldindan belgilangan sinflari (yoki semantik aralashmalar) yordamida atamalar va tavsiflarni gorizontal ravishda tekislang. Uzunroq muddatlar uchun siz ixtiyoriy ravishda .text-truncatematnni ellips bilan kesish uchun sinf qo'shishingiz mumkin.

Tavsif ro'yxatlari

Ta'riflar ro'yxati atamalarni aniqlash uchun juda mos keladi.

Muddati

Termin uchun ta'rif.

Va yana bir nechta to'ldiruvchi ta'rif matni.

Boshqa atama

Bu ta'rif qisqa, shuning uchun qo'shimcha paragraflar yoki hech narsa yo'q.

Kesilgan atama qisqartiriladi

Bu joy tor bo'lganda foydali bo'lishi mumkin. Oxirida ellips qo'shadi.

Yuvalash

Ichki ta'riflar ro'yxati: Men sizga ta'riflar ro'yxatini yoqtirganingizni eshitdim. Ta'riflar ro'yxatiga ta'riflar ro'yxatini qo'yishga ruxsat bering.

html

<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

Javob beruvchi shrift o'lchamlari

Bootstrap 5-da biz sukut bo'yicha javob beruvchi shrift o'lchamlarini yoqdik, bu esa matnni qurilma va ko'rish oynasi o'lchamlari bo'yicha tabiiyroq o'lchash imkonini beradi. Bu qanday ishlashini bilish uchun RFS sahifasiga qarang .

Sass

O'zgaruvchilar

Sarlavhalarda o'lcham va oraliq uchun ba'zi maxsus o'zgaruvchilar mavjud.

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

Bu yerda va Qayta yuklashda yoritilgan turli tipografiya elementlari ham maxsus oʻzgaruvchilarga ega.

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

$text-muted:                  $gray-600;

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

Aralashmalar

Tipografiya uchun maxsus miksinlar mavjud emas, lekin Bootstrap Responsive Font Sizeing (RFS) dan foydalanadi .