Bu modulda kontent elementlari — matn, rasm va jadvallarning Bootstrap class’lari o’rganildi.

Typography

Bootstrap ulangan zahoti sahifa shrifti va o’lchamlari o’zi yangilanadi; ustiga maxsus class’lar qo’shiladi:

<h1 class="display-4">Ochiq Kurs</h1>
<p class="lead">Bepul video kurslar platformasi.</p>
<p class="text-muted">Oxirgi yangilanish: iyul 2026</p>

Natija: yirik sarlavha, ajralib turgan kirish gapi va xira izoh qatori.

Images

Eng muhimi — img-fluid: rasm konteyneridan katta bo’lsa, unga moslashib torayadi (CSS kursidagi max-width: 100%ning tayyor shakli). Qo’shimchalar: rounded (yumaloq burchak), rounded-circle (doira), img-thumbnail (ramkali ko’rinish).

<img src="rasm.jpg" class="img-fluid rounded" alt="Manzara">

Natija: konteynerga sig’adigan, burchaklari yumshoq rasm.

Tipik xato. img-fluidni unutish — keng rasm mobil ekranda maketni yorib chiqadi va gorizontal scroll paydo bo’ladi. Kontentdagi har rasmda img-fluid bo’lsin.

Tables

Oddiy <table>ga table class’i berilsa, Bootstrap uni ozoda jadvalga aylantiradi. Ustiga qo’shimchalar:

<div class="table-responsive">
  <table class="table table-striped table-hover">
    ...
  </table>
</div>

Natija: chiziqli, hover’li, tor ekranda ham maketni buzmaydigan jadval.

Tipik xato. table class’ini yozmaslik — Bootstrap jadvalni avtomatik bezamaydi, aynan class="table" so’raladi.

Amaliyot

1. Maqola sahifasi yig’ing: display sarlavha, lead kirish, oddiy matn va text-muted sana.
2. Uchta rasmni rounded, rounded-circle va img-thumbnail bilan yonma-yon qo’yib solishtiring.
3. Kurslar jadvalini table table-striped table-hover bilan bezang va table-responsivega o’rab telefonda sinang.

Modul testini ishlang — keyingi modul formalarni Bootstrap’cha yig’ish.