Bu modulda Bootstrap bilan tanishildi: u nima, versiyalari va loyihaga qanday ulanadi.
Bootstrap nima
Bootstrap — dunyodagi eng mashhur CSS freymvork: tayyor class’lar va komponentlar to’plami. CSS kursida tugmani o’zingiz bezagan bo’lsangiz, Bootstrap’da shunchaki class="btn btn-primary" yozasiz — ko’k, silliq, hover’li tugma tayyor.
<button class="btn btn-primary">Yuborish</button>
<button class="btn btn-outline-secondary">Bekor qilish</button>
Natija: professional ko’rinishdagi ikkita tugma — bir qator CSS yozmasdan.
Freymvork nimani beradi: tezlik (soatlab CSS o’rniga daqiqalar), bir xillik (butun sayt yagona uslubda) va sinalgan responsivlik. Evazini ham bilib qo’ying: Bootstrap saytlari bir-biriga o’xshab qoladi va CSS asoslarini bilmasangiz, freymvork "sehrli qutiga" aylanadi — shu sabab bu kurs CSS kursidan keyin turibdi.
Bootstrap versiyalari
Kurs Bootstrap 5 ustida quriladi. Undan oldingi keng tarqalgani 4-versiya edi; asosiy farqlar: 5-versiya jQuery’ga bog’liq emas (sof JavaScript), yangi utility’lar va offcanvas kabi komponentlar qo’shilgan, ba’zi class nomlari o’zgargan (masalan ml-* → ms-*). Internetdagi eski qo’llanmalar 4-versiya bo’lishi mumkin — class ishlamasa, avval versiyani tekshiring.
O’rnatish
Ikki yo’l bor:
- CDN — eng tez: ikki qator
<head>va<body>oxiriga qo’yiladi:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
- Yuklab olish — getbootstrap.com’dan fayllarni olib, loyiha ichidan ulash: internetga bog’liq bo’lmaydi.
CSS fayli ko’rinish uchun, JS fayli esa interaktiv komponentlar (modal, dropdown, carousel) uchun kerak.
Tipik xato. Faqat CSS’ni ulab, JS’ni unutish — tugma va grid ishlaydi, lekin modal ochilmaydi, dropdown tushmaydi. Interaktiv narsa ishlamasa, avval bootstrap.bundle.min.js ulanganini tekshiring.
Amaliyot
- Bo’sh sahifaga Bootstrap’ni CDN orqali ulang va
btn btn-primarytugma qo’ying. - Xuddi shu sahifani Bootstrap fayllarini yuklab, lokal ulash bilan qayta yig’ing.
- Bitta tugmani ataylab JS’siz sahifada
data-bs-togglebilan sinab, nima ishlamasligini kuzating.
Modul testini ishlang — keyingi modul Bootstrap’ning yuragi: grid tizimi.