Utilities — konspekt

Bu modulda utility class’lar o’rganildi — har biri bitta aniq CSS xossani beradigan mayda class’lar.

Utility falsafasi

Komponent — tayyor "mebel" bo’lsa, utility — "vint-murvat": text-center (matn markazda), mt-4 (ustidan bo’shliq), d-flex (flex konteyner). CSS fayl ochmasdan, HTML ichida mayda tuzatishlar qilinadi. Bootstrap bilan ishlash amalda 70% utility, 30% komponent.

Spacing — bo’shliqlar tizimi

Naqsh: {xossa}{tomon}-{daraja}. Xossa: m (margin) yoki p (padding); tomon: top, bottom, start (chap), end (o’ng), x (yon), y (vertikal) yoki bo’sh (hamma tomon); daraja: 0–5 va auto:

Misol	Ma’nosi
`mt-3`	margin-top, 3-daraja
`px-4`	padding chap+o’ng, 4-daraja
`mb-0`	pastki margin’ni olib tashlash
`mx-auto`	gorizontal markazlash

Tipik xato. Bootstrap 4 odati bilan ml-*/mr-* yozish — 5-versiyada ular ms-*/me-* bo’lgan (start/end). Class "ishlamayapti" bo’lsa, avval nomini tekshiring.

Display va Flex

d-* — display’ni boshqaradi: d-none (yashirish), d-block, d-flex. Breakpoint bilan birga kuchayadi: d-none d-md-block — telefonda yashirin, planshetdan boshlab ko’rinadi.

<div class="d-flex justify-content-between align-items-center">
  <h5 class="mb-0">Sarlavha</h5>
  <button class="btn btn-sm btn-primary">Tugma</button>
</div>

Natija: sarlavha chapda, tugma o’ngda, ikkalasi vertikal markazda — sarlavha qatorlarining klassik naqshi.

justify-content-* (asosiy o’q), align-items-* (ko’ndalang o’q), flex-column, gap-* — CSS flexbox’ning tayyor class ko’rinishlari.

Ranglar, chegaralar, soyalar

text-primary, text-danger, text-muted — matn rangi; bg-success, bg-light, bg-dark — fon.
border, border-top, border-0, rounded, rounded-3 — chegara va burchaklar.
shadow-sm, shadow, shadow-lg — uch darajali soya.
w-25/50/75/100, h-100 — kenglik/balandlik foizlari; position-relative/absolute va top-0 start-0 — joylashuv.

Matn utility’lari ham shu yerda: text-center/end, text-uppercase, text-truncate (sig’magan matnni "..." bilan kesish), fs-1…fs-6 (o’lcham), visually-hidden (ko’zga ko’rinmas, ekran o’quvchisiga ochiq).

Bootstrap icons

Ikonkalar alohida kutubxona — bootstrap-icons. CDN bilan ulanadi va <i> tegi orqali ishlatiladi:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">

<i class="bi bi-heart-fill text-danger"></i> Sevimlilar

Natija: matn yonida qizil yurak ikonkasi.

Bootstrap’ni moslashtirish

Saytingiz "shablon" ko’rinmasligi uchun Bootstrap ustidan o’z uslubingiz beriladi: Bootstrap CSS’idan keyin ulangan o’z faylingizdagi qoidalar g’olib chiqadi. Zamonaviy yo’l — CSS o’zgaruvchilarni almashtirish (--bs-primary va boshqalar) yoki Sass orqali qayta qurish. Muhim qoida: Bootstrap fayllarini hech qachon to’g’ridan-to’g’ri tahrirlamang — yangilaganda hammasi yo’qoladi.

Amaliyot

Karta ichidagi bo’shliqlarni faqat spacing utility’lar bilan sozlang (CSS faylsiz).
Sarlavha qatori yig’ing: d-flex justify-content-between align-items-center.
d-none d-md-block bilan faqat keng ekranda ko’rinadigan yon panel qiling.
Tugmalarga bootstrap-icons ulang (masalan qidiruv, yurak, savat).
O’z CSS faylingiz bilan btn-primary rangini brendingizga almashtiring — Bootstrap’dan keyin ulashni unutmang.

Modul testini ishlang — oxirgi modulda hammasi bitta loyihada birlashadi.