Bu modulda Bootstrap’ning maket tizimi o’rganildi: breakpoints, container va 12 ustunli grid.

Breakpoints va Containers

Bootstrap oltita ekran chegarasi bilan ishlaydi:

Kontent odatda container ichiga olinadi: container — har breakpoint’da belgilangan kenglikda markazda turadi, container-fluid — doim to’liq kenglik.

Grid — 12 ustunli tizim

Har qator (row) 12 ta xayoliy ustunga bo’linadi; col-* class’lari elementga shundan nechtasini berishni aytadi:

<div class="container">
  <div class="row">
    <div class="col-md-8">Asosiy kontent</div>
    <div class="col-md-4">Yon panel</div>
  </div>
</div>

Natija: planshet va undan keng ekranda 8+4 ustunli maket; telefonda ikkalasi ustma-ust to’liq kenglikda.

col-md-8 o’qilishi: "md breakpoint’dan boshlab 8 ustun egalla, undan torda — to’liq qator". Bootstrap shu tarzda mobile-first ishlaydi.

Tipik xato. col-*ni rowsiz ishlatish yoki rowni containerdan tashqarida qoldirish. Ierarxiya qat’iy: container → row → col. Chetga chiqsangiz, chekkalarda g’alati siljishlar paydo bo’ladi.

Columns — ustun boshqaruvi

Foydali usullar:

• Raqamsiz col — qatordagi ustunlar joyni teng bo’lishadi.
• Aralash: col-8 + col-4, yoki turli breakpoint’larda turlicha: col-12 col-md-6 col-lg-4 (telefonda to’liq, planshetda yarim, noutbukda uchdan bir).
• Qator 12 dan oshsa, ortiqchasi keyingi qatordan davom etadi.

Gutters — ustunlar orasi

Ustunlar orasidagi bo’shliq g-* class’lari bilan boshqariladi (rowga beriladi): g-0 — bo’shliqsiz, g-3 — o’rtacha, g-5 — keng. Faqat gorizontal (gx-*) yoki vertikal (gy-*) alohida sozlanadi.

<div class="row g-4">
  <div class="col-6">Karta 1</div>
  <div class="col-6">Karta 2</div>
</div>

Natija: ikki ustun orasida (va qatorlar orasida) 4-darajali bo’shliq.

Amaliyot

1. container va container-fluidni yonma-yon sinab, oynani kengaytirganda farqni kuzating.
2. Blog maketi yig’ing: col-md-8 maqola + col-md-4 yon panel; telefonda tekshiring.
3. Uch kartali qator: col-12 col-md-6 col-lg-4 — uch xil ekranda uch xil joylashuvni DevTools qurilma rejimida ko’ring.
4. Kartalar orasini g-0dan g-5gacha o’zgartirib, qulay bo’shliqni tanlang.

Modul testini ishlang — keyingi modulda matn, rasm va jadvallar bezatiladi.