BS5 tipografiya
Bootstrap 5 standart sozlamalari
Bootstrap 5 standart font-size sifatida 1rem (standart holatda 16px) qiymatidan foydalanadi, uning line-height qiymati esa 1.5 ga teng.
Bundan tashqari, barcha <p> elementlarida margin-top: 0 va margin-bottom: 1rem (standart holatda 16px) qiymatlari o‘rnatilgan.
<h1> - <h6>
Bootstrap 5 HTML sarlavhalarini (<h1> dan <h6> gacha) qalinroq shrift (font-weight) va moslashuvchan shrift o‘lchami (font-size) bilan bezaydi.
Agar xohlasangiz, boshqa elementlarni ham sarlavhalar kabi ko‘rsatish uchun ularga .h1 dan .h6 gacha bo‘lgan klasslarni qo‘llashingiz mumkin:
Misol
<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>
O‘zingiz sinab ko‘ring »
Display sarlavhalar
Display sarlavhalar oddiy sarlavhalardan ko‘proq ajralib turishi uchun ishlatiladi (shrift o‘lchami kattaroq, shrift qalinligi esa yengilroq) va tanlash uchun oltita klass mavjud: .display-1 dan .display-6 gacha:
<small>
Bootstrap 5’da HTML <small> elementi (va .small klassi) istalgan sarlavhada kichikroq, ikkinchi darajali matn yaratish uchun ishlatiladi:
<mark>
Bootstrap 5 <mark> va .mark ni sariq fon rangi va biroz ichki chekinish (padding) bilan bezaydi:
<abbr>
Bootstrap 5 HTML <abbr> elementini nuqtali pastki chegara bilan bezaydi, sichqoncha ustiga olib borilganda esa kursor so‘roq belgisi ko‘rinishiga keladi:
<blockquote>
Boshqa manbadan kontent blokini iqtibos sifatida keltirganda <blockquote> ga .blockquote klassini qo‘shing. Manbani ko‘rsatishda esa, masalan, "WWF veb-saytidan" kabi, .blockquote-footer klassidan foydalaning:
<dl>
Bootstrap 5 HTML <dl> elementini quyidagicha bezaydi:
<code>
Bootstrap 5 HTML <code> elementini quyidagicha bezaydi:
<kbd>
Bootstrap 5 HTML <kbd> elementini quyidagicha bezaydi:
<pre>
Bootstrap 5 HTML <pre> elementini quyidagicha bezaydi:
Qo‘shimcha tipografiya klasslari
HTML elementlarini yanada bezash uchun ularga quyidagi Bootstrap 5 klasslarini qo‘shish mumkin:
| Klass | Tavsif | Misol |
|---|---|---|
.lead |
Paragrafni ajratib ko‘rsatadi | Sinab ko‘ring |
.text-start |
Matnni chapga tekislaydi | Sinab ko‘ring |
.text-break |
Uzun matn maketni buzishining oldini oladi | Sinab ko‘ring |
.text-center |
Matnni markazga tekislaydi | Sinab ko‘ring |
.text-decoration-none |
Havoladan tagiga chizishni (underline) olib tashlaydi | Sinab ko‘ring |
.text-end |
Matnni o‘ngga tekislaydi | Sinab ko‘ring |
.text-nowrap |
Matnni keyingi qatorga o‘tkazmaydi (nowrap) | Sinab ko‘ring |
.text-lowercase |
Matnni kichik harflarga o‘tkazadi | Sinab ko‘ring |
.text-uppercase |
Matnni katta harflarga o‘tkazadi | Sinab ko‘ring |
.text-capitalize |
Har bir so‘zni bosh harf bilan boshlaydi | Sinab ko‘ring |
.initialism |
<abbr> elementi ichidagi matnni biroz kichikroq shrift o‘lchamida ko‘rsatadi |
Sinab ko‘ring |
.list-unstyled |
Ro‘yxat elementlaridan standart list-style va chap tashqi chekinishni (margin) olib tashlaydi (<ul> va <ol> ning ikkalasida ham ishlaydi). Bu klass faqat bevosita ichki (farzand) ro‘yxat elementlariga ta’sir qiladi (ichma-ich joylashgan ro‘yxatlardan ham standart list-style’ni olib tashlash uchun bu klassni ichki ro‘yxatlarning har biriga ham qo‘llang) |
Sinab ko‘ring |
.list-inline |
Barcha ro‘yxat elementlarini bitta qatorga joylashtiradi (har bir <li> elementida .list-inline-item bilan birga ishlatiladi) |
Sinab ko‘ring |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!