Source

Tipografiya

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

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 inklyuziv va foydalanish mumkin bo'lgan turdagi shkala uchun biz brauzerning standart ildizini font-size(odatda 16px) qabul qilamiz, 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>.
U orqali global havola rangini o'rnating $link-colorva havolaning tagiga chizilganlarni faqat ustiga qo'llang :hover.
( Sukut bo'yicha) ustiga $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

Barcha HTML sarlavhalari, <h1>orqali <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

<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

<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

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

Qo'rg'oshin

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

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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.

Ushbu satr matni 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.

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

.markva sinflar, shuningdek , teglar keltiradigan har qanday istalmagan semantik oqibatlarga yo'l qo'ymaslik uchun .smallbir xil uslublarni qo'llash uchun mavjud .<mark><small>

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

Matn yordam dasturlari

Matn va rang yordamchi dasturlarimiz yordamida matnni tekislash, o'zgartirish, uslub, vazn 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

<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. Iqtibos<blockquote class="blockquote"> sifatida har qanday HTMLni aylantiring .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Manbaga nom berish

<footer class="blockquote-footer">Manbani aniqlash uchun a qo'shing. Manba ishining nomini o'rang <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Manba sarlavhasida mashhur kimdir

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Hizalama

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Manba sarlavhasida mashhur kimdir

<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Manba sarlavhasida mashhur kimdir

<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Massada butun son molestie lorem
Pretium nisl aliquetdagi facilisis
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- To'g'ri keling
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</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.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</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.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida va eget metus.

Malesuada porti

Etiam porta sem malesuada magna mollis euismod.

Kesilgan atama qisqartiriladi

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Uy qurish

Ichki ta'riflar ro'yxati: Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Javob beruvchi tipografiya

Javob beruvchi tipografiyafont-size bir qator media so'rovlari doirasida ildiz elementini oddiygina sozlash orqali matn va komponentlarni masshtablashtirishni anglatadi . Bootstrap buni siz uchun qilmaydi, lekin agar kerak bo'lsa, uni qo'shish juda oson.

Bunga amalda misol keltiramiz. O'zingiz xohlagan font-sizes va media so'rovlarini tanlang.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}