#8 – Bootstrap. 2-Qism. Veb-dasturlash kursi

san'adagi maqolasi
(Maqolani video shaklida ko’rish uchun bu yerga bosing)

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


<!doctype html>
<html>
    <head>
        <title>Kadirov Dev</title>
    </head>
    <body>

    </body>
</html>

Birinchi novbatta html faylini yaratamiz. Buning uchun Windows operatsion tizimida oddiy “Блокнот” dasturidan foydalanish mumkin. Yaratayotgan faylimizni index.html deb biror papkada saqladik.


<!doctype html>
<html>
    <head>
        <title>Kadirov Dev</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    </head>
    <body>

    </body>
</html>

Endi bootstrapni ulab olsak bo’ladi. Oldingi darsimizni ko’rgan bo’lsangiz, buni qanday qilishni bilasiz.


<!doctype html>
<html>
    <head>
        <title>Kadirov Dev</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    </head>
    <body>
        <div class='container'>
            <div class='row'>
                <div class='col'>Hello</div>
            </div>
        </div>
    </body>
</html>

Endi bitta div tegini yaratamiz. Unga container sinfini beramiz. Uning ichida yana bir row sinfiga ega div. Uning ichida esa col sinfiga ega bo’lgan div. Ushbu teg ichida biror matn yozing.


Ekranda biz yozgan matn chiqdi. Lekin bizning col qayerda boshlanib, qayerda tugashi – ko’rinayotgani yo’q. Keling elementning fon rangini o’zgartiramiz.


Eslaymiz, ranglar bilan ishlash uchun barcha ma’lumotlar bootstrap saytining, Documentation, ya’ni qo’llanma ichidagi Utilities bo’limining, Colors nomlik qismida joylashgan. Documentation -> Utilities -> Colors.


<div class='container'>
    <div class='row'>
        <div class='col bg-success'>Hello</div>
    </div>
</div>

Keling col sinfiga ega div’ivimizga, yana bg-success sinfini qo’shamiz.


Rostdan ham col’imiz rangi yashilga o’zgardi. Demak bootstrapni to’g’ri ulagan ekanmiz.


<div class='container'>
    <div class='row'>
        <div class='col bg-success'>1</div>
        <div class='col bg-warning'>2</div>
        <div class='col bg-danger'>3</div>
    </div>
</div>

Keling, ushbu row ichida bir emas, 3 ta har hil ranglik col bo’lsin


Mana, o’xshadi.


<div class='container'>
    <div class='row'>
        <div class='col-1 bg-success'>1</div>
        <div class='col-8 bg-warning'>2</div>
        <div class='col-3 bg-danger'>3</div>
    </div>
</div>

Hozir ularning eni – bir hil. Ularni 1 dan 12 gacha bo’lgan raqamlar orqali har hil hajmda ko’rsatishimiz mumkin.


Col’larga raqam berayotganingizda, bir qatorda 12 col sig’ishi mumkinligini esdan chiqarmang. Hozir birinchi col’imizning hajmi 1, keyingisiniki 8 va ohirgisiniki 3. Jami: 12. Shuning uchun ham ular bir qatorga sig’ishmoqda. Aks holda sig’maganlari yangi qatordan joy olishar edi.


<div class='container'>
    <div class='row'>
        <div class='col-6 bg-success'>1</div>
        <div class='col-6 bg-warning'>2</div>
        <div class='col-3 bg-danger'>3</div>
    </div>
</div>

Mana bunga misol


<div class='container-fluid'>
    <div class='row'>
        <div class='col-6 bg-success'>1</div>
        <div class='col-6 bg-warning'>2</div>
        <div class='col-3 bg-danger'>3</div>
    </div>
</div>

E’tibor bering konteynerimiz butun sahifadan joy olmagan. Chap va o’ng tomonda bo’shliqlar bor. Bunaqa bo’lmasligi uchun container sinfi o’rniga, container-fluid sinfini ishlatish mumkin


Mana endi maketimiz eniga brauzerning 100% joyini egallamoqda.


RESPONSIVE DESIGN
(o’zb: Moslashuvchi dizayn, рус: Адаптивный дизайн)

