Kursning eng katta moduli: Bootstrap’ning tayyor komponentlari. Ularni yodlash shart emas — hammasi bitta naqshda ishlaydi.

Yagona naqsh

Har komponent uch narsadan yig’iladi:

1. HTML struktura — hujjatlashda tayyor turadi (nusxalab moslashtirasiz);
2. class’lar — ko’rinishni beradi (card, btn, alert alert-warning);
3. data-bs-* atributlar — interaktivlikni JS’siz yoqadi (data-bs-toggle, data-bs-target).

Shu naqshni tushunsangiz, getbootstrap.com hujjatidan istalgan komponentni 5 daqiqada olib ishlatasiz.

Button va Card

<button class="btn btn-success btn-lg">Boshlash</button>

<div class="card" style="width: 20rem;">
  <img src="kurs.png" class="card-img-top" alt="Kurs">
  <div class="card-body">
    <h5 class="card-title">HTML kursi</h5>
    <p class="card-text">Noldan boshlovchilar uchun.</p>
    <a href="#" class="btn btn-primary">Ko'rish</a>
  </div>
</div>

Natija: katta yashil tugma va rasmli, sarlavhali, tugmali karta — katalog kartalarining tayyor asosi.

Tugma ranglari — yagona tizim: primary, secondary, success, danger, warning, info; btn-outline-* — konturli variant. Xuddi shu nomlar alert, badge va fon class’larida takrorlanadi.

Modal — data-bs naqshining namunasi

<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#tasdiq">
  O'chirish
</button>

<div class="modal fade" id="tasdiq">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">Rostdan o'chirasizmi?</div>
    </div>
  </div>
</div>

Natija: tugma bosilganda ekran qorayib, o’rtada oyna ochiladi — bir qator JS yozmasdan.

data-bs-toggle — qaysi komponent ishga tushishi, data-bs-target — qaysi element (id bo’yicha). Dropdown, collapse, offcanvas, carousel — hammasi shu ikki atribut bilan boshqariladi.

Tipik xato. Modal/dropdown ochilmasa, sabab deyarli har doim ikkidan biri: bootstrap.bundle.min.js ulanmagan, yoki data-bs-targetdagi id elementnikiga mos emas.

Navbar

Sayt menyusining tayyor komponenti: navbar navbar-expand-lg — lgdan keng ekranda menyu yoyilgan, torda "gamburger" tugmaga yig’iladi (tugma data-bs-toggle="collapse" bilan ishlaydi). Ichki qismlari: navbar-brand (logo), navbar-nav (havolalar), nav-link.

Komponentlar xaritasi

Modulda ko’rilgan qolgan komponentlar — vazifasi bilan:

Amaliyot

1. Kurs katalogi qatorini yig’ing: grid ichida uchta card, har birida tugma.
2. "O’chirish" tugmasiga tasdiq modali ulang.
3. Sahifaga navbar qo’shing va telefonda gamburger menyu ishlashini tekshiring.
4. FAQ bo’limini accordion bilan, uchta savol-javobdan yig’ing.
5. Hujjatlashdan o’zingiz tanlagan bitta yangi komponentni (masalan toast) mustaqil olib ishlating — naqsh o’zlashganining asl sinovi shu.

Modul testini ishlang — keyingi modul mayda-chuyda ishlarning qiroli: utility class’lar.