Kadirov Dev

2-AMALIY MASHG’ULOT
Dizayner photoshop, yoki shunga o’xshash boshqa dasturda chizgan rasmlaridan – dastur yasab bo’lmaydi. Avval ushbu chizilgan rasmni brauzer tushunadigan: html va css tillariga o’girishimiz kerak.
Bu narsa rus tilida vyorstka (вёрстка) deyiladi. Lekin biror bir korxona alohida vyorstkachi olgani esimda yo’q. Ilgari bu ishni front-end dasturchilar bajarishar edi. Lekin hozir fornt-end dasturlari shunchalik qiyinlashdiki, ushbu vazida ularning zimmasidan olib tashlandi.
Hozir odatda, dizaynerga buyurtma berilganda, yaratilgan dizaynni rasm shaklida emas, birdaniga bootstrapda vyorstka qilingan fayllar shaklida taqdim etish talab qilinadi.
Lekin buni, front-end dasturchilari html, css, yoki bootstrapni bilishi shart emas deb tushunmaslik kerak. Siz ushbu texnologiyalarni yaxshi bilishingiz – shart! Chunki har doim ushbu vyorstkaning qayerinidir o’zgartirasiz, yangi elementlar qo’shasiz va hokazo.
Yoki deylik loyihangiz hali yangi va dizaynerga murojaat qilishga erta, o’zingiz biror qoralama variant tayyorlamoqchisiz. Buning uchun bootstrap’ning Layout [leyaut] qismini yaxshilab tushunishingiz kerak. Layout – maket degani. Dasturning maketini chizish uchun avval uni hayolan qatorlar va kataklarga bo’lib olishimiz kerak.

Misol uchun keling boshqar.com saytiga kiramiz.

Dasturning o’zi bir konteyner hisoblanadi. Bootstrapda yoziladigan barcha kod konteyner ichida bo’ladi. Konteyner ichida faqat qatorlar bo’lishi mumkin. Boshqar.com dasturining o’zi bir qator hisoblanadi. Ushbu qator ichida 3 ta katak ko’rishimiz mumkin: Chapdagi menyu, o’rtadagi asosiy qism va o’ng tomondagi ma’lumotlar bo’limi.

O’rtadagi katakka e’tibor bersak, uning ichida ham bir nechta qatorlar bor. Yuqoridagi menyu – bir qator joy olmoqda, ostida yana bir qator – dastur haqida ma’lumot, ostida tugmachalik kartalar ham bir qator. Ushbu ohirgi qatorning ichida ham 4 ta katak bor.

Demak dastur ichidagi barcha ma’lumotlar kataklar ichida joylashtiriladi. Kataklar esa faqat qatorlar ichida bo’lishi mumkin. Qatorlar esa konteyner ichida, yoki kataklar ichida ham bo’lishi mumkin.
Demak qator va katak tushunchasi orqali istagan – qiyin maketlarimizni ham yarata olar ekanmiz.


CONTAINER, ROW, COL
Bootstrap da qator uchun row sinfini ishlatamiz, katak uchun col, konteyner uchun container sinfi. Keling ularni ishlatib ko’ramiz

Hello