Bootstrap — responsive veb-interfeys yaratish uchun CSS uslublari, layout tizimi, utility classlar va JavaScript komponentlarini taqdim etadigan ochiq kodli frontend frameworkidir. U dastlab Twitter ichida yaratilgan. Framework button, form, navigation, modal va grid kabi keng tarqalgan interfeys qismlari uchun izchil boshlang‘ich xatti-harakat beradi.
Grid tizimi
Bootstrap layouti container, row va columnlarga tayanadi. Grid 12 shartli ustunga bo‘linadi. Breakpoint prefiksi ustun qaysi kenglikdan boshlab necha qism egallashini bildiradi.
<div class="container">
<div class="row g-3">
<div class="col-12 col-md-8">Asosiy qism</div>
<div class="col-12 col-md-4">Yon qism</div>
</div>
</div>
Kichik ekranda qismlar to‘liq en, md breakpointdan keyin 8 va 4 ustun bo‘ladi. Zamonaviy Bootstrap grid ichkarida Flexboxdan foydalanadi. Gutters row va column orasidagi bo‘shliqni boshqaradi.
Komponentlar
Button, alert, card, navbar, pagination va form control asosan HTML classlari bilan uslublanadi. Modal, dropdown, collapse, tooltip kabi interaktiv komponentlar JavaScript talab qiladi. Ular data attribute yoki dasturiy API orqali boshqariladi.
JavaScript bundle dependency va Popper kabi kerakli qismlarni versiyaga qarab o‘z ichiga olishi mumkin. Barcha komponentlarni qo‘shish shart emas; build orqali faqat kerakli Sass va JavaScript modullar olinishi mumkin.
Utility classlar
Spacing, display, flex, color, position va visibility utilitylari kichik o‘zgarishlarni tez beradi. d-none d-md-block elementni kichik ekranda yashirib, kattaroq ekranda ko‘rsatadi. Kontentni faqat vizual yashirish accessibility ma’nosiga ta’sir qilishi mumkin; screen reader uchun maxsus visually-hidden utility mavjud.
Theme va Sass
Bootstrap Sass variable va maplar orqali rang, breakpoint, border radius va boshqa tokenlarni builddan oldin sozlashga imkon beradi. CSS custom propertylar runtime theme’da ham ishlatiladi. Default theme o‘zgartirilmasa ko‘p sayt bir xil ko‘rinishi mumkin; brend tipografiya, rang va component variantlari bilan moslashtiriladi.
Custom CSS frameworkdan keyin yuklansa cascade orqali override qiladi. Haddan tashqari !important ishlatish specificity kurashini kuchaytiradi. Bootstrap source layerini tushunib, token yoki aniq component selectoridan foydalanish barqarorroq.
Accessibility
Bootstrap komponentlari accessibility uchun boshlang‘ich markup va xatti-harakat beradi, ammo mazmun va integratsiya dasturchiga tegishli. Modal title bilan bog‘lanishi, forma inputi labelga ega bo‘lishi, rang kontrasti custom theme’da tekshirilishi kerak. Tooltip muhim ma’lumotning yagona manbasi bo‘la olmaydi.
Versiyalar
Katta versiyalar class, data attribute va dependencylarni o‘zgartirishi mumkin. Masalan, eski tutorialdagi markup yangi versiyada aynan ishlamasligi ehtimoli bor. Loyiha package versiyasiga mos documentation ishlatiladi va upgrade migration qo‘llanmasi bo‘yicha bajariladi.
Form validation ko‘rinishi
Bootstrap is-valid va is-invalid classlari hamda feedback elementlari bilan validation holatini ko‘rsatadi. Bu classlarni qo‘shish validation mantiqining o‘zi emas; qiymat client yoki server qoidasi bilan tekshiriladi. Server xatosi input bilan semantik bog‘lanadi va faqat yashil-qizil borderga tayanmaydi. Browser native validationdan foydalanilsa novalidate va custom feedback xatti-harakati tushuniladi. Invalid maydonga fokus yoki error summary uzun formadagi muammoni topishga yordam beradi. Dynamic modal ichidagi form yopilib ochilganda eski error va input state qaysi holatda saqlanishi aniq belgilanadi.
Bog‘liq tushunchalar
CSS framework, responsive design, grid system, Sass, JavaScript component, Flexbox, design system