Bootstrap komponentlari bilan tanishuv

---

Bootstrap komponentlari bilan tanishuv
Odatda veb dasturlash sohasiga yangi kirib kelganlar shu sohada ko'p ishlatiluvchi atamalar, elementlarning 
ommabop nomlari bilan tanish bo'lishmaydi. Bu o'z navbatida bilmagan mavzularida savol so'rayotganda, jamoa 
a'zolari orasidagi muloqotda qiyinchiliklarga sabab bo'ladi. Ko'p ishlatiluvchi atamalarni bilib olish yangi veb 
dasturlovchi uchun juda qo'l kelishi mumkin. Bu rasmli qo'llanmada Bootstrap 4 kutubxonasidagi komponentlar 
nomlari, ko'rinishi va ularning nima maqsadda ishlatilishi haqidagi ma'lumotlarni olishingiz mumkin. 
Komponentlarning barcha imkoniyatlarini bilan Bootstrapning qo'llanmasida tanishib chiqish mumkinligi uchun 
bu qo'llanmada komponentlarning faqat asosiy ko'rinishlari ko'rsatib o'tilgan.
Alerts - Ogohlantiruvchi/Ma'lumot beruvchilar - Уведомления
Sayt foydalanuvchisini biror o'zgarish, muvaffaqiyatli (masalan: ma'lumot qabul qilindi, to'lov o'tdi) yoki 
muvaffaqiyatsiz amal (to'lov o'tmadi, kalitso'z noto'g'ri kiritildi) haqida ogohlantirish, holat asosidagi 
ma'lumot berish uchun ishlatiladi.
Quyida Bootstrapdagi turli holatlarda ishlatilishi mumkin bo'lgan alertlar keltirilgan.
Badge - Nishon/Belgilar - Значки
Saytdagi elementlarni ba'zida alohida turga oid ekanligi (masalan, chegirmaga ega mahsulot, sotuvda 
qolmagan mahsulot) yoki biron bir xabar, elementning sanog'ini ko'rsatish ("Xabarlar soni: 14 ta") kabi 
maqsadda ishlatilishi mumkin. Ba'zida elementlar turi (kategoriyasi)ga olib boruvchi havola sifatida ham 
ishlatiladi.
Breadcrumb - Non ushoqlari - Крошки
Foydalanuvchi ayni sahifalar shajarasidagi qaysi sahifada turganligini ko'rsatish uchun ishlatiladi. Havolalar 
orasidagi chiziqlar ("/") avtomatik tarzda CSS yordamida joylashtiriladi. Bu kabi elementlar ko'pincha 
internet do'kon saytlarida uchratilishi mumkin. Masalan, "Xiaomi RedMi 5" telefoni haqidagi sahifada turgan 
bo'lsangiz, breadcrumb mana bunday ko'rinishda bo'lishi mumkin:
Bosh sahifa
/ 
Texnika
/ 
Telefonlar
/ 
Xiaomi 
/ Xiaomi RedMi 5
Qiziq ma'lumot: Bu elementning aynan non ushoqlari deb nomlanishiga sabab aka-uka Grimmlarning 
"Hansel va Gretel" ertagidir. Bu ertakda Hansel va Gretel uylariga qaytish yo'lini yo'qotib qo'ymaslik uchun 
yurgan yo'llariga non ushoqlarini tashlab ketishadi.
Buttons - Tugmalar - Кнопки
Odatdagi matn ko'rinishidagi havolalarni bosishga oson va qulay holatga keltirish, biron amalga chorlovchi 
(Call to action - CTA) tugmalar tuzishda faol foydalaniladi. Bootstrap 4 kutubxonasida tugmalar uchun turli 
xil ko'rinishlarni oson tuza olish imkoniyatlari berilgan.
Button group - Tugmalar guruhi/jamlanmasi - Группа кнопок
Bajaradigan vazifasi bir-biriga yaqin bo'lgan bir necha tugmalarni jamlab ishlatish imkonini beradi. Ba'zi 
hollarda checkbox va radio inputlarini tugma ko'rinishda berishda ham shu komponentlarga murojaat 
qilish mumkin. Bundan tashqari, tugmalar jamlanmasini instrumentlar qatori (toolbar) ko'rinishidagi 
elementlar uchun ham ishlatsa bo'ladi. Button groupdagi tugmalarni ham odatdagi tugmalar kabi o'zgartisa 
bo'ladi (rang, o'lcham).
Card - Karta - Карта
Ichida bir necha elementlarni jamlovchi interfeys elementi. Bootstrap 4 dagi karta elementini bosh va 
yerto'la qismlariga bo'lish, unga turli holatlarga mos fon rangini berish va saytlarda odatda ko'p ishlatiluvchi 
komponentlar ko'rinishiga osongina keltirish mumkin.
Carousel - Karusel/Ot o'yin - Карусель
Bir necha rasmlarni yoki boshqa turdagi ma'lumotlarni birma-bir ko'rsatish imkonini beruvchi komponent. 
Karuseldagi elementlar aylanib turgani uchun uning nomi istirohat bog'laridagi aylanuvchi ot o'yin - 
karuselga o'xshatma sifatida olingan. Ko'pincha karusel va slayder atamalari bir xil ma'noda ishlatiladi. 
Bootstrap 4 dagi karuselda 3 tuzilmaviy bo'lak joylanishi mumkin: slaydlar, kontrollerlar (avvalgi/keyingi 
slaydga o'tkazuvchi) va indikatorlar (nechanchi slayd ko'rsatilayotganini bildiruvchilar).
Collapse (o'qilishi kollaps) - qulovchi elementlar
Ba'zi hollarda sahifadagi elementlarni ko'rsatmay turilib, foydalanuvchi biron tugmani bossagina berkitilgan 
ma'lumot ko'rsatilishi kerak bo'ladi. Bunda ko'rina boshlaydigan element huddi yuqoridan qulagandek 
holda ko'rina boshlaydi. Collapse nomi ham shu asosida tanlangan. Collapse komponentini internetda ko'p 
ishlatiluvchi akkordion komponentini tuzish uchun ham ishlatish mumkin. Yana bir muhim ma'lumot: 
collapse qilinadigan elementlar paydo bo'lganda sahifadagi boshqa elementlar joylashuviga ta'sir qiladi.
Dropdown - Ochiladigan ro'yxat - Выпадающие элементы
Dropdown komponenti ham collapsega o'xshash maqsadlarda ishlatiladi. Sahifaning biron qismida 
ro'yxatning barcha elementlarini ko'rsatishga joy yetmasa, ikkilamchi (ahamiyati kamroq) ro'yxat 
elementlarini dropdown ichiga yashirib turish mumkin. Collapsedan farqli ravishda dropdown 
komponenti ochilgan holatda o'z atrofidagi elementlar joylashuviga ta'sir qilmaydi.
Forms - Shakllar - Формы
Odatda ko'rinishi unchalik ham chiroyli bo'lmagan shakl elementlari (input, select, textarea) Bootstrap 4 
dagi CSS bezaklari yordamida ham ishlatishga qulay, ham bejirim ko'rinishga keladi. Bu qo'llanmada 
Bootstrap 4 dagi shakl ko'rinishlarining bir qismigina ko'rsatiladi. Shakllar bilan ishlash haqida to'liq 
ma'lumotni Bootstrap 4 ning rasmiy qo'llanmalari sahifasida tanishishingiz mumkin.
Input group - Ma'lumot kiritiluvchi maydonlar guruhi - Группа ввода
Input group oddiy shakl elementlari bo'lgan inputlarga qo'shimcha elementlarni biriktirish uchun 
ishlatiladi. Masalan, matn, tugma va boshqalar.
Jumbotron
Biron bir alohida element, mahsulotni ajratib ko'rsatish uchun ishlatiluvchi komponent. Odatda sayt 
foydalanuvchisi e'tiborini jalb qilish kerak bo'lgan muhim elementlar uchun ishlatiladi.
List group - Ro'yxatlar guruhi - Группа списков
Bir necha elementdan iborat bo'lgan yoki takrorlanib keluvchi ba'zi elementlarni joylashtirish uchun 
ishlatiladigan komponent. Uning ichiga turli xil elementlarni joylashtirish mumkin.
Modal
Avvaliga ko'rinmay turib, biron tugma bosilishi bilan to'liq sahifani egallagan holda paydo bo'luvchi 
komponent. Saytlardagi reklamalarni eslaysizmi? O'shanga o'xshash element. Modal oynaga turli xil 
elementlarni (video, shakl, tugmalar, oddiy matn, rasmlar) joylashtirish mumkin.
Navs - Navigatsiya - Навигация
Navigatsiya menyularini tuzishda ishlatiluvchi komponent. Navigatsiya menyulari odatda saytning biron 
boshqa sahifasiga o'tuvchi yoki sahifaning o'zidagi biron bo'lakka olib boruvchi havolalar guruhi uchun 
ishlatiladi.