#7 – Bootstrap. 1-Qism. Veb-dasturlash kursi

san'adagi maqolasi
(Darsning video variantini ushbu yo’llanma orqali ko’ring)

Biz dizayner emasmiz, har holda ushbu kurs dizaynerlik emas, dasturlash kursi. Dizaynerlar biladigan ko’plab teoriyalarni bilmasligimiz mumkin. Qaysi rang bir biriga mos keladi, elementlar orasida qancha bo’shliq qolishi kerak va shunga o’xshash narsalarni tushunmasligimiz mumkin. Shuning uchun xam ilgari dasturchi yaratgan dasturlar birdaniga bilinib turardi. O’zingiz biror dasturning tashqi ko’rinishini yaratib ko’ring, bu narsa juda murakkab ekanligiga amin bo’lasiz.

Hozirgi kunda dasturchilar ham chiroyli interfeysli, ya’ni tashqi ko’rinishi chiroyli bo’lgan dasturlar yarata olishadi. Chunki endi bootstrap [butstrap] degan freymvork bor.

Bootstrap – html, css va javascript tillarida yozilgan bo’lib, bizga kodimizni noldan yozmay, oldindan yozib qo’yilgan chiroyli komponentlarni ishlatish imkonini beradi.

Komponent – bu dastur, yoki freymvorkning kichik bir qismi.


Keling yangi html fayli yaratamiz. Endi ushbu html faylimizga bootstrapni ulash uchun, getbootstrap.com saytiga kiramiz. Paydo bo’lgan saytda ‘Get Started’ [get stated] tugmasiga bosamiz.


Avval bootstrapning CSS faylini ulashimiz kerak. Buning uchun CSS bo’limida yozilgan <link> tegidan nusxa olib, avvalroq yaratgan html faylimiz <head> teglari orasiga joylaymiz.


Endi Bootstrapning javaScript fayllarini ulash uchun, <script> teglaridan nusxa olib, faylimizning <head> teglari orasiga joylaymiz. Tabriklayman, siz ushbu oson yo’l bilan bootsrapni html faylingizga uladingiz.


COMPONENT

Bootstrap kichik qismlardan, ya’ni komponentlardan iborat. Keling ularni ko’ramiz. Saytning Component bo’limiga bossak, komponentlar ro’yxatini ko’rishimiz mumkin.


Misol uchun birinchisi – Alert. Ushbu komponent foydalanuvchiga kichick habar ko’rsatish uchun xizmat qiladi. Ushbu sahifada alert’larning bir necha variantini ko’rishimiz mumkin. Keling, qizil rangdagisidan nusxa olamiz. Uni <body> [badi] teglari orasiga joylaymiz. Bizda ham huddi shu element paydo bo’ldi. Html haqidagi darsimizni ko’rgansiz deb umid qilaman. Chunki html, yoki css darslarni ko’rmagan bo’lsangiz, hozir nima qilayotganimizni tushunishingiz qiyin bo’ladi.

E’tibor bering, ushbu teg oddiy, biz bilgan <div> tegi. Bu tegning alert va alert-danger [denja] sinflari bor. Ushbu sinf css xususiyatlari, esa biz avvalroq ulagan – bootstrap css faylida yozilgan. Ushbu <link> tegini o’chirib tashlasak, alertimiz oddiy matn bo’ladi – qoladi.


<div class="alert alert-danger" role="alert">
    Hatolik yuz berdi
</div>

Keling komponent matnini o’zgartiramiz.


<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
</div>

Alert sahifasini sal pastroq tushursaak yana boshqa variantlar ko’rish mumkin. Misol uchun ushbu variantni x [iks] tugmachasi orqali yopish mumkin


Badges [bedjs] – bu biror text yonidan kichik so’z, yoki son chiqarish


Breadcrumb [bredkram] – Non ushog’i. Odatda dasturning yuqori qismida joylashadi. Siz qaysi qismda turganingizni ko’rsatib turadi.


Buttons [batns] – Tugmachalar. Bu yerda har hil rangdagi tugmachalarni ko’rish mumkin.

Aslida bootstrap’da 8 hil asosiy ranglar bor:

  • Primary [praymari]
  • Secondary [sekondri]
  • Success [sakses]
  • Danger [denja]
  • Warning [wonin]
  • Info [info]
  • Light [layt]
  • Dark [dak]

Barcha komponentlar aynan shu ranglarni ishlatishadi.


<button type="button" class="btn btn-primary">Success</button>

Sinflarda ham struktura bor. Komponent nomini yozasiz, bizning holatimizda bu “btn” (button so’zidan qisqartma), keyingi sinfimiz esa komponent nomi, chiziqcha va uning rangi. Bizning holatimizda bu “btn-primary”. Usbu strukturani eslab qolsangiz, bootstrap saytidan foydalanmay, o’zingiz kod yozadigan bo’lasiz. Bu asta-sekin tajriba bilan keladi.


Keyingi komponentimiz Button Group [batn grup] – Tugmalar guruhi. Ko’rib turganingizdek ushbu komponent tugmalarni bir guruh qilib boshqalardan ajratib turadi.


Card [cad] – Rasm, text va tugmachadan iborat chiroyli komponent.


<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Bu kodni ko’chirganingizda, img tegining src [source] atributida, rasmga to’g’ri yo’l ko’rsatishni ununtmang.


Carousel – Juda ko’p ishlatiladigan kompinent. Bir nechta rasmlar aylanib turadi. Bu yerda ham source atributidagi uch nuqta o’rniga rasmga to’g’ri yo’l ko’rsatishni unutmang.