Responsive design [responsiv dizayn] degan tushuncha bor – bu foydalanuvchi ekraniga moslashuvchi dizayn degani. Foydalanuvchi dasturingizni kichik smartfon orqali ochishi mumkin, planshet orqali, noutbuk, yoki keng monitorli kompyuter orqali. Bizning dasturimiz har qanaqa ekranga moslasha olishi kerak.

Bazida shogirdlarim bilan birga loyiha qilamiz. Men faqat g’oyani beraman, kodni esa ular yozadi. Kodni qanday to’g’ri yozish haqida maslahat berishim mumkin, dasturchilarni boshqarishim mumkin, lekin kodni 100% ular yozishlari kerak. Shunda ular yaxshigina tajriba ortirishadi.

Shunaqa loyihalardan biri boshqar.com. Ushbu dastur orqali do’kon egalari – omborda mahsulotlar qancha qolganligi, ularni qancha miqdorda sotib olinganligi, qachon, kimga qancha mahsulot sotishgani, kimga qarzga berishgan-u, qancha o’zlari qarzdor ekanligini, qancha foyda ko’rishgani va shunga o’xshash kerakli ma’lumotlarni bilishlari mumkin.

Responsive dizayn nima ekanligini bilish uchun ushbu dasturga e’tibor berishimiz mumkin.


Bu – dasturning mening kompyuterimdagi ko’rinishi.


Keling brauzerim hajmini qisqaroq qilaman. Buning uchun klaviaturadagi F12 tugmasini bosaman. Konsol paydo bo’ladi. Ushbu konsol hajmini o’zgartirish orqali brauzer hajmini ham kontrol qilishimiz mumkin.

E’tibor bering: ekranimiz kichikroq bo’lgani uchun o’ng tomondagi blok yo’qoldi.


Yanada ekranimizni kichikroq qilamiz. Endi chap tomondagi menyu yo’qolib, yuqoridagi menyu oldidan keyingi tugmacha paydo bo’ldi




Ushbu belgiga bossak chapdan menyu paydo bo’ladi.


Ekranni yanada qisqartiramiz. Yuqoridagi menyu o’rniga ko’k ustun paydo bo’ldi. Quyirog’dagi card’larimiz esa tagma-tag tushib qoldi.

Tushunib turganingizdek ushbu dastur dizayni – barcha xajmdagi ekranlarga moslashib ketaveradi. Manashu narsa – responsive design deyiladi.

Dastur mobil qurilmalarda ham yaxshi moslasha olganligi uchun, uni osongina mobil ilova (рус: мобильное приложение, eng: mobile app) ga ham aylantirishimiz mumkin.

Bootstrap – mana shunaqa kuchli freymvrkdir! Gapimni tasdiqlash uchun ushbu dasturning mobil variantiga ham yo’llanmas qo’yaman:




MOBILE FIRST

Bootstrap da 5 hil hajm bor.

Extra Small [exta smol] – juda kichik ekranlar uchun. Misol uchun smartfon ekrani.

Small [smol] – kichik ekranlar uchun. Misol uchun smartfon ekranining yotqizilgan, ya’ni albom shaklida.

Medium [midiem] – o’rta hajmlik ekran. Misol uchun planshet ekrani.

Large [laj] – Katta ekran. Misol uchun noutbuk ekrani.

Extra Large [exta laj] – Juda katta ekran. Misol uchun kompyuter monitori.

Extra Extra Large [exta exta laj] – Juda Juda katta ekran. Biz ko’rayotgan bootstrapning 4-versiyasida bunaqa variant yo’q. Leking yaqinda keyingi, 5-versiyasi chiqadi va unda bootstrap dasturchilari ushbu ekran variantini ham qo’llashni va’da qilishgan.

Bootstrap’da col sinfini yozganimizda – aslida u mobil qurilmalar uchun mos keladigan hajmdir. Shuning uchun ham bootstrap freymvorki – mobile first [mobayl fest] loyihalashtirish turiga kiradi. Ya’ni barcha qilayotgan ishingiz mobil qurilmalar uchun bo’lib, katta qurilmalar uchun qo’shimcha kod yozishingiz kerak bo’ladi.


