CSS tipografiya
Bootstrap’ning standart sozlamalari
Bootstrap’ning global standart shrift o‘lchami (font-size) 14px, qator balandligi (line-height) esa 1.428 ga teng.
Bu <body> elementiga va barcha paragraflarga qo‘llaniladi.
Bundan tashqari, barcha <p> elementlari hisoblangan qator balandligining (line-height) yarmiga teng pastki tashqi chekinishga (margin) ega (standart bo‘yicha 10px).
Tipografiya
Quyidagi elementlar — Bootstrap brauzerning standart stillaridan biroz boshqacha bezaydigan HTML elementlaridir. Natija va farqlarni ko‘rish uchun "Sinab ko‘ring" misollariga qarang.
Quyidagi klasslar elementlarni qo‘shimcha bezash uchun ishlatiladi.
| Element/klass | Tavsif | Misol |
|---|---|---|
| <h1> - <h6> yoki .h1 - .h6 |
h1 - h6 sarlavhalar | Sinab ko‘ring |
| <small> | Istalgan sarlavhada ochroq, ikkilamchi matn yaratadiSarlavha (ikkilamchi matn) |
Sinab ko‘ring |
| .small | Kichikroq matnni bildiradi (ota element o‘lchamining 85% iga teng): Kichikroq matn | Sinab ko‘ring |
| .lead | Matnni ajralib turadigan qiladi: Ajralib turadigan matn | Sinab ko‘ring |
| <mark> yoki .mark |
Matnni ajratib ko‘rsatadi: Ajratib ko‘rsatilgan matn | Sinab ko‘ring |
| <del> | O‘chirilgan matnni bildiradi: O‘chirilgan matn | Sinab ko‘ring |
| <s> | Endi dolzarb bo‘lmagan matnni bildiradi: |
Sinab ko‘ring |
| <ins> | Qo‘shilgan matnni bildiradi: Qo‘shilgan matn | Sinab ko‘ring |
| <u> | Tagiga chizilgan matnni bildiradi: Tagiga chizilgan matn | Sinab ko‘ring |
| <strong> | Qalin matnni bildiradi: Qalin matn | Sinab ko‘ring |
| <em> | Kursiv matnni bildiradi: Kursiv matn | Sinab ko‘ring |
| .text-left | Matnni chapga tekislaydi | Sinab ko‘ring |
| .text-center | Matnni markazga tekislaydi | Sinab ko‘ring |
| .text-right | Matnni o‘ngga tekislaydi | Sinab ko‘ring |
| .text-justify | Matnni kenglik bo‘yicha tekislaydi | Sinab ko‘ring |
| .text-nowrap | Matnni keyingi qatorga o‘tkazmaydi (nowrap) | Sinab ko‘ring |
| .text-lowercase | Kichik harflarga o‘tkazilgan matnni bildiradi: KICHIK HARFLARGA O‘TKAZILGAN MATN | Sinab ko‘ring |
| .text-uppercase | Katta harflarga o‘tkazilgan matnni bildiradi: katta harflarga o‘tkazilgan matn | Sinab ko‘ring |
| .text-capitalize | Har bir so‘zi bosh harf bilan boshlanadigan matnni bildiradi: bosh harf bilan boshlangan matn | Sinab ko‘ring |
| <abbr> | <abbr> elementi qisqartma yoki akronimni bildiradi. title atributiga ega qisqartmalar nuqtali pastki chegaraga ega bo‘ladi, sichqoncha ustiga olib borilganda esa yordam kursori paydo bo‘lib, qo‘shimcha kontekst beradi. | Sinab ko‘ring |
| .initialism | <abbr> elementi ichidagi matnni biroz kichikroq shrift o‘lchamida ko‘rsatadi | Sinab ko‘ring |
| <address> | Aloqa ma’lumotlarini taqdim etadi | Sinab ko‘ring |
| <blockquote> | Boshqa manbadan olingan kontent bloklarini bildiradi | Sinab ko‘ring |
| .blockquote-reverse | Kontenti o‘ngga tekislangan iqtibos blokini (blockquote) bildiradi | Sinab ko‘ring |
| <ul> | Tartiblanmagan ro‘yxatni bildiradi | Sinab ko‘ring |
| <ol> | Tartiblangan ro‘yxatni bildiradi | 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 | Sinab ko‘ring |
| <dl> | Tavsiflar ro‘yxatini bildiradi | Sinab ko‘ring |
| .dl-horizontal | <dl> elementidagi atamalar va tavsiflarni yonma-yon joylashtiradi. Dastlab standart <dl> kabi ko‘rinadi, biroq brauzer oynasi kengayganda ular yonma-yon joylashadi | Sinab ko‘ring |
Kod
| Element/klass | Tavsif | Misol |
|---|---|---|
| <var> | O‘zgaruvchilarni bildiradi: x = ab + y | Sinab ko‘ring |
| <kbd> | Odatda klaviatura orqali kiritiladigan ma’lumotni bildiradi: CTRL + P | Sinab ko‘ring |
| <pre> | Bir necha qatorli kodni bildiradi | Sinab ko‘ring |
| <pre class="pre-scrollable"> | Aylantirish chizig‘iga (scrollbar) ega bir necha qatorli kodni bildiradi | Sinab ko‘ring |
| <samp> | Kompyuter dasturining namunaviy natijasini bildiradi: Sample output | Sinab ko‘ring |
| <code> | Qator ichidagi kod parchalarini bildiradi: span, div |
Sinab ko‘ring |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!