CSS freymvorklar: Bootstrap va muqobillari

Qisqacha: CSS freymvork — tayyor class'lar va komponentlar to'plami: faylni ulaysiz, HTML'ga btn, row, col-md-6 kabi class yozasiz — tugma, to'r va karta tayyor. Eng mashhuri — Bootstrap (hozir 5.3.8): 12 ustunli grid, yuzlab utility class, tugma, karta, menyu, modal va ularning JavaScript qismi. Uni Sass o'zgaruvchilari yoki CSS o'zgaruvchilari bilan o'z brendingizga moslaysiz. Muqobillari — class'siz freymvorklar (Pico CSS, Water.css), Bulma va Tailwind ustidagi daisyUI. Freymvork prototip va admin panel uchun tez; o'z dizayni bor sayt uchun o'z CSS'ingiz ko'pincha yengilroq va erkinroq.

Bu darsda

• CSS freymvork nima ekanini va u qaysi muammoni hal qilishini tushuntira olasiz.
• Bootstrap'ni CDN orqali ulab, grid, utility va komponent class'larini o'qiy va yoza olasiz.
• Bootstrap'ni Sass (@use ... with) va CSS o'zgaruvchilari bilan «Bahor» ranglariga moslaysiz.
• Bootstrap'ni @layer ga "qamash" va uning !important utilitalari bilan tuzog'ini bilasiz.
• Loyiha uchun freymvork yoki o'z CSS'ingiz — asosli tanlov qila olasiz.

Oldin bilishingiz kerak: CSS metodologiyalari, Kaskadni boshqarish: @layer va @scope, Sass/SCSS 1, CSS reset va normalize.

1. Nega bu kerak?

Jasur aka yangi talab bilan keldi: "Otabek bron qilingan stollarni ko'radigan ichki sahifa kerak. Ertaga." Jadval, filtr tugmalari, tasdiqlash oynasi, telefonda ham ishlasin. Bu sahifani faqat choyxona xodimlari ko'radi — unga «Bahor» dizayni shart emas, tez va ishonchli bo'lsa bo'ldi.

Hammasini noldan yozish — tugmalar tizimi, to'r, modal oyna, uning fokus boshqaruvi — bir necha kunlik ish. Freymvork esa bularni tayyor beradi.

Hayotiy o'xshatish: uy qurishda ikki yo'l bor. Birinchisi — usta sizga eshikni o'lchab, o'zingiz xohlagan naqsh bilan yasaydi. Ikkinchisi — do'kondan tayyor eshik: bir kunda o'rnatiladi, lekin qo'shningizda ham xuddi shunday eshik. CSS freymvork — tayyor eshiklar do'koni. Tez, ishonchli, lekin hamma saytda bir xil ko'rinadi va do'kondagi o'lchamga moslashishingiz kerak.

Bootstrap'ni yana bir sabab bilan bilishingiz kerak: ish bozori. Yillar davomida yozilgan minglab admin panellar, korporativ saytlar va shablonlar Bootstrap'da. Ishga kirsangiz, class="container", class="row", class="btn btn-primary" ni ko'rishingiz deyarli aniq.

2. Bootstrap bilan tanishuv

2.1 Nima va qaysi versiya

Bootstrap — Twitter (hozirgi X) dasturchilari Mark Otto va Jacob Thornton 2011-yilda ochiq kod sifatida chiqargan freymvork. Hozirgi versiya — 5.3.8 (rasmiy blogda 2025-yil 25-avgust). Blogda aytilishicha, bu 5.4.0 dan oldingi oxirgi tuzatish versiyasi. Bootstrap 6 haqida rasmiy e'lon hozircha yo'q.

Bootstrap ikki qismdan iborat:

• CSS — grid, utility class'lar va komponentlar ko'rinishi. Manba kodi SCSS'da (Sass/SCSS 1 darsida aytgan edik).
• JavaScript — ochiladigan menyu, modal oyna, karusel kabi harakatlanadigan komponentlar uchun.

2.2 CDN orqali ulash

Eng tez yo'l — rasmiy saytdagi CDN havolalari. CDN (content delivery network) — faylni dunyo bo'ylab tarqatilgan serverlardan yetkazadigan xizmat; Bootstrap jsDelivr'dan foydalanadi. getbootstrap.com'dagi "Quick start" dan:

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
  crossorigin="anonymous">