Collapse [kalaps] – yashiringan matnni ko’rsatish


Dropdowns [dropdavns] – Tugmachani bosganingizda bir qancha variantlar chiqadi va istaganingizni bosishingiz mumkin bo’ladi.


Forms [foms] – Foydalanuvchidan biror ma’lumot so’rash uchun formalar.

Bu yerda juda ko’p misollar keltirilgan.


<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

Keling, birortasidan nusxa olib,


<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Ismingiz</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Sharfingiz</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Jinsingiz</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            Erkak
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Ayol
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Dilshod
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Belgilang</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Barcha shartlarga roziman
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Ro'yxatdan o'tish</button>
    </div>
  </div>
</form>

uni o’zimizga moslaymiz


Input Group [input grup] – Button Group ga o’xshash komponent, faqat inputlar uchun


Jumbotron [jambatron] – Bunaqa komponent odatda dasturlarning kirish qimida bo’ladi


List group [list grup] – Biror ro’yxat


Media object [midia objekt] – Odatda izohlar qoldirish uchun ishlatiladi


Modal [modal] – Modal oyna. Ekranga biror habar chiqarish uchun ishlatiladi


Navigation [navigeshn] – Navigatsiya. Lekin ko’proq bu emas, keyingi komponent ishlatiladi


Navbar [navba] – Navigatsiya paneli. Har bir dasatur, yoki sayt uchun muhim komponent. Dasturning boshqa qismlariga yo’llanmalar to’plami


Pagination [pajineshn] – Sahifa raqamlari. Tasovvur qiling tizimda 5000 ta foydalanuvchi bor. Ularni barchasini bir sahifada chiqarish to’g’ri emas. 20 foydalanuvchini ekranga chiqarasiz. Pagination’ning 2 raqami bosilganda, keyingi 20 foydalanuvchini chiqarasiz va hokazo.


Popovers [popoves] – Tugmacha nima vazifa bajarishini foydalanuvchiga chiroyli shaklda ko’rsatamiz. Menimcha bunaqa komponentni o’zimiz bootstrapsiz yozmoqchi bo’lsak ancha vaqt yo’qotgan bo’lardik


Progress [progres] – Biror vazifa qaysi holatda ekanligini ko’rsatamiz.


Scrollspy [scrol spay] – Scroll qilinganda qaysi mavzuda ekanligimizni ko’rsatamiz.


Spinners [spines] – Biror ma’lumotni yuklayotganimizda ko’rsatamiz


Toasts [tosts] – Biror habarlarni ko’rsatish uchun yana bir chiroyli komponent


Tooltips [tultips] – Biror element uchun izoh


UTILITIES

Komponentlardan tashqari bootstrapda utility [utiliti] lar ham bor. Utility bu boshqa komponentlarga xizmat qiluchi kichik qismlar.

Misol uchun ramkalar uchun maxsus sinflar bor.


<div class='text-warning bg-dark'>Hello</div>

Matn va fon uchun ranglar: mant rangini sariq qilish uchun “text-warning” sinfini ishlatamiz, uning fonini qora qilish uchun esa “bg-dark” sinfini ishlatamiz.

Biror elementni yashirish uchun d-none sinfini ishlatamiz.


Dasturga video qo’yish


Elementlarga soya berish va shunga o’xshash boshqa xizmat sinflari bor.

12+

“#7 – Bootstrap. 1-Qism. Veb-dasturlash kursi” ga 7 fikr qoldirilgan

    • Akmal Kadirov Maqola avtori

      Илгари шунака ишларга куп вакт кетар эди. Энди бу нарсалар учун тайёр кодлар бор. Бу эса фронтэнд янада мураккаблашиб vuejs, react каби фреймворклар чикишига замин буладяпти

      10+
  2. usta_hasan

    Assalomu aleykum.
    Men darslaringizni doyim kuzatib boraman, ajoyib tushuntirgansiz, ayniqsa yozuv variyantini alohida koʻrsatgansiz.
    Sizni video kurslarizni koʻrib turib bir web prlojeniya tayorlamoqchi boʻldim. Afsuski biroz muammolarga duch keldim.
    Oʻrnatgan componentalarim keyinchalik oʻzgartirish kiritfanimda surilib ketayabti. Bootstrab qanday qilib ustunlarga boʻlib ishlash haqida tushuntirgan ekan ammo (til bilmaganim sababli uni) oʻrgana olmadim.
    Shuni keyingi darsda qisqacha tushuntirib oʻtsangiz juda qxursand boʻlardim. Oʻylaymanki juda koʻpchilik shunda qiynaladi…

    6+
    • Akmal Kadirov Maqola avtori

      Бу дарснинг факат биринчи кисми эди. Бу ерда компонентлар хакида гапирилди. Компонентларни шундок кучириб ишлатса булади. Лекин биз узимиз истаган дизайн килиш учун бутстрапнинг сетка тизимини билишимиз керак. Насиб бу энди иккинчи кисмда булади. Лекин хозир бу тизимга йулланма куяман, балким бирор нарса тушунарсиз: https://getbootstrap.com/docs/4.5/layout/grid/

      2+
    • Akmal Kadirov Maqola avtori

      PHP tilini ko’rsatgan edim umumiy dasturlash teoriyasidan farqini. Kim u darsni ko’rgan bo’lsa – bilimi bor. Faqat endi o’sha bilimni qanday ishlatishni o’rganish kerak. Buning uchun Symfony freymvorki bilan ishlab web dasturlar tuzishni o’rganamiz

      2+

Fikr bildirish