in English

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 qamrab oluvchi va foydalanish mumkin bo'lgan turdagi shkala uchun biz brauzerning standart ildizidan font-size(odatda 16px) foydalanamiz, shuning uchun tashrif buyuruvchilar o'zlarining brauzer sozlamalarini kerak bo'lganda sozlashlari mumkin.
  • $font-family-base, $font-size-baseva $line-height-baseatributlaridan bizning tipografik bazamiz sifatida foydalaning <body>.
  • 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. Shuni yodda tutingki, bu sarlavhalar sukut bo'yicha javob bermaydi, lekin sezgir shrift o'lchamlarini yoqish mumkin .

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.

Bu asosiy paragraf. Bu oddiy paragraflardan ajralib turadi.

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

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

Blok tirnoq elementida joylashgan taniqli iqtibos.

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

Manbaga nom berish

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

Blok tirnoq elementida joylashgan taniqli iqtibos.

Manba sarlavhasida mashhur kimdir 
<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</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.

Blok tirnoq elementida joylashgan taniqli iqtibos.

Manba sarlavhasida mashhur kimdir 
<blockquote class="blockquote text-center">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Blok tirnoq elementida joylashgan taniqli iqtibos.

Manba sarlavhasida mashhur kimdir 
<blockquote class="blockquote text-right">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</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.

  • 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 uslub 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.
<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.
<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. 
<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

4.3.0 versiyasidan boshlab, Bootstrap mos keladigan shrift o‘lchamlarini yoqish imkoniyatini taqdim etadi, bu esa matnni qurilma va ko‘rish oynasi o‘lchamlari bo‘yicha tabiiyroq o‘lchash imkonini beradi. RFSni$enable-responsive-font-sizes Sass o'zgaruvchisini trueBootstrap ga o'zgartirish va qayta kompilyatsiya qilish orqali yoqish mumkin .

RFS ni qo'llab-quvvatlash uchun biz oddiy font-sizexususiyatlarimizni almashtirish uchun Sass aralashmasidan foydalanamiz. Ta'sirchan shrift o'lchamlari sezgir masshtablash xatti-harakatini ta'minlash uchun ko'rinish va ko'rish birliklari calc()aralashmasi bilan funktsiyalarga kompilyatsiya qilinadi. RFS va uning konfiguratsiyasi remhaqida ko'proq ma'lumotni uning GitHub omborida topish mumkin .