JavaScript — body oxirida:

<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
  crossorigin="anonymous"></script>

integrity — fayl "barmoq izi" (SRI): CDN'dagi fayl kimdir tomonidan o'zgartirilsa, brauzer uni ishlatmaydi (HTML darajasidagi xavfsizlik). Portfolio'dagi html-validate'ning require-sri qoidasi aynan shuni talab qiladi. Havolalar uzun, shuning uchun atributlarni qatorlarga bo'ldik — HTML uchun farqi yo'q.

bundle so'zi muhim: bu fayl ichida Popper ham bor — ochiladigan menyu va tooltip'ni tugmaga nisbatan joylashtiradigan kichik kutubxona. Keyinroq "Ko'p uchraydigan xatolar" bo'limida ko'rasiz: bundle siz fayl qanday xato beradi.

npm bilan o'rnatish ham bor: npm install bootstrap — Sass bilan moslashda kerak bo'ladi (pastda).

2.3 Qancha "og'ir"?

npm'dagi 5.3.8 fayllarini o'lchadik:

Taqqoslash uchun: «Bahor»ning butun CSS'i bir necha o'n kilobayt. Bootstrap ulangan sahifa esa bitta tugma ishlatsa ham — 232 KB CSS yuklaydi. Buning yechimi bor — Sass bilan faqat kerakli qismlarni yig'ish («Bootstrap'ni o'z brendingizga moslash» bo'limida).

Diqqat: Bu darsdagi jonli natijalarda Bootstrap faylini CDN'dan ulay olmaymiz: saytimizning xavfsizlik siyosati (CSP) begona saytdan CSS yuklashni to'sadi. Shuning uchun natijalarga bootstrap.css 5.3.8 dan kerakli qoidalarni ko'chirib qo'ydik — faqat shu misolga keraklilarini. O'z kompyuteringizda esa yuqoridagi link bilan to'liq faylni ulaysiz.

3. Grid: 12 ustunli to'r

3.1 container, row, col

Bootstrap grid'i uch darajali:

• container — sahifa markazidagi o'ram, ekran eniga qarab maksimal eni bor.
• row — qator. Ichidagi ustunlarni yonma-yon teradi.
• col-* — ustun. Qator 12 qismga bo'lingan deb hisoblanadi: col-6 — yarmi, col-4 — uchdan biri, col-12 — to'liq.

Ustun class'iga ekran nomi qo'shiladi: col-md-6 — "md va undan katta ekranda — 6 qism". Bootstrap'ning ekran chegaralari (breakpoint):

Hammasi min-width — mobile-first, xuddi Mobile-first darsidagidek. Chegaralar «Bahor»nikidan (40rem va 64rem) farq qiladi — freymvork o'z qarorlarini olib keladi.

3.2 Ichkarida — flexbox

Uchta taom kartasi: telefonda ustma-ust, 768px dan ikkitadan, 992px dan uchtadan. Quyidagi CSS — bootstrap.css dan ko'chirilgan (qoidalar o'zgarmagan, faqat shu misolga keraklilari):

<style>
  /* Reboot'dan: grid shunga tayanadi */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  .container {
    --bs-gutter-x: 1.5rem;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
  }
  .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left: calc(-0.5 * var(--bs-gutter-x));
  }
  .row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y);
  }
  .col-12 { flex: 0 0 auto; width: 100%; }
  @media (min-width: 768px) {
    .col-md-6 { flex: 0 0 auto; width: 50%; }
  }
  @media (min-width: 992px) {
    .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
  }
  /* bizning namoyish bezagi */
  body { font-family: system-ui, sans-serif; margin: 0; }
  article {
    margin-block: 0.5rem;
    padding: 1rem;
    border: 2px solid #2f6b3a;
    border-radius: 0.5rem;
  }
</style>
<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">
      <article>Osh — 35 000 so'm</article>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <article>Lag'mon — 28 000 so'm</article>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <article>Manti — 30 000 so'm</article>
    </div>
  </div>
</div>

