BS 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 (<p>) qo‘llaniladi.

Bundan tashqari, barcha <p> elementlari hisoblangan qator balandligining yarmiga teng pastki tashqi chekinishga (margin) ega (standart holatda 10px).

Bootstrap va brauzerning standart stillari

Ushbu bobda Bootstrap brauzerning standart stillaridan biroz boshqacha bezaydigan ba’zi HTML elementlarini ko‘rib chiqamiz.

<h1> - <h6>

Standart holatda Bootstrap HTML sarlavhalarini (<h1> dan <h6> gacha) quyidagicha bezaydi:

Misol

h1 Bootstrap heading (36px)

h2 Bootstrap heading (30px)

h3 Bootstrap heading (24px)

h4 Bootstrap heading (18px)

h5 Bootstrap heading (14px)

h6 Bootstrap heading (12px)

O‘zingiz sinab ko‘ring »

<small>

Bootstrap’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

O‘zingiz sinab ko‘ring »

<mark>

Bootstrap HTML <mark> elementini quyidagicha bezaydi:

Misol

Use the mark element to highlight text.

O‘zingiz sinab ko‘ring »

<abbr>

Bootstrap HTML <abbr> elementini quyidagicha bezaydi:

Misol

The WHO was founded in 1948.

O‘zingiz sinab ko‘ring »

<blockquote>

Bootstrap HTML <blockquote> elementini quyidagicha bezaydi:

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.

From WWF's website

O‘zingiz sinab ko‘ring »

Iqtibosni o‘ng tomonda ko‘rsatish uchun .blockquote-reverse klassidan foydalaning:

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.

From WWF's website

O‘zingiz sinab ko‘ring »

<dl>

Bootstrap HTML <dl> elementini quyidagicha bezaydi:

Misol

Coffee: - black hot drink
Milk: - white cold drink

O‘zingiz sinab ko‘ring »

<code>

Bootstrap HTML <code> elementini quyidagicha bezaydi:

Misol

The following HTML elements: span, section, and div defines a section in a document.

O‘zingiz sinab ko‘ring »

<kbd>

Bootstrap HTML <kbd> elementini quyidagicha bezaydi:

Misol

Use ctrl + p to open the Print dialog box.

O‘zingiz sinab ko‘ring »

<pre>

Bootstrap HTML <pre> elementini quyidagicha bezaydi:

Misol

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.

O‘zingiz sinab ko‘ring »

Kontekstual ranglar va fonlar

Bootstrap’da "ranglar orqali ma’no berish" uchun ishlatiladigan bir nechta kontekstual klasslar ham mavjud.

Matn ranglari uchun klasslar: .text-muted, .text-primary, .text-success, .text-info, .text-warning va .text-danger:

Misol

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

O‘zingiz sinab ko‘ring »

Fon ranglari uchun klasslar: .bg-primary, .bg-success, .bg-info, .bg-warning va .bg-danger:

Misol

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

O‘zingiz sinab ko‘ring »

Qo‘shimcha tipografiya klasslari

HTML elementlarini qo‘shimcha bezash uchun quyidagi Bootstrap klasslarini qo‘shish mumkin:

Klass	Tavsif	Misol
`.lead`	Paragrafni ajratib ko‘rsatadi	Sinab ko‘ring
`.small`	Kichikroq matnni bildiradi (ota element o‘lchamining 85% iga teng)	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`	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	Sinab ko‘ring
`.dl-horizontal`	`<dl>` elementlaridagi atamalar (`<dt>`) va tavsiflarni (`<dd>`) yonma-yon joylashtiradi. Dastlab oddiy `<dl>` kabi ko‘rinadi, lekin brauzer oynasi kengayganda ular yonma-yon joylashadi	Sinab ko‘ring
`.pre-scrollable`	`<pre>` elementini aylantiriladigan (scrollable) qiladi	Sinab ko‘ring

Bootstrap tipografiyasi bo‘yicha to‘liq ma’lumotnoma

Barcha tipografiya elementlari/klasslari bo‘yicha to‘liq ma’lumot uchun Bootstrap tipografiya ma’lumotnomamizga o‘ting.

Kontekstual klasslar haqida batafsil ma’lumot olish uchun Bootstrap yordamchi klasslar ma’lumotnomamizni ham ko‘rib chiqing.

Bilasizmi?

W3.CSS — Bootstrap’ga ajoyib muqobil.

W3.CSS hajmi kichikroq, tezroq ishlaydi va undan foydalanish osonroq.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish