BS4 tipografiya
Bootstrap 4 standart sozlamalari
Bootstrap 4 standart font-size sifatida 16px qiymatidan foydalanadi, uning line-height qiymati esa 1.5 ga teng.
Standart font-family — "Helvetica Neue", Helvetica, Arial, sans-serif.
Bundan tashqari, barcha <p> elementlarida margin-top: 0 va margin-bottom: 1rem (standart holatda 16px) qiymatlari o‘rnatilgan.
<h1> - <h6>
Bootstrap 4 HTML sarlavhalarini (<h1> dan <h6> gacha) qalinroq shrift (font-weight) va kattalashtirilgan shrift o‘lchami (font-size) bilan bezaydi:
Misol
h1 Bootstrap heading (2.5rem = 40px)
h2 Bootstrap heading (2rem = 32px)
h3 Bootstrap heading (1.75rem = 28px)
h4 Bootstrap heading (1.5rem = 24px)
h5 Bootstrap heading (1.25rem = 20px)
h6 Bootstrap heading (1rem = 16px)
Display sarlavhalar
Display sarlavhalar oddiy sarlavhalardan ko‘proq ajralib turishi uchun ishlatiladi (shrift o‘lchami kattaroq, shrift qalinligi esa yengilroq) va tanlash uchun to‘rtta klass mavjud: .display-1, .display-2, .display-3, .display-4
<small>
Bootstrap 4’da HTML <small> elementi istalgan sarlavhada ochroq, ikkinchi darajali matn yaratish uchun ishlatiladi:
Misol
h1 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text
<mark>
Bootstrap 4 HTML <mark> elementini sariq fon rangi va biroz ichki chekinish (padding) bilan bezaydi:
<abbr>
Bootstrap 4 HTML <abbr> elementini nuqtali pastki chegara bilan bezaydi:
<blockquote>
Boshqa manbadan kontent blokini iqtibos sifatida keltirganda <blockquote> ga .blockquote klassini qo‘shing:
Misol
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
<dl>
Bootstrap 4 HTML <dl> elementini quyidagicha bezaydi:
<code>
Bootstrap 4 HTML <code> elementini quyidagicha bezaydi:
Misol
The following HTML elements: span, section, and div defines a section in a document.
<kbd>
Bootstrap 4 HTML <kbd> elementini quyidagicha bezaydi:
<pre>
Bootstrap 4 HTML <pre> elementini quyidagicha bezaydi:
Misol
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
Qo‘shimcha tipografiya klasslari
HTML elementlarini yanada bezash uchun ularga quyidagi Bootstrap 4 klasslarini qo‘shish mumkin:
| Klass | Tavsif | Misol |
|---|---|---|
.font-weight-bold |
Qalin matn | Sinab ko‘ring |
.font-weight-bolder |
Yanada qalinroq matn | Sinab ko‘ring |
.font-italic |
Kursiv matn | Sinab ko‘ring |
.font-weight-light |
Ingichka (light) matn | Sinab ko‘ring |
.font-weight-lighter |
Yanada ingichkaroq matn | Sinab ko‘ring |
.font-weight-normal |
Oddiy (normal) matn | Sinab ko‘ring |
.lead |
Paragrafni ajratib ko‘rsatadi | Sinab ko‘ring |
.small |
Matnni kichikroq qiladi (ota element o‘lchamining 80% iga teng) | Sinab ko‘ring |
.text-left |
Matnni chapga tekislaydi | Sinab ko‘ring |
.text-*-left |
Small, medium, large yoki xlarge ekranlarda 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-*-center |
Small, medium, large yoki xlarge ekranlarda matnni markazga tekislaydi | Sinab ko‘ring |
.text-decoration-none |
Havoladan tagiga chizishni (underline) olib tashlaydi | Sinab ko‘ring |
.text-right |
Matnni o‘ngga tekislaydi | Sinab ko‘ring |
.text-*-right |
Small, medium, large yoki xlarge ekranlarda matnni o‘ngga tekislaydi | Sinab ko‘ring |
.text-justify |
Matnni ikki chet bo‘yicha (justify) tekislaydi | Sinab ko‘ring |
.text-monospace |
Monospace (belgilari bir xil kenglikdagi) shriftli matn | 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-reset |
Matn yoki havola rangini tiklaydi (rangni ota elementdan meros qilib oladi) | 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 |
.pre-scrollable |
<pre> elementini aylantiriladigan (scrollable) qiladi |
Sinab ko‘ring |
Bootstrap 4 CSS bo‘yicha to‘liq ma’lumotnoma
Bootstrap 4’dagi barcha CSS klasslari bo‘yicha to‘liq ma’lumotnoma uchun Bootstrap 4 barcha klasslar ma’lumotnomasiga tashrif buyuring.
Bilasizmi?
W3.CSS — Bootstrap’ga ajoyib muqobil.
W3.CSS hajmi kichikroq, tezroq ishlaydi va undan foydalanish osonroq.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!