Nimaga qarang: telefon enida (360) kartalar ustma-ust, 768 da — ikkitadan (uchinchisi pastki qatorga o'tadi), 1280 da — uchtasi bir qatorda. Ekran tugmalarini bosib solishtiring.

Kodni o'qing — hammasi tanish: .row — display: flex va flex-wrap: wrap (Flexbox). Ustun — width: 50% va flex: 0 0 auto. Ustunlar orasidagi oraliq (gutter) — har ustunning ichki padding i, .row ning manfiy margin i esa chetdagi ortiqcha oraliqni "yeb" qo'yadi. --bs-gutter-x — CSS o'zgaruvchisi: uni o'zgartirsangiz, oraliq ham o'zgaradi.

Eng tepadagi box-sizing: border-box qoidasi — Bootstrap reseti (Reboot) dan. Natijani tayyorlayotganda uni avval qo'shmagan edik: 800px da ikki ustun yonma-yon turmadi, ikkinchisi pastga tushib ketdi. Sabab — box-sizing darsidagi hisob: width: 50% ga ustunning padding i qo'shildi, ikki ustun 100% dan oshdi. Xulosa: Bootstrap grid'i Reboot'siz to'g'ri ishlamaydi.

Siz Grid va auto-fit bilan bu to'rni bitta qoidada qilardingiz. Bootstrap grid'i 2011-yildan qolgan g'oyaga — "12 ustun" ga — tayanadi va flexbox bilan qurilgan. Yangi Bootstrap versiyalarida CSS Grid asosidagi tajribaviy variant ham bor, lekin standart holatda — flexbox.

Tekshirib ko'ring: <div class="col-md-8"> va <div class="col-md-4"> bir qatorda. 500px ekranda ular qanday joylashadi? 900px da-chi?

4. Utility class'lar va komponentlar

4.1 Utility'lar

Utility class — bitta vazifali kichik class: mt-3 — yuqoridan oraliq, d-flex — flex konteyner, text-center — matnni markazga. bootstrap.css dagi haqiqiy qoidalar:

.mt-3 {
  margin-top: 1rem !important;
}

.d-flex {
  display: flex !important;
}

.ms-3 {
  margin-left: 1rem !important;
}

Ikki narsaga e'tibor bering. Birinchisi — !important. Bootstrap utility "har doim yutsin" deb uni ataylab qo'yadi — display va yashirish darsidagi [hidden] qoidasi kabi "asoslangan istisno". Ikkinchisi — ms-3 (s — start, boshi) aslida margin-left. Bootstrap o'ngdan chapga yoziladigan tillar uchun alohida faylni (bootstrap.rtl.css) beradi, utility'larida esa Mantiqiy xususiyatlar o'rniga jismoniy xususiyatlarni yozadi.

Oraliq shkalasi: 0 dan 5 gacha — 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem. Dizayn tokenlari darsidagi masofa shkalasi g'oyasi — faqat raqamli nomlar bilan.

4.2 Komponentlar: CSS o'zgaruvchilari ustida

Bootstrap 5.3 da har komponent o'z CSS o'zgaruvchilari bilan qurilgan. .btn qoidasining boshlanishi (asl fayldan, qisqartirilgan):

.btn {
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-radius: var(--bs-border-radius);
  ...
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
}

.btn-success esa faqat o'zgaruvchilarni almashtiradi: --bs-btn-bg: #198754 va boshqalar. Bu — Dizayn tokenlari darsidagi komponent tokenlari, «Bahor»dagi --tugma-fon bilan bir xil g'oya. Demak, tugmani Sass'siz, bitta qoida bilan qayta bo'yash mumkin:

<style>
  /* bootstrap.css 5.3.8 dan (qisqartirilgan) */
  :root {
    --bs-body-color: #212529;
    --bs-border-width: 1px;
    --bs-border-radius: 0.375rem;
  }
  .btn {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-width: var(--bs-border-width);
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: var(--bs-border-radius);
    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--bs-btn-color);
    text-decoration: none;
    border: var(--bs-btn-border-width) solid
      var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
  }
  .btn:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
  }
  .btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #198754;
    --bs-btn-border-color: #198754;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #157347;
    --bs-btn-hover-border-color: #146c43;
  }
  /* «Bahor» moslamasi — faqat o'zgaruvchilar */
  .bahor .btn-success {
    --bs-btn-bg: #2f6b3a;
    --bs-btn-border-color: #2f6b3a;
    --bs-btn-hover-bg: #1a5d1a;
    --bs-btn-border-radius: 999px;
  }
  body { font-family: system-ui, sans-serif; }