<div class='container-fluid'>
    <div class='row'>
        <div class='col-12 bg-success'>1</div>
        <div class='col-12 bg-warning'>2</div>
        <div class='col-12 bg-danger'>3</div>
    </div>
</div>

Kelinglar, 3 ta col yaratamiz. Ularning hajmi 12 ga teng bo’lsin. Brauzer hajmini kichik qilamiz. Tahminan mobil qurilmalardagidek




Horiz ekranni kattaroq qilsak ham hech narsa o’zgarmaydi.


<div class='container-fluid'>
    <div class='row'>
        <div class='col-12 col-sm-4 bg-success'>1</div>
        <div class='col-12 col-sm-4 bg-warning'>2</div>
        <div class='col-12 col-sm-4 bg-danger'>3</div>
    </div>
</div>

Endi, qo’shimcha sinflar joylaymiz. Boshida har birining hami 12 bo’lsin dedik. Lekin, sm – ya’ni small hajmida esa div’larimiz hajmi 4ga o’zgarsin demoqdamiz.


Mobile variantimizda hech qanaqa o’zgarish sezmadik. Chunki mobil qurilmalarda 12 hajmi qolishini aytganmiz.


Ekranni sal kattaroq qilsak, aynan sm hajmiga kelgach, ular bir qatorga sig’ishmoqda. Ya’ni biz ikki hil ekran uchun – ikki hil ko’rinish hosil qildik.


<div class='container-fluid'>
    <div class='row'>
        <div class='col-12 col-sm-4 col-md-6 bg-success'>1</div>
        <div class='col-12 col-sm-4 col-md-6 bg-warning'>2</div>
        <div class='col-12 col-sm-4 col-md-6 bg-danger'>3</div>
    </div>
</div>

Kodimizni qiyinlashtiramiz: Medium hajmida – har bir elementimiz yarim qatorni egallasin.


Ko’rib turganingizdek brauzer oynasning hajmini o’zgartirganimizda, bizning sahifamiz ham o’zgarib bormoqda.


<div class='container-fluid'>
    <div class='row'>
        <div class='col-12 col-sm-4 col-md-6 col-xl-2 bg-success'>1</div>
        <div class='col-12 col-sm-4 col-md-6 col-xl-2 bg-warning'>2</div>
        <div class='col-12 col-sm-4 col-md-6 col-xl-2 bg-danger'>3</div>
    </div>
</div>

Keling eng katta oynalar uchun ham moslaymiz.


Eslab qolamiz. Mobile first ning ma’nosi ham shu: sm, md, lg va xl kabi qo’shimcha qo’shmasak, bu mobil qurilmalar uchun degan ma’noni beradi.

Bu bilimlar bilan biror loyiha chizib boshlasak bo’ladi. Keyingi darsimizda qo’ozda biror qoralama chizib olib, keyin shu narsani bootstrapda yozishga harakat qilamiz.

Mavzudan chetlashsamda bir narsani aytib o’tmoqchiman: kecha menga bir odam yordam so’rab yozdi. “Ko’pchilikka bilim ulashib yaxshi ish qilayapsiz, menga ham yordamiz kerak”, – deb qarz so’rabdi. Qizig’i, u 1000$ emas, aynan 1024$ so’rabdi. Menimcha u odam allaqachon dasrlarimni ko’rib boshlagan 😉

34+

“#8 – Bootstrap. 2-Qism. Veb-dasturlash kursi” ga 5 fikr qoldirilgan

  4. UzBek92

    Assalomu alaykum Akmal aka. Shu kodni bajarilishiga e’tibor bering iltimos, oldindan rahmat.
    for( ; ; ) {
    print “Assalomu alaykum Akmal aka ”
    print “sizning instagramingizga loginuzbek92 nomidan ”
    print “27 va 30 noyabr kunlari xabar yozgandim ”
    print “sizdan iltimos shu xabarimga javob yozsangiz ”
    print “ishlaringizga omad oldindan rahmat\n”
    }

    3+

Fikr bildirish