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.
E qoyil. Raxmat ustoz. Dasturchi larga ish qolmas ekanda. Front endchilarga maza ekanda.
Илгари шунака ишларга куп вакт кетар эди. Энди бу нарсалар учун тайёр кодлар бор. Бу эса фронтэнд янада мураккаблашиб vuejs, react каби фреймворклар чикишига замин буладяпти
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…
Бу дарснинг факат биринчи кисми эди. Бу ерда компонентлар хакида гапирилди. Компонентларни шундок кучириб ишлатса булади. Лекин биз узимиз истаган дизайн килиш учун бутстрапнинг сетка тизимини билишимиз керак. Насиб бу энди иккинчи кисмда булади. Лекин хозир бу тизимга йулланма куяман, балким бирор нарса тушунарсиз: https://getbootstrap.com/docs/4.5/layout/grid/
Assalomaleyku. Juda zur tushunarli chiqipdi. Bir martaga tushunib oldim raxmat sizga. Php ni video darslarini yaqin orada chiqarasizmi.
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
Nima uchun title tegi head tegining ichiga yozilish kerak? kim biladi