3-dars. Bootstrap asoslari

Darsning maqsadlari:

Bootstrap nima va uning qanday ishlashini tushunish.
Bootstrapni o‘rnatish va oddiy sahifa yaratish.
Bootstrap grid tizimi va uning ishlash prinsiplari bilan tanishish.
Bootstrapda navbatlar (navbar) va navigatsiya tizimini o‘rganish.
Modal oynalarini yaratish va ulardan qanday foydalanishni tushunish.
Carousel komponenti va uning ishlashini o‘rganish.
Toasts bilan ishlash.
Flexbox va utilitalardan foydalanish orqali dizaynni moslashtirish.
Accordion (Kollaps) komponenti bilan ishlash.

https://www.youtube.com/watch?v=gdqjNTgRmIw&list=PLpDyZ4xZcDg9hjh8mV-eF8b8igzIE8bAC&pp=iAQB

Kirish

Web dizaynni tez va oson yaratish uchun ishlatiladigan vositalardan biri bo‘lgan Bootstrapga xush kelibsiz! Bootstrap – bu juda kuchli va mashhur CSS framework (CSS ramkasi), u veb-saytlarni yaratishda ko‘p vaqtni tejashga yordam beradi.

Bootstrap sizga turli xil tayyor komponentlar (tugmalar, forma elementlari, kartalar va boshqalar) va grid tizimi yordamida sahifalarni yaratishda yordam beradi.

Bootstrap nima?

Bootstrap – bu veb-saytlarni tez va samarali yaratish uchun ishlab chiqilgan front-end (foydalanuvchi bilan aloqada bo‘ladigan) ramka. Bootstrap o‘z ichiga quyidagilarni oladi:

CSS: Dizaynni va tartibni belgilovchi qoidalar.
JavaScript komponentlari: Maxsus interaktiv elementlarni yaratishga yordam beradi (masalan, modallar, menular, tablar).
Fonts: Fontlar va shriftlar uchun oldindan belgilangan uslublar.

