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-base
va$line-height-base
atributlaridan bizning tipografik bazamiz sifatida foydalaning<body>
.- Global havola rangini orqali o'rnating
$link-color
. - ( Sukut bo'yicha) ustiga
$body-bg
o'rnatish uchun foydalaning .background-color
<body>
#fff
Ushbu uslublar ichida topilishi mumkin _reboot.scss
va global o'zgaruvchilar ichida aniqlanadi _variables.scss
. O'rnatishga ishonch hosil $font-size-base
qiling 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>
.h1
orqali .h6
sinflar 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.
<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-sizes
Sarlavhalarni ko'rsatish Sass xaritasi va ikkita o'zgaruvchi orqali sozlanadi $display-font-weight
va $display-line-height
.
$display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
);
$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.
<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.
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>
E'tibor bering, bu teglar semantik maqsadlarda ishlatilishi kerak:
<mark>
mos yozuvlar yoki belgilar uchun belgilangan yoki ta'kidlangan matnni ifodalaydi.<small>
mualliflik huquqi va yuridik matn kabi yon sharhlar va kichik nashrlarni ifodalaydi.<s>
endi tegishli bo'lmagan yoki endi aniq bo'lmagan elementni ifodalaydi.<u>
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:
.mark
bilan bir xil uslublarni qo'llaydi<mark>
..small
bilan bir xil uslublarni qo'llaydi<small>
..text-decoration-underline
bilan bir xil uslublarni qo'llaydi<u>
..text-decoration-line-through
bilan bir xil uslublarni qo'llaydi<s>
.
<b>
Yuqorida ko'rsatilmagan bo'lsa-da , <i>
HTML5 da bemalol foydalaning . <b>
qo'shimcha ahamiyatga ega bo'lmasdan so'z yoki iboralarni 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, 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.
.initialism
Biroz 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>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, <p>
) foydalaning .blockquote-footer
. Manba ishining nomini ham o'rashga ishonch hosil qiling <cite>
.
<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.
<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>
<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-style
va 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
margin
Ro'yxatdagi o'qlarni olib tashlang va ikkita sinf kombinatsiyasi bilan bir oz yorug'lik qo'llang .list-inline
va .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-truncate
matnni 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.
- Uy qurish
-
- 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
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;
$hr-height: $border-width;
$hr-opacity: .25;
$legend-margin-bottom: .5rem;
$legend-font-size: 1.5rem;
$legend-font-weight: null;
$mark-padding: .2em;
$dt-font-weight: $font-weight-bold;
$nested-kbd-font-weight: $font-weight-bold;
$list-inline-padding: .5rem;
$mark-bg: #fcf8e3;
Aralashmalar
Tipografiya uchun maxsus miksinlar mavjud emas, lekin Bootstrap Responsive Font Sizeing (RFS) dan foydalanadi .