</style>
<p>
  <a class="btn btn-success" href="bron/">Bootstrap yashili</a>
</p>
<p class="bahor">
  <a class="btn btn-success" href="bron/">«Bahor» yashili</a>
</p>

Nimaga qarang: birinchi tugma — Bootstrap'ning standart yashili (#198754), to'rtburchakroq. Ikkinchisi — «Bahor» yashili (#2f6b3a) va "tabletka" shaklida. Ikkinchi tugmaning qoidasida bironta ham padding yoki border yo'q — faqat to'rtta o'zgaruvchi. Sichqonchani ikkinchi tugma ustiga olib boring: u to'qroq yashilga (#1a5d1a) o'tadi.

4.3 JavaScript komponentlar

Modal oyna, ochiladigan menyu (dropdown), mobil menyuni yig'ish (collapse), karusel, tooltip — bular ishlashi uchun JavaScript kerak. Bootstrap'da ularni JavaScript yozmasdan, data-bs-* atributlari bilan ulaysiz:

<button class="btn btn-success" type="button"
  data-bs-toggle="collapse" data-bs-target="#ish-vaqti"
  aria-expanded="false" aria-controls="ish-vaqti">
  Ish vaqti
</button>
<div class="collapse" id="ish-vaqti">
  Har kuni 7:00 dan 23:00 gacha.
</div>

data-bs-toggle="collapse" — "bosilganda yig'/och", data-bs-target — qaysi elementni. Bootstrap'ning JavaScript fayli sahifa ochilganda shu atributlarni topib, o'zi ishga tushiradi. aria-expanded ni ham o'zi yangilaydi — accessibility'ning bir qismi tayyor (ARIA).

Lekin diqqat: shu oddiy "ochish-yopish" uchun HTML'ning o'zida details va summary teglari bor (details va summary) — JavaScript'siz. Freymvorklar HTML imkoniyatlari kam bo'lgan davrda yozilgan. Bugun ko'p narsa (<dialog>, popover) brauzerning o'zida bor (Top layer).

4.4 Qorong'i rejim

Bootstrap 5.3 da qorong'i rejim tayyor: <html data-bs-theme="dark"> yozsangiz, komponentlar qorong'i ranglarga o'tadi. Atribut bitta blokka ham qo'yiladi. Ichkarida — yana o'sha CSS o'zgaruvchilari: [data-bs-theme=dark] selektori ostida --bs-body-color kabi o'zgaruvchilarga boshqa qiymat beriladi. Bu — Qorong'i rejim darsidagi data-tema usuli bilan bir xil.

Tekshirib ko'ring: Bootstrap'da <p class="mt-3"> yozildi, sizning CSS faylingizda esa p { margin-top: 0; }. Paragraf yuqorisida oraliq bo'ladimi?

5. Bootstrap'ni o'z brendingizga moslash

5.1 Sass bilan: @use ... with

Sass/SCSS 1 darsida va'da qilgan edik: kutubxona o'zgaruvchilarini !default bilan yozadi, siz esa @use ... with bilan o'zingiznikini berasiz. Bootstrap aynan shunday. Avval o'rnatamiz (npm — 16-qismda to'liq, hozir buyruqlarni aynan takrorlang):

npm install bootstrap
npm install --save-dev sass

scss/bootstrap-bahor.scss:

@use "bootstrap/scss/bootstrap" with (
  $primary: #2f6b3a,
  $border-radius: 0.5rem
);

Kompilyatsiya (--load-path — "import yo'llarini node_modules dan ham qidir"):

npx sass --load-path=node_modules --quiet-deps \
  scss/bootstrap-bahor.scss assets/css/bootstrap-bahor.css

Sass 1.105.1 bilan tekshirdik: ogohlantirishsiz kompilyatsiya bo'ldi. Natijadagi .btn-primary boshlanishi:

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #2f6b3a;
  --bs-btn-border-color: #2f6b3a;
}

(Qoida uzunroq — hover, bosilgan va o'chirilgan holat ranglari ham bor, hammasi $primary dan hisoblangan.) Butun faylda #2f6b3a 28 marta uchradi: tugmalar, havolalar, fokus halqasi, --bs-primary — hammasi bitta o'zgaruvchidan.

--quiet-deps — "node_modules dagi fayllarning ogohlantirishlarini ko'rsatma". Bootstrap 5.3 hali eski @import va eski Sass funksiyalarida yozilgan. Rasmiy Bootstrap hujjati o'zi aytadi: Dart Sass'ning yangi versiyalarida eskirish ogohlantirishlari chiqadi, ular kompilyatsiyaga xalaqit bermaydi. Bayroqsiz sinab ko'rdik — yuzlab ogohlantirish chiqdi, oxirida 228 repetitive deprecation warnings omitted ("228 ta takroriy eskirish ogohlantirishi ko'rsatilmadi"). Xato emas, lekin o'qib bo'lmaydi.

5.2 Faqat keraklisini yig'ish

Rasmiy hujjatdagi ikkinchi yo'l — butun Bootstrap o'rniga faqat kerakli qismlarni @import qilish. Bizning tajribamiz: functions, variables, variables-dark, maps, mixins, root (shular majburiy), ustiga reboot, containers, grid, buttons va card.

@import "bootstrap/scss/functions";

$primary: #2f6b3a;

@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/card";

Tartib muhim: o'zgaruvchi functions dan keyin, variables dan oldin — rasmiy hujjat shunday talab qiladi. Bu faylda o'zingizning @import ingiz bor, shuning uchun uning ogohlantirishini --quiet-deps o'chirmaydi. Sass'ning o'zi aytadi: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0 — "Sass @import qoidalari eskirgan va Dart Sass 3.0.0 da olib tashlanadi". Bootstrap o'zi @import ga tayangani uchun hozircha shunday yoziladi; ogohlantirishni --silence-deprecation=import bayrog'i bilan o'chirish mumkin.

Siqilgan natija hajmlari (--style=compressed, biz o'lchadik):

Olti baravar kichik. Freymvork bilan ishlashning birinchi qoidasi — ishlatmaydiganingizni yig'mang.

Tekshirib ko'ring: Nega $primary qatori functions dan keyin, lekin variables dan oldin turishi kerak?

5.3 --bs-primary tuzog'i

CSS o'zgaruvchilari bilan moslashda bir tuzoq bor. :root { --bs-primary: #2f6b3a; } yozsangiz, .btn-primary o'zgarmaydi. Sababi — bootstrap.css da tugma rangi o'zgaruvchidan emas, tayyor hex'dan: --bs-btn-bg: #0d6efd. --bs-primary faqat ba'zi joylarda (masalan, text-primary utility'sida) ishlatiladi. Komponentni qayta bo'yash — uning o'z o'zgaruvchilari (--bs-btn-*) orqali, butun brendni o'zgartirish — Sass orqali.

6. Bootstrap va sizning CSS'ingiz: @layer

«Bahor» CSS tuzilmasida begona CSS uchun begona qatlami bor (Kaskadni boshqarish). Bootstrap'ni ham shunday ulash mumkin (bootstrap.min.css — node_modules/bootstrap/dist/css/ dan loyihaga ko'chirilgan fayl; CDN manzilini ham url() ichiga yozsa bo'ladi):

@layer tokenlar, reset, begona, asos, layout, komponentlar,
  yordamchi;

@import url("bootstrap.min.css") layer(begona);

Endi Bootstrap'ning og'ir selektorlari ham sizning komponentlar qatlamingizni yenga olmaydi. Lekin bitta istisno bor — va u muhim. Bootstrap utility'lari !important bilan. Kaskadni boshqarish darsida ko'rgan edik: qatlamlarda !important teskari ishlaydi — oldingi qatlamdagisi kuchliroq. Chrome'da tekshirdik:

<style>
  @layer begona, komponentlar;
  @layer begona {
    /* bootstrap.css dagi utility */
    .mt-3 { margin-top: 1rem !important; }
  }
  @layer komponentlar {
    .taom-karta h3 { margin-top: 0; color: #2f6b3a; }
    .taom-karta {
      padding: 1rem;
      border: 2px solid #2f6b3a;
    }
  }
  body { font-family: system-ui, sans-serif; }
</style>
<article class="taom-karta">
  <h3 class="mt-3">Osh</h3>
  <p>35 000 so'm</p>
</article>

Nimaga qarang: "Osh" sarlavhasi tepasida 1rem bo'sh joy bor — komponentlar qatlamidagi margin-top: 0 yutqazdi, garchi u keyingi qatlamda bo'lsa ham. Sarlavha rangi esa yashil: color uchun !important yo'q, u yerda qatlam tartibi ishladi.

Xulosa: @layer Bootstrap'ning komponentlarini qamaydi, lekin utility'larini emas. Utility kerak bo'lmasa — Sass bilan ularni umuman yig'mang («Faqat keraklisini yig'ish» bo'limi). Kerak bo'lsa — HTML'da mt-3 yozilgan joyda uni ataylab xohlagan deb hisoblang.

Tekshirib ko'ring: Nega Bootstrap'ni begona qatlamiga qo'ygach, uning .card (0,1,0) qoidasi sizning komponentlar dagi article (0,0,1) qoidangizdan yutqazadi — garchi og'irligi katta bo'lsa ham?

7. Muqobillar

7.1 Class'siz freymvorklar: Pico CSS va Water.css

Bu freymvorklarda class deyarli yo'q: ular teglarning o'zini bezaydi — button, input, table, nav. Semantik HTML yozgan bo'lsangiz (HTML qismi), faylni ulashingiz bilan sahifa chiroyli bo'ladi.

• Pico CSS (2.1.1) — class'siz versiyasi alohida fayl: pico.classless.min.css. Rasmiy hujjat talabi: <header>, <main>, <footer> — <body> ning bevosita bolalari, ular markazdagi konteyner bo'ladi. Ranglar variantlari ham bor (masalan, pico.classless.green.min.css).
• Water.css (2.1.1) — juda kichik, yorug' va qorong'i mavzu bilan.

«Bahor» HTML'i semantik — unga Pico'ni ulasak, forma maydonlari, tugmalar va jadval darhol bezaladi. Ammo hamma class'siz saytlar bir-biriga o'xshaydi. Ular hujjat, blog, ichki vosita va tez prototip uchun zo'r.

7.2 Bulma

Bulma (1.0.4) — Bootstrap'ga o'xshash class'li freymvork (button is-primary, columns, column), lekin JavaScript'siz: faqat CSS. Menyuni ochish kabi harakatni o'zingiz yozasiz. Sass'da yozilgan va 1.0 dan beri CSS o'zgaruvchilari bilan moslanadi.

7.3 Open Props va daisyUI

• Open Props (1.7.23) — freymvork emas, tokenlar to'plami: --size-3, --gray-9, --shadow-3. Komponent bermaydi — Dizayn tokenlari darsida ko'rgan edik.
• daisyUI (5.7.47) — Tailwind ustiga qurilgan komponent class'lari: btn btn-primary, card. Yozuvi Bootstrap'ga o'xshaydi, lekin ichida Tailwind. Tailwind CSS 5: plaginlar darsida ko'ramiz.

Hajmlarni solishtirish (npm'dagi siqilgan CSS fayllar, biz o'lchadik):

8. Qachon freymvork, qachon o'z CSS

Freymvorkning narxi:

• Hamma bir xil. Bootstrap'ni standart holatda ishlatgan saytlar bir qarashda tanib olinadi.
• Hajm. Keraksiz komponentlar ham yuklanadi (Sass bilan kesmasangiz).
• "Qarshi kurash". Dizayner freymvorkdagidan boshqa narsani chizsa, siz freymvork qoidalarini bosib o'tadigan qoidalar yozasiz — ko'pincha !important bilan.
• Yangilanish. Bootstrap 4 → 5 da ko'p class nomi o'zgargan (masalan, ml-3 → ms-3). Katta loyihani ko'chirish — alohida ish.

Freymvork foydasi ham real: accessibility va brauzer farqlari o'ylangan komponentlar, yaxshi hujjat, jamoadagi har kim tushunadigan umumiy "til". Muhimi — tanlovni ongli qilish.

9. Ko'p uchraydigan xatolar

9.1 bundle o'rniga bootstrap.min.js

bootstrap.min.js (Popper'siz) ulangan, ochiladigan menyu tugmasi bosildi — hech narsa ochilmaydi. Chrome konsolida (Bootstrap 5.3.8 bilan tekshirdik):

Uncaught TypeError: i.createPopper is not a function

Tarjimasi: "Ushlanmagan tip xatosi: i.createPopper — funksiya emas". i — siqilgan koddagi qisqa nom, uning ortida Popper turibdi. Popper ulanmagan, shuning uchun uning funksiyasi yo'q. Xabar sizning kodingizdagi so'zni emas, Bootstrap ichidagi nomni ko'rsatadi — shuning uchun tushunarsiz. Collapse esa ishladi: unga Popper kerak emas. Tuzatish: bootstrap.bundle.min.js yoki Popper'ni alohida, Bootstrap'dan oldin ulash.

9.2 Ikki reset

Bootstrap'ning o'z reseti bor — Reboot. Ustiga o'zingizning reset'ingiz ham ulangan. CSS reset va normalize darsidagi xato: bitta xususiyat ikki joyda ikki xil. Tuzatish: bitta reset. Bootstrap loyihasida Reboot qoladi, o'zingiznikidan faqat yetishmaganini qoldirasiz.

9.3 row siz ustun

<div class="col-md-6"> to'g'ridan-to'g'ri container ichida — ustunlar yonma-yon turmaydi, oraliq ham g'alati. Sabab: display: flex .row da, ustunning padding i esa .row > * qoidasidan. Tuzatish: har doim container → row → col.

9.4 Eski versiya class'lari

Internetdagi eski maqoladan ml-3, float-left, data-toggle ko'chirildi — Bootstrap 5 da ishlamaydi. Biz tekshirdik: bootstrap.css 5.3.8 da .ml-3 qoidasi umuman yo'q. Tuzatish: misolni doim rasmiy hujjatning 5.3 bo'limidan oling (ms-3, float-start, data-bs-toggle).

9.5 --bs-primary bilan tugmani bo'yash

"Moslash" bo'limidagi tuzoq: :root da --bs-primary o'zgardi, tugma esa ko'k qoldi. Tuzatish: tugma uchun --bs-btn-bg va boshqa --bs-btn-* lar, butun brend uchun — Sass $primary.

10. Mashqlar

Mashqlar kurs/mashqlar/06/bootstrap/ da. index.html ga Bootstrap'ni "CDN orqali ulash" bo'limidagi ikki qator bilan ulang.

1-mashq (oson): uch karta

Grid bilan «Bahor»ning uchta taomi: telefonda ustma-ust, 576px dan ikkitadan, 1200px dan to'rttadan bo'lsin (to'rtinchi taom — ko'k choy). Brauzer enini o'zgartirib tekshiring.

Ishora: ekran nomlari jadvali — sm 576px, xl 1200px. 12 ÷ 4 = 3.

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-xl-3">Osh</div>
    <div class="col-12 col-sm-6 col-xl-3">Lag'mon</div>
    <div class="col-12 col-sm-6 col-xl-3">Manti</div>
    <div class="col-12 col-sm-6 col-xl-3">Ko'k choy</div>
  </div>
</div>

2-mashq (o'rta): «Bahor» tugmasi — Sass'siz

Sahifada btn btn-success tugmasi bor. Uni CSS o'zgaruvchilari bilan «Bahor» rangiga o'tkazing: fon #2f6b3a, hover'da #1a5d1a, matn #fffaf0. Faqat .bron o'ramidagi tugmalar o'zgarsin. O'z qoidangizni alohida asosiy.css ga yozing va uni Bootstrap'dan keyin ulang.

Ishora: "Komponentlar: CSS o'zgaruvchilari ustida" bo'limidagi natija — --bs-btn-* o'zgaruvchilar.

.bron .btn-success {
  --bs-btn-color: #fffaf0;
  --bs-btn-bg: #2f6b3a;
  --bs-btn-border-color: #2f6b3a;
  --bs-btn-hover-color: #fffaf0;
  --bs-btn-hover-bg: #1a5d1a;
  --bs-btn-hover-border-color: #1a5d1a;
}

3-mashq (qiyin): kichik Bootstrap

Bootstrap'ni npm orqali o'rnating va faqat grid, tugmalar va kartadan iborat Sass faylini yozing: $primary — #2f6b3a, $border-radius — 0.5rem. Siqilgan holda kompilyatsiya qiling va hajmini to'liq bootstrap.min.css bilan solishtiring.

Ishora: "Faqat keraklisini yig'ish" bo'limidagi ro'yxat va tartib qoidasi. Siqish — --style=compressed.

npx sass --load-path=node_modules --quiet-deps \
  --silence-deprecation=import --style=compressed \
  --no-source-map scss/kichik.scss css/kichik.css

4-mashq: Portfolio qadami — freymvork portfolio'ga kerakmi?

Portfolio'ning tajriba/ papkasida (u sayt/ dan tashqarida, saytga yuklanmaydi) bootstrap.html yarating. Unga Bootstrap'ni CDN orqali ulang va loyihalar sahifangizdagi ikki loyiha kartasini Bootstrap'ning container, row, col-md-6, card, card-body, card-title, btn class'lari bilan qayta yozing.

Keyin DevTools'ning Network panelida ikki sahifani solishtiring: tajriba/bootstrap.html va sayt/loyihalar/index.html. Har birida CSS fayllarning jami hajmini yozing. Oxirida bir-ikki gap: portfolio'ga Bootstrap kerakmi?

Ishora: Network panelida "CSS" filtrini tanlang; pastdagi qatorda jami hajm ko'rinadi.

<!doctype html>
<html lang="uz">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap tajribasi</title>
  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
    crossorigin="anonymous">
</head>
<body>
  <main class="container">
    <h1 class="mt-3">Loyihalar</h1>
    <div class="row">
      <div class="col-md-6">
        <article class="card mb-3">
          <div class="card-body">
            <h2 class="card-title">Choyxona «Bahor» sayti</h2>
            <p>HTML va CSS bilan sayt.</p>
            <a class="btn btn-success" href="#">Saytni ochish</a>
          </div>
        </article>
      </div>
      <div class="col-md-6">
        <article class="card mb-3">
          <div class="card-body">
            <h2 class="card-title">Ikkinchi loyiha</h2>
            <p>Qisqa tavsif.</p>
            <a class="btn btn-success" href="#">Saytni ochish</a>
          </div>
        </article>
      </div>
    </div>
  </main>
</body>
</html>

11. Real ishda

• Korporativ va davlat saytlari, admin panellar. Ko'plari Bootstrap'da. Ishga kirganda birinchi vazifangiz — mavjud Bootstrap sahifasiga yangi bo'lim qo'shish bo'lishi mumkin.
• Shablon bozorlari. Tayyor admin panel shablonlarining katta qismi Bootstrap ustida. Ularni sotib olib moslash — kichik biznes uchun keng tarqalgan yo'l.
• Migratsiya. "Bootstrap 4 dan 5 ga" yoki "Bootstrap'dan Tailwind'ga" — alohida loyiha sifatida uchraydi.
• Intervyuda: "Bootstrap grid qanday ishlaydi?", "Bootstrap'ni qanday moslaysiz?", "Freymvork qachon kerak emas?" — endi javob bera olasiz.

Xulosa

• CSS freymvork — tayyor class va komponentlar to'plami: tez, lekin og'irroq va hamma saytda bir xil.
• Bootstrap 5.3.8: container → row → col-* (12 ustun, flexbox), !important li utility'lar, CSS o'zgaruvchilari ustidagi komponentlar va data-bs-* bilan JavaScript.
• Moslash: butun brend — Sass @use ... with, bitta komponent — --bs-btn-* kabi o'zgaruvchilar. Faqat kerakli qismlarni yig'ish hajmni olti baravar kamaytirdi.
• @layer begona Bootstrap komponentlarini qamaydi, !important utility'larini emas.
• Muqobillar: Pico va Water.css (class'siz), Bulma (JS'siz), Open Props (tokenlar), daisyUI (Tailwind ustida).

Keyingi dars: Tailwind CSS 1: utility-first falsafasi va o'rnatish — utility g'oyasini oxirigacha olib borgan vosita va uning v4 versiyasini o'rnatish.

Manbalar

• Bootstrap 5.3: "Get started" va "Sass" — getbootstrap.com/docs/5.3
• Bootstrap blog: "Bootstrap 5.3.8" — blog.getbootstrap.com
• Pico CSS: "Class-less version" — picocss.com/docs/classless
• Water.css — watercss.kognise.dev
• Bulma — bulma.io