Bootstrap barcha ekran o‘lchamlarida yaxshi ko‘rinadigan dizaynlarni yaratishga yordam beradi. Bu "responsiv" (ya'ni, qurilma ekraniga moslashuvchi) dizaynlarni oson yaratishga imkon beradi.

Bootstrapni o‘rnatish

Bootstrapni o‘rnatish juda oddiy. Siz uni ikkita usulda o‘rnatishingiz mumkin:

CDN orqali ulash: CDN (Content Delivery Network) orqali Bootstrapni ulash eng tez va oson usul hisoblanadi. Buning uchun Bootstrapning HTML faylida quyidagi linklarni qo‘shish kerak:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

Bu kod Bootstrapning CSS faylini sizning sahifangizga ulashadi. Agar JavaScript komponentlarini ishlatmoqchi bo‘lsangiz, quyidagi scriptni ham qo‘shishingiz kerak:

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.6/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

Faylni yuklab olish: Agar Bootstrapni o‘zingizga kompyuteringizga yuklab olishni xohlasangiz, Bootstrap rasmiy saytiga kirib, zip faylini yuklab olishingiz mumkin. Keyin, HTML faylingizda Bootstrapning CSS va JS fayllarini o‘zingiz kiritishingiz mumkin.

Bootstrap Grid Tizimi

Bootstrapning eng kuchli va foydali xususiyatlaridan biri – bu grid tizimi. Bu tizim sizga sahifangizni tartibga solishda yordam beradi va elementlarni o‘zaro mos ravishda joylashtiradi.

Grid tizimi 12 ta ustundan iborat va siz elementlarni bu ustunlar orqali joylashtirishingiz mumkin. Misol uchun, agar siz sahifada 3 ta elementni teng ravishda joylashtirmoqchi bo‘lsangiz, har biriga 4 ta ustun ajratishingiz mumkin (12 ustun / 3 element = 4 ustun har bir elementga).

Gridning ishlash prinsipi:

Bootstrapda elementlarni joylashtirish uchun .container va .row sinflaridan foydalanamiz.

Container: Bu, barcha elementlar joylashadigan quti. Buning yordamida sahifadagi joyni cheklash mumkin.
```
<div class="container">
    
</div>
```
Row: Bu sinf yordamida barcha ustunlarni (col) bir qatorda joylashtiramiz.
```
<div class="row">
    <div class="col-4">Element 1</div>
    <div class="col-4">Element 2</div>
    <div class="col-4">Element 3</div>
</div>
```
Bu kod yordamida 3 ta element teng bo‘lib, sahifaning barcha kengligiga joylashadi.

Bootstrapning Asosiy Komponentlari

Bootstrapda bir qator tayyor komponentlar mavjud bo‘lib, ular sahifangizni yanada interaktiv va chiroyli qilishga yordam beradi. Mana ba'zi asosiy komponentlar:

Navbar (Navigatsiya paneli) – Sahifaning yuqorisida joylashgan menyu.
Card (Karta) – Tizimli ma'lumotlarni ko‘rsatish uchun ishlatiladigan blok.
Button (Tugmalar) – Har xil funksiyalar uchun ishlatiladigan interaktiv tugmalar.
Modal – Foydalanuvchidan ma'lumot olish yoki boshqa funksiyalarni bajarish uchun ishlatiladigan xabar oynasi.

Har bir komponentning ishlatilishi juda oson va Bootstrapning rasmiy hujjatlarida batafsil tushuntirilgan.

Responsive Dizayn

Responsive dizayn — bu sahifaning mobil qurilmalarda, planshetlarda, kompyuterlarda yoki boshqa ekran o‘lchamlarida moslashuvchan bo‘lishi kerakligini anglatadi. Bootstrapda bu ishlash uchun media queries yordamida avtomatik moslashuvchan bo‘ladi.

Misol uchun, yuqorida keltirilgan kodda col-md-6 - bu md (medium) o‘lchamlar uchun 6 ustun ajratadi. Lekin, agar ekran o‘lchami kichik bo‘lsa, Bootstrap avtomatik ravishda barcha ustunlarni to‘liq kenglikka kengaytiradi.

Misol:

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            Bu kichik ekranlar uchun 4 ustunlik qism.
        </div>
        <div class="col-sm-8">
            Bu kattaroq ekranlar uchun 8 ustunlik qism.
        </div>
    </div>
</div>

Izoh: Bu yerda col-sm-4 va col-sm-8 o‘lchamlaridan foydalaniladi. Bu esa, ekran kichik bo‘lsa, 4+8 ustunlarni avtomatik ravishda joylashtirishni ta'minlaydi.

Tugmalar va Formalar

Bootstrap yordamida chiroyli va moslashtirilgan tugmalar va formalar yaratish juda oson. Bootstrapning oldindan tayyorlangan tugma va forma klasslari yordamida, siz ularga kerakli rang, o‘lcham va funksiyalarni berishingiz mumkin.

Tugmalar

<button class="btn btn-primary">Birinchi Tugma</button>
<button class="btn btn-secondary">Ikkinchi Tugma</button>

Formalar

<form>
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Izoh: btn — bu tugma uchun umumiy klass, form-control esa forma inputlari uchun ishlatiladi.

Kartalar (Cards)

Bootstrapda kartalar (cards) — bu zamonaviy dizayn uchun eng yaxshi vositalardan biri. Siz kartalar yordamida turli ma'lumotlarni ko‘rsatishingiz mumkin, masalan, rasm, sarlavha, matn va tugmalarni birlashtirib ko‘rsatishingiz mumkin.

Misol

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Izoh: card sinfi kartani yaratadi, card-img-top esa rasmni yuqorida joylashtiradi.

Bootstrap yordamida responsive dizayn

Bootstrapda sahifa o‘lchamlari moslashuvchan va foydalanuvchi qurilmasiga mos keladigan tarzda ko‘rinadi. Misol uchun, ekranning kichik yoki katta bo‘lishiga qarab, HTML elementlari qanday joylashishini belgilash mumkin.

Misol:

<div class="container">
    <div class="row">
        <div class="col-lg-6 col-md-12 col-sm-12">
            Bu bo‘lim katta ekranda 6 ustunni egallaydi, kichik ekranda esa to‘liq kenglikda bo‘ladi.
        </div>
    </div>
</div>

Izoh: col-lg-6, col-md-12, col-sm-12 klasslari ekran turiga qarab moslashuvchan bo‘ladi.

Bootstrapda navbar — bu veb-sahifalar uchun navigatsiya tizimi, ya’ni foydalanuvchi saytda turli bo‘limlar o‘rtasida osonlik bilan harakatlana olishiga yordam beradi. Navbar odatda sahifaning yuqori qismida joylashadi va unga menyular, logo, va boshqa elementlar kiritilishi mumkin.

Navbarni yaratish:

Bootstrapda navbar yaratish juda oson, chunki bu uchun tayyor komponentlar mavjud. Faqat kerakli klasslarni qo‘shishingiz kerak.

Misol:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">My Website</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>

Izoh:

navbar — bu navbar klassi.
navbar-expand-lg — bu navbarni keng ekranlarda ochilishiga imkon beradi.
navbar-light va bg-light — navbarga yengil rang berish uchun ishlatiladi.
navbar-toggler — bu menyu tugmasi, kichik ekranlarda ko‘rinadi.

Modal oynalar (yoki modals) — bu sahifada yana bir oynani ochadigan va foydalanuvchidan ma'lumot olish yoki aksiyalarni bajarish uchun ishlatiladigan komponent. Masalan, tizimga kirishda yoki ma'lumotni tasdiqlashda modal oynalarni ishlatish mumkin.

Modalni yaratish:

Bootstrapda modal oynalar ham tayyor komponentlar sifatida mavjud bo‘lib, ular juda oson ishlaydi.

Misol:

<!-- Button to trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Modal-ni ochish
</button>

<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal sarlavhasi</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Bu yerda modal oynaning tarkibi bo'ladi. Misol uchun, tizimga kirish formasi.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">O'zgarishlarni saqlash</button>
      </div>
    </div>
  </div>
</div>

Izoh:

data-toggle="modal" va data-target="#myModal" yordamida modalni ishga tushirishni sozlash mumkin.
modal klassi va modal-dialog yordamida modal oynani shakllantiramiz.

Carousel (Slaydshou)

Carousel — bu sahifada suratlar yoki kontentlarni aylantirib ko‘rsatishga imkon beruvchi komponent. Bu asosan galereya yoki promo slaydlar uchun ishlatiladi.

Misol:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Oldingi</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Keyingi</span>
  </a>
</div>

Izoh:

carousel-item — har bir slayd uchun ishlatiladi.
carousel-control-prev va carousel-control-next — slaydni oldingi va keyingi holatga o'tkazish uchun ishlatiladi.

Yordamchi klasslar va ikonlar

Bootstrapda yordamchi klasslar va ikonlar sahifani yanada ko‘rkam va funksional qilishga yordam beradi. Masalan, siz matnni markazlashtirish, ranglarni o‘zgartirish, yoki ikonkalardan foydalanish orqali saytni tezda o‘zgarishingiz mumkin.

Misol:

<i class="fas fa-home"></i>
<p class="text-center">Bu matn markazda joylashgan.</p>
<button class="btn btn-success">Yangi tugma</button>

Izoh:

text-center — matnni markazga joylashtirish uchun.
fas fa-home — FontAwesome ikonkalaridan foydalanish.

Utilitalar yordamida dizaynni sozlash

Bootstrap utilitalari — bu kichik yordamchi sinflar bo‘lib, ular bilan sahifangizning turli qismlarini oson va tez sozlash mumkin. Masalan, p-* va m-* sinflari yordamida margin (bo‘sh joy) va padding (ichki bo‘sh joy) ni boshqarish mumkin.

Misol:

<div class="p-3 m-5 bg-light">
  Bu blokda 3 ta padding va 5 ta margin mavjud.
</div>

Izoh:

p-3 — blok ichidagi paddingni 3 birlikka sozlaydi.
m-5 — blokni tashqi tomondan 5 birlik margin bilan o‘rab oladi.

Toasts (Xabarlar)

Toasts — bu kichik va chiroyli xabarlar bo‘lib, foydalanuvchilarga ma'lumotni ko‘rsatish uchun ishlatiladi. Bu xabarlar ko‘rsatilgandan so‘ng o‘z-o‘zidan yo‘qoladi.

Misol:

<!-- Toast container -->
<div class="toast-container position-fixed top-0 end-0 p-3">
  <div class="toast" data-bs-delay="2000">
    <div class="toast-header">
      <strong class="me-auto">Toast sarlavhasi</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Bu yerda foydalanuvchiga yuborilgan xabar joylashadi.
    </div>
  </div>
</div>

<!-- JavaScript to show toast -->
<script>
  var toast = new bootstrap.Toast(document.querySelector('.toast'));
  toast.show();
</script>

Izoh: Toast o‘z-o‘zidan ko‘rsatiladi va 2 soniya davomida paydo bo‘ladi. JavaScript yordamida uni ko‘rsatish mumkin.

Flexbox yordamida dizaynni moslashtirish

Bootstrap-ning Flexbox yordamida layoutlar yaratish juda oson. Flexbox yordamida elementlarni gorizontal yoki vertikal yo‘nalishda joylashtirish mumkin. Bu esa dizaynni juda moslashuvchan qiladi.

Misol:

<div class="d-flex justify-content-between">
  <div>Element 1</div>
  <div>Element 2</div>
  <div>Element 3</div>
</div>

Izoh:

d-flex — bu sinf bloklarni flexbox tizimida joylashtiradi.
justify-content-between — bu elementlarni o‘rtada joylashtiradi, bo‘sh joyni ularning orasiga taqsimlaydi.

Accordion (Kollaps)

Accordion — bu sahifada bir nechta bo‘limni bitta joyda yashirish va ko‘rsatish imkonini beruvchi komponentdir. Masalan, FAQ (tez-tez beriladigan savollar) sahifalari uchun juda foydali.

Misol:

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Birinchi bo‘lim
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Bu birinchi bo‘limning mazmuni.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Ikkinchi bo‘lim
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Bu ikkinchi bo‘limning mazmuni.
      </div>
    </div>
  </div>
</div>

Izoh:

accordion-item — har bir accordion bo‘limini belgilaydi.
accordion-button — bo‘limni ochish yoki yopish tugmasi.
accordion-collapse — bo‘limning o‘zini yashiradi yoki ko‘rsatadi.

Xulosa

Bootstrap yordamida sahifalarni yaratish juda oson va qulay. Biz bugun grid tizimi, responsive dizayn, tugmalar, kartalar va formalar bilan ishlashni, navbar, modal oynalar, carousel va yordamchi klasslar kabi asosiy komponentlar bilan ishlashni kabilarni o‘rgandik. Bootstrap yordamida sahifalarni qisqa va aniq qilib, zamonaviy ko‘rinishga keltirish mumkin.

Darsning maqsadlari:​

Kirish​

Bootstrap nima?​

Bootstrapni o‘rnatish​

Bootstrap Grid Tizimi​

Gridning ishlash prinsipi:​

Bootstrapning Asosiy Komponentlari​

Responsive Dizayn​

Misol:​

Tugmalar va Formalar​

Tugmalar​

Formalar​

Kartalar (Cards)​

Misol​

Bootstrap yordamida responsive dizayn​

Misol:​

Navbar (Navigatsiya paneli)​

Navbarni yaratish:​

Misol:​

Modal oynalar (Modal Windows)​

Modalni yaratish:​

Misol:​

Carousel (Slaydshou)​

Misol:​

Yordamchi klasslar va ikonlar​

Misol:​

Utilitalar yordamida dizaynni sozlash​

Toasts (Xabarlar)​

Flexbox yordamida dizaynni moslashtirish​

Accordion (Kollaps)​

Xulosa​

Darsning maqsadlari:

Kirish

Bootstrap nima?

Bootstrapni o‘rnatish

Bootstrap Grid Tizimi

Gridning ishlash prinsipi:

Bootstrapning Asosiy Komponentlari

Responsive Dizayn

Misol:

Tugmalar va Formalar

Tugmalar

Formalar

Kartalar (Cards)

Misol

Bootstrap yordamida responsive dizayn

Misol:

Navbar (Navigatsiya paneli)

Navbarni yaratish:

Misol:

Modal oynalar (Modal Windows)

Modalni yaratish:

Misol:

Carousel (Slaydshou)

Misol:

Yordamchi klasslar va ikonlar

Misol:

Utilitalar yordamida dizaynni sozlash

Toasts (Xabarlar)

Flexbox yordamida dizaynni moslashtirish

Accordion (Kollaps)

Xulosa