#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi

bootstrap 3 thumb
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 111

Tasavvur qiling dastur yaratmoqchisiz. Kitoblar haqidagi dastur. Bu yerda har hil janrlardagi kitoblar saqlansin va istagan odam uni o’qishi mumkin bo’lsin.
Ushbu darsda o’zimiz bo’lajak dasturimizning qoralamasini chizib olamiz, so’ngra uni bootstrap orqali ro’yobga chiqaramiz.

image

Odatda dasturlarning yuqori qismi bor. Uni ingilizchasiga header deymiz. Ruschada shapka (шапка) deyish urf bo’lgan. O’zbekchasiga bosh qismi deylik.
Bu yerda odatda menyu, ya’ni dasturimizning har hil qismlariga yo’llanmalar navigatsiyasi joylashadi. Shuningdek dastur nomi va lo­gotipi ham bo’lishi mumkin.

image 1

O’rtada dasturimizning asosiy qismi boshlanadi. Odatda u ikki qisimdan iborat bo’ladi. Yon qismi (ingilizchasiga sidebar) va kontent qismi.
Yon qismida janrlarimizni yozaylik. Misol uchun Komedia, Drama, Klassika, Fantastika va hokazo. Janrlarni boshqacharoq qilib kategoriyalar ham deb atashimiz mumkin.

image 2

Ostki qismimizda footer bo’ladi. Ruschasiga esa Подвал, ya’ni yerto’la deyishadi. O’zbekchasiga ostki qism deyaveraylik.
Bu barcha qismlar odatda statik bo’ladi. Ya’ni har doim bir hil ko’rinishda bo’lishadi. Faqatgina kontent qismimiz o’zgarib turishi mumkin.
Misol uchun dasturni ochganimizda kitoblar ro’yxati tursin. Har bir kitobning rasmi, nomi va kichik izohchasi bo’lsin. Ostida “O’qish” yozuvi bo’lgan tugmachasi ham bo’lsin.

image 3

“O’qish” tugmasiga bossak, kontent qismimizda – kitoblar ro’yxati o’rniga, o’qimoqchi bo’lgan kitobimizning matni chiqsin.
Qoralamasini chizib oldik. Deylik bu biror biznesmenning bizga bergan buyurtmasi. Endi dizayner, photoshop, yoki shunga o’xshash boshqa dasturda, ushbu qoralamaga qarab chiroyli dizayn chizib beradi. Biznesmenga dizayn yoqsa – uni qabul qiladi, aks holda biror joyini o’zgartirish kerakligini aytadi.
Dizayn tasdiqlangach dizayner bootstrapda uning maketini yozib beradi.

INDEX.HTML

index.html faylini yaratamiz. Boshlang’ich teglarni yaratamiz. Bootstrapni ulaymiz.

Birinchi novbatta body’ning ichida konteyner yasashimiz kerak.

Eslaymiz: Konteyner ichida faqat row bo’lishi mumkin. Biror o’zimizning kontent, komponentlar va hokazoga o’rin yo’q.
Keling o’sha row’ni yaratamiz.

Row ichida esa faqat col bo’lishi mumkin, boshqa kontent, masalan matn, rasmlar, yoki bootstrap komponentlari bo’lmaydi.
Shuning uchun, keling row ichida col yaratamiz.

Col ichida istalgancha teglar yozsak bo’ladi. Bootstrap bilan ishlayotganda barcha ekranda ko’rinib turgan elementlar aynan col ichida bo’lishi kerak.

Qoralamamizdan ko’rinib turibdiki bu yerda header qismi bo’lish kerak. Ilgari ko’pchilik bu yerda div tegini yaratib, unda header nomli id ko’rsatishar edi. Keyinroq bu maqsad uchun alohida teg o’ylab topildi. Demak header tegi div kabi hech narsani bajarmaydi, u brauzerga dasturning tepa qismi qayerdaligini aniqlashga yordam beradi.

Header ichida kelinglar navigatsiyamiz bo’lsin. Boostrapdan navbar nomi componentni topib, header ichiga joylaymiz. Shu o’rinda nav tegi o’rniga ilgari div ishlatardik. Unga nav nomli id ko’rsatardik. Lekin ohirgi yillarda w3c ko’p uchraydigan ID larni alohida teg qilib chiqarmoqda. Google va Yandex’ga o’xshash qididiruv tizimlari uchun bu juda qulay. Ular veb-dasturingizning qaysi qismida boshqa bo’limlarga yo’llanmalar borligini tushunib olishadi.

HTML dasturlash tili emas, unda chalkashish juda oson. Shuning uchun ham har bir qadamingizda izoh qoldirib keting. Ohirida rahmat deysizlar.

image 4
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 112

Navbar’imiz oq bo’ldi. Keling boshqa rang variantini tanlaymiz.

image 5
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 113

E’tibor bering bootstrap keltirgan misolda “navbar-dark” va “bg-dark” sinflari ishlatilgan, bizda esa “navbar-light” va “bg-light”. Demak, light so’zlari o’rniga dark so’zini yozishimiz – yetarli.

image 6
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 114

Tekshiramiz, navbar rangi o’zgardi.
Navbar’da menyu yo’llanmalari va qidiruv formasini ko’rishingiz mumkin.

image 7
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 115

Ekranni kichikroq qilsak menyu responsive ekanligini ko’ramiz. Ya’ni, menyu elementlari yo’qolib, o’rniga uch qator belgisi paydo bo’lmoqda.

image 8
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 116

Ustiga bossak navbar “ochilib”, yashiringan elementlar ko’rinadi.

image 9
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 117

Ekranni kengaytiiramiz, 1000 pikselga yaqinlashgach, ya’ni LG hajmida – menyu yana keng holatda ko’rinmoqda. Bu holat uchun navbar-expand-lg sinfi javob beradi.

Keling ushbu sinf ohirini lg emas, md deb yozaylik.

image 10
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 118

Ko’rib turganingizdek, endi md hajmida menyumiz keng variantda ko’rinmoqda. Adashmasam expand so’zi ingiliz tilidan kengaytirmoq deb tarjima qilinadi.



Maketning boshqa qismiga o’tishdan oldin, a tegi ichidagi “Navbar” so’zini “Kitoblar”ga o’zgartiramiz. Home yo’llanmasini esa, li tegiga qo’shib – umuman olib tashlaymiz.

image 11
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 119

Bitta row, ya’ni bir qatorni tugatdik.

SIDEBAR

image 12
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 120

Chizmamizga boqamiz, endi sidebar va kontent uchun yana bir row ochishimiz kerak.

Keling, yangi qatorimizni main, ya’ni asosiy qator deb nomlaylik.


Row ichida faqat col bo’lishi mumkin, keling uni yaratamiz.

image 13
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 121

  • An active item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one

Endi, bootstrap’ning List Group komponentindan nusxa olib qo’yamiz


  • Detektiv
  • Klassika
  • Fantastika
  • Komediya
  • Romantika

Matnlarni o’zimizga moslab olamiz, keling janrlarni yozaylik. Active sinfi ro’yxat punkti fonini ko’k rangga bo’yaydi. Uni masalan Klassika janri punktiga ko’chiramiz

image 14
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 122

Col’imiz butun bir qatorni egalladi.


  • Detektiv
  • Klassika
  • Fantastika
  • Komediya
  • Romantika

Keling, uning hajmini 2 qilamiz. Buning uchun col sinfi o’rniga col-2 sinfini ishlatamiz.

image 15
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 123

Hajm o’zgardi.
E’tibor bering, ushbu qatorimiz yuqori qatorga «tegib» turibdi. Main qatorining yuqori qismiga margin-top ko’rsatish orqali ularning orasiga bo’shliq qo’yaylik.
Margin ushun bootstrapda bir qancha sinflar mavjud, ular «m» harfidan boshlanadi. Keyin chiziqcha va uning hajmi sifadida 0 dan 5 gacha bo’lgan raqamlar ishlatiladi. Agar margin xususiyatini barcha tomonlarga emas, yuqori, o’ng, ostki qism, yoki chap tomonlarning biriga bermoqchi bo’lsangiz — unda sinf sifatida «m» harfidan so’ng: top, right, bottom, yoki left so’zlarining birinchi harflarini ishlatish mumkin. Misol uchun «ml» nomini margin-left deb tarjima qilish mumkin.


  • Detektiv
  • Klassika
  • Fantastika
  • Komediya
  • Romantika

Biz qatorimizning yuqori qismiga margin xususiyatini bermoqchimiz. Buning uchun row sinfi yonidan mt-5 sinfini qo’shaylik

image 16
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 124

Qatorimiz juda ham pastga tushib ketdi.


Keling mt-2 sinfini berib ko’ramiz.

image 17
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 125

Bu esa juda ham kichik bo’shliq.


4 beramiz.

image 18
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 126

Bu safar aynan biz hohlagandek bo’shliq qoldi.

Ko’rib turganingizdek dizayner bo’lish uchun erinmaydigan odam bo’lish kerak. Ular kichik bir nuqta uchun ham ancha vaqt ketkazishlari mumkin. Har hil variantlar qilib ko’rishadi, yoqqan variantni qoldirishadi. Dasturchi bo’lish uchun esa aksi – o’taketgan e’rinchoq odam bo’lish kerak. Shunda ko’p ishlarni avtomatlashtirishga harakat qilishadi. Lekin, kim bo’lishingizdan qat’iy nazar bilim olishga hech qachon erinmang!

Shu o’rinda miyyamiz haqida bir ma’lumot: biz hamma narsaning ostida ma’no, takrorlanuvchi qonun, qolip qidiramiz. Shuning uchun ham biz yomon yashashimizga kimnidir aybdor qilamiz, ota-ona, o’qituvchi, davlat, Putin yoki yaxudiylar. Amerika butun jahon terroristlarni pul bilan ta’minlashadi deyilsa – ishonamiz. Ularni umuman olganda odamzod dushmani deymiz. Lekin ularning dollarini yaxshi ko’ramiz, qo’shiqchilarini sevamiz, kinolarini esa yotib olib ko’ramiz. Osmonda 700 896 312 567 ta yulduz bor deyishsa — ishonamiz. «Eshik bo’yalgan, suykalmang» yozuvini o’qisak — tekshirib ko’ramiz. Qo’limiz bilan ushlab ko’rib «Rostdan ham bo’yalgan ekan» deymiz.

Miya bir hillikni yaxshi ko’radi va hamma narsadan ma’no qidiradi. Shuning uchun ham dizaynda bitta rang ishlatdingizmi, uni qayta-qayta ishlating. Har safar miya shu rangni topganida — undan bir hillikni, qolip borligini va miya o’sha qolipni topa olganligidan huzur qiladi, dizayn chiroyli ko’rinadi.

Agar ko’plab ranglar ishlatilsa, ularda biror tartib, qonun bo’lmasa — miya dizayndan qolib topla olmay, o’zidan o’zi hafa bo’ladi. Lekin, o’zini qattiq sevgani uchun — aybni dizayndan qidiradi. U ko’ziga bajkana va hunuk ko’rinadi. Agar dizayn ranglari — logotip ranglari bilan bir bo’sa — miya uchun ma’no ham topiladi. «Dizayner logotip ranglaridan foydalalanibdi» deb, buni anglay olgani uchun, o’zining donoligidan fahrlanadi, mazza qiladi. Dizayn ko’ziga juda chiroyli ko’rinadi.

Bo’shliqlar ham huddi shunday, bir joyda mt-4 ishlatdingizmi, boshqa joylarda ham aynan 4 hajimlik bo’sh joy qoldirishga harakat qiling.

KONTENT QISMI

image 19
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 127

O’ng tomonimizda kontent qismi bor.


  • Detektiv
  • Klassika
  • Fantastika
  • Komediya
  • Romantika

Uning uchun ham bir col yasaylik. Bootstrap’da bir qator 12 col hajmidan iborat. Shuning 2 hajmini chap tomon uchun ishlatdik. Demak, o’ng tomon uchun col-10 sinfini ishlatamiz

image 20
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 128

Uning ichida kitoblarimiz turishi kerak. Buning uchun Cards componentini ishlatishni taklif qilaman.


  • Detektiv
  • Klassika
  • Fantastika
  • Komediya
  • Romantika
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Bootstrap saytidagi misoldan nusxa olamiz.

image 21
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 129

Internetdan biror kitob rasmini topamiz, img papkasini yaratamiz va rasmni o’sha papkaga joylaymiz.

 
    
  • Detektiv
  • Klassika
  • Fantastika
  • Komediya
  • Romantika
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish

img tegining src atributida uch nuqta qo’yilgan, uning o’rniga rasmimizga yo’l ko’satamiz. Alt atributiga esa «kitob rasmi» deb yozib qo’yamiz. «Go somewhere» so’zi o’rniga «O’qish» deb yozamiz. «Card title» o’rniga «O’tkan kunlar» deb yozaylik.

image 22
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 130

Yaxshi, endi keling kitoblar ko’p bo’lsin.


  • Detektiv
  • Klassika
  • Fantastika
  • Komediya
  • Romantika
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish

Buning uchun card sinfiga ega div’dan nusxa ko’chirib bir necha bor qo’yamiz.

image 23
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 131

Afsuski biz istaganimzdek bo’lmadi. Kitoblar yonma-yon chiqishi kerak edi. Lekin card komponenti div tegida joylashganiga e’tibor bering. Esingizda bo’lsa div bu block elementi. Block elementlari esa butun qatorni egallashadi. Shuning uchun ham kitoblarimiz tagma-tag joylashishdi.
Ular yonma-yon bo’lishi uchun har bir card’ni alohida col ichiga olishimiz mumkin. Lekin card’larimiz shundoq ham col ichida joylashgan. Col ichida esa yana col ochib bo’lmaydi. Eslab ko’ramiz kol ichida yoki biror bizning kontentimiz, yoki row sinfiga ega bo’lgan teg bo’lishi mumkin. Hozir bu ishni bajarsak — rosa chalkashib qolishimiz mumkin.


  • Detektiv
  • Klassika
  • Fantastika
  • Komediya
  • Romantika
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish

Chalkashmaslik uchun ko’proq izohlar yozamiz. Yaratgan row’ga «Kitoblar qatori» deb izoh qoldirdik. Kitobni ham col-3 sinfiga ega div ichiga oldik. E’tibor bering card’ning style atributida uning hajmi berilgan edi. Uni ham olib tashladik.


  • Detektiv
  • Klassika
  • Fantastika
  • Komediya
  • Romantika
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish

Endi kitoblarimizni ko’paytiramiz.

2
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 132

Biz istagandek bo’ldi. Lekin pastdagi kitoblar, yuqoridagilariga tegib turibdi. Keling kitoblarning ostki qismiga bo’shliq beramiz. Sal oldinroq 4 hajmdagi margin ishlatgan edik. Bo’shliqlar hajmi bir bo’lishi kerakligi haqida ham gapirgan edik.

            
            
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish

Kitoblarimizga mb-4 sinfini berdik.

3
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 133

Kitoblarimizning orasi ochildi.

image 24
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 134

Agar ekran hajmini kichaytirsak, u mobil qurilmalarga moslashmaganligini tushunamiz. Keling, mobil variantda janrlarimiz va kontent qismi yonma-yon bo’lmasin, janrlar to’liq bir qatorni egallashsin. Ostidan esa kitoblarimiz chiqadi.

    
    
  • Detektiv
  • Klassika
  • Fantastika
  • Komediya
  • Romantika
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish

SideBar’ni topib olamiz. E’tibor bering agar izohlar qoldirmaganimizda, uni topish ancha qiyin bo’lgan bo’lardi. U yerda col-2 sinfi ko’rsatilgan. Esingizda bo’lsa bu aslida mobil qurilmalar uchun bo’lgan hajm. Chunki bootstrapda avval mobil qurilmalarga vyorstka qilinadi, undan keyin katta monitorlar uchun moslanadi. Janrlarimiz butun ekranni olishi uchun unga col-12 sinfini beramiz.
Kontent qismimiz ham col-12 bo’lishi kerak.

image 25
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 135

Tekshiramiz. Hammasi yaxshi.

4
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 136

Ekranni kattalashtirsak ham col-12 hajmi qolayotganligini ko’ramiz.

image 26
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 137

Kelinglar md hajmiga kelib janrlarimiz va kontent qismi yonma-yon bo’lishsin

        
        
  • Detektiv
  • Klassika
  • Fantastika
  • Komediya
  • Romantika

Buning uchun janrlar md hajmiga kelib 2, kontent qismi esa 10 col hajmiga ega bo’lsin deb yozamiz.

image 27
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 138

Kichik, xs variantda ular ostma-ost turishibdi,

image 28
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 139

md hajmiga kelib esa ular yonma-yon tushishmoqda.

image 29
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 140

Kichik hajmlarda kitoblar ham o’qib bo’lmaydigan holatda. Chunki 4 ta kitob mobil ekranga sig’mayapti. Keling, mobil hajmda faqat bitta kitob sig’sin, sal kengayganda 2 ta, katta monitorlarda esa hozirgidek bir qatorda 4 tadan kitoblar sig’sin.

    
    
  • Detektiv
  • Klassika
  • Fantastika
  • Komediya
  • Romantika
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish

Buning uchun har bir kitob’ning col-3 sinfi o’rniga «col-12 col-sm-6 col-lg-3» sinflarini joylaymiz.

image 30
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 141

Mobil qurilmalar uchun ko’rinish (xs)

image 31
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 142

Mobil qurilmalarining albom shaklida (sm)

image 32
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 143

Planshetlarda (md)

6
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 144

Planshetlarning albom shaklida (lg)

Hammasi yaxshi, faqat xs va sm variantlariga e’tibor bering. Ularning yuqori qismi janrlarga tegib qolgan.

        
        

Buning uchun kitoblar qatoriga ham mt-4 sinfini beramiz.

image 33
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 145

Kichik hajmlarda yaxshi ko’rinmoqda.

7
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 146

Lekin bo’shliq barcha hajmlarga berilgani uchun, katta hajmlarda kitoblar janrlarga nisbatan pastroqdan boshlanmoqda. Bu yaxshi emas, oldinroq ular bir qator turishgan edi.

        
        

Bu hatoni to’g’irlash uchun, yuqoridagi bo’shliq md hajmiga kelib 0 ga teng bo’lsin dedik. Ya’ni xs va sm hajmlarida margin top 4 ga teng, sm hajmidan boshlab esa margin top umuman yo’q.

8
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 147

Xs va sm hajmlarida bo’shliq bor, lekin md hajmiga kelib bo’shliq yo’qolmoqda. Ajoyib.

image 34
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 148

Chizmamizga boqamiz, kitoblar ostidan Pagination qatori joylashgan ekan.


  • Detektiv
  • Klassika
  • Fantastika
  • Komediya
  • Romantika
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish

Kitoblar qatori tugagach, pagination qatorini boshlaymiz. Nega aynan qator? Nega col emas? Chunki kitoblarimiz col va ular yonma-yon joylashishgan. Faqatgina ekranga sig’magani yangi qatorga tushmoqda. Pagination’ni ham col qilsak u kitoblarimiz yonida turadi, agar ekranga sig’sa albatta. Faqat u ekranga sig’masagina yangi qatordan tushadi. Bizga esa pagination har qanday vaziyatda yangi qatordan boshlanishi muhim, shuning uchun ham uning o’zini alohida bir qatorga olmoqchimiz.

image 35
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 149

Boostrap saytidan Pagination komponentining o’zimizga yoqqan variantidan nusxa olamiz. Savol: ushbu komponentni hozirgina yaratgan row ichiga joylay olamizmi? Yo’q, row ichida faqat col bo’lishi mumkin. Uning ichida esa istagan kod yoza olamiz.


  • Detektiv
  • Klassika
  • Fantastika
  • Komediya
  • Romantika
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish

row ichiga col ochib, uning ichiga bootstrap saytidan olgan pagination komponenti nusxasini qo’yamiz.

image 36
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 150

Pagination paydo bo’ldi. Men ataylabdan bir kitobni o’chirib tashladim. Lekin pagination baribir alohida qatorda ko’rinmoqda

FOOTER

        

        
        
All right reserved

Main qatori tugagach, footer qatorini, ichida bitta col uning ichida esa footer tegini yozamiz. Bu ham header va nav teglaridek, ilgari footer id’siga teng bo’lgan teglar o’rniga chiqarilgan — teg. Demak, header, nav va footer teglarining div’dan hech qanday farqi yo’q.

        

        
        
© All right reserved

Odatda bu yerda «copy right» belgisi bo’ladi. Uni qo’yish uchun html’ning maxsus belgilaridan foydalanish mumkin. Ushbu maxsus kodlar ampersand belgisi va nuqtali vergul oralig’iga joylashadi. Misol uchun © kodi, ekranga © belgisini chiqaradi. Quyidagi yo’llanma orqali shunga o’xshash boshqa kodlar bilan tanishib olishingiz mumkin:
https://www.rapidtables.com/web/html/html-codes.html

        

        
        
© All right reserved

Footer juda ingichka bo’lib qoldi, keling unga ichki bo’shliq beramiz (p-5), fon rangini qora qilamiz, matn rangini esa oq. Birinchi faylimiz tugadi. Index.html faylimizni tugatdik.

image 37
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 151

BOOK.HTML

image 38
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 152

Endi ikkinchi sahifani yaratishimiz kerak.

image 39
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 153

index.html faylimizdan nusxa olamiz va uni book.html deb nomlaymiz.


    
        Kadirov Dev
        
        
                
    
    
        
        
  • Detektiv
  • Klassika
  • Fantastika
  • Komediya
  • Romantika
© All right reserved

Ushbu faylni ochamiz. Kontent qismining ichidagi barcha narsalarni o’chiramiz.

                

O'tkan kunlar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et cursus neque, in pretium lectus. Nunc malesuada porttitor ex, et tincidunt tortor hendrerit in. Aenean purus felis, venenatis et diam eget, venenatis tincidunt sem. Suspendisse sed nisi vitae neque venenatis porta ac sed velit. Etiam commodo bibendum eleifend. Ut ullamcorper, sem sit amet pharetra molestie, orci urna suscipit neque, ut luctus enim leo ac leo. In mollis turpis sem, et imperdiet metus dapibus et.

Proin ultrices quam neque, vitae lacinia turpis molestie at. Quisque bibendum, eros ut placerat venenatis, velit purus varius diam, nec dictum eros nibh in elit. Maecenas sed risus et lorem malesuada rutrum vitae sed odio. Aenean dapibus, purus sed commodo vulputate, lectus est euismod lacus, commodo ornare velit enim vitae massa. In eu velit vel ipsum volutpat fermentum non eget purus. Vestibulum ut iaculis velit. Integer feugiat eleifend tellus quis feugiat. Suspendisse massa dui, scelerisque eu urna id, vehicula gravida odio. Nam at sem augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat feugiat tempus. Cras elementum sapien volutpat erat volutpat, eu interdum nibh ultricies. Morbi condimentum felis in ante bibendum convallis a vel nunc. Phasellus volutpat neque sit amet lorem ultrices, vel dictum nibh pretium. Vestibulum ac felis luctus lacus luctus venenatis id nec lorem. Mauris dignissim turpis sed turpis porttitor dapibus vel ullamcorper odio.

Integer eu dolor in tortor suscipit scelerisque vitae accumsan nibh. Proin sollicitudin nunc eget pellentesque laoreet. Curabitur vitae eleifend metus, quis tincidunt quam. Nam a elit in sem laoreet vulputate commodo a ligula. Donec sed eros id mi aliquet sollicitudin. Duis porta at arcu ut luctus. Vivamus vehicula neque venenatis sapien porttitor, in commodo elit tincidunt. Proin vestibulum, urna id lobortis fringilla, ante dolor tristique risus, a tincidunt felis augue in mauris. Suspendisse egestas tellus at finibus luctus. Sed hendrerit vel turpis volutpat venenatis. Maecenas congue, elit eu bibendum ornare, ipsum leo viverra tortor, quis rhoncus lacus sem a urna. Phasellus imperdiet sem nulla. Pellentesque tristique in magna quis congue. Fusce convallis felis non felis sodales dapibus.

Cras facilisis porta tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi sed orci lorem. Aenean porttitor nec neque vitae consectetur. Maecenas et urna scelerisque, consectetur nulla ut, pharetra metus. Donec consequat viverra elit vel ornare. Aliquam bibendum dui sed dictum viverra. Vivamus gravida tempor justo, id posuere nulla. Duis vitae est consequat, blandit elit sed, condimentum nulla. Phasellus ut diam justo. Proin vitae nunc eu eros congue ornare. Donec lacinia magna at elit porta eleifend. Praesent vehicula suscipit velit gravida suscipit.

Phasellus accumsan, tellus at porttitor aliquet, lacus justo tristique erat, id tincidunt nulla urna sit amet tortor. Nullam sed turpis dolor. Fusce eu maximus sapien. Mauris ut dui dui. Donec condimentum maximus diam, vel consectetur velit ultricies nec. Nunc bibendum mauris quis libero ullamcorper vehicula. Sed vehicula, quam ut pharetra suscipit, lectus felis lobortis augue, placerat aliquam ligula lectus fringilla justo. Nulla accumsan iaculis est, ut bibendum justo commodo ac. Phasellus id dolor at dolor convallis faucibus. Nulla imperdiet, neque non vulputate varius, sem dolor rutrum magna, consectetur iaculis nulla lectus hendrerit erat. Duis ante nisl, bibendum vitae velit ac, dignissim laoreet tortor. Pellentesque turpis justo, semper non nulla ac, scelerisque placerat risus. Vivamus mattis ullamcorper tellus. Morbi laoreet orci cursus posuere accumsan. Sed placerat mi sed est malesuada, sed placerat orci vestibulum.

Ularning o’rniga h1 tegi ichida kitob nomini yozamiz, ostidan bir nechta paragraflar yozamiz. P teglari ichidagi bu tushunarsiz so’zlar lotin tilidagi bir asardan olingan. U asarni hozirda Lorem ipsum deyishadi. Dizaynerlar bunaqa matnni placeholder sifatida ishlatishadi. Ya’niki bizga biror matn kerak, lekin u matnni «matn matn matn matn» ga o’xshab bir hil so’zlarni qayta-qayta yozsak u haqiqiy matnga o’xshamaydi. Aniq biror maqola olsak, misol uchun biror joydan yangilik ko’chirsak — buyurtmachi «Bu maqolani mening dasturimga nima aloqasi bor?» kabi savollar berishi mumkin. Lotin tili esa o’lik til, demak ushbu tilda biror narsa yozsak uning ma’nosiga hech kim e’tibor bermaydi va u istagan dastur dizayniga mos kelaveradi.
Rus tilida, bunaqa, hech qanday ma’noga ega bo’lmagan, maketni to’ldirish uchun ishlatiladigan matnlarni – «Текст рыба» deyiladi. Keyingi yo’llanma orqali «Lorem ipsum» matnlaridan istagancha paragraf generatsiya qilish mumkin: https://www.lipsum.com

Kitoblar

Shu o’rinda keling Kitoblar yo’llanmasining href atributini o’zgartiramiz. Panjara belgisi o’rniga «index.html» deb yozamiz. Endi, ushbu yo’llanmaga bosilsa index.html fayli ochiladi.

                    
                    
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish

index.html faylida ham, har bir kitobimizning «O’qish» yo’llanmasining href atributini o’zgartiramiz. U yerda book.html fayliga yo’llanma qo’yamiz. Endi bemalol index faydan book fayliga va aksincha book’dan index’ga o’tish mumkin.

Boostrap’ga o’xshash boshqa freymvokrlar ham bor. Lekin, hozirgi kunda bootstrap standart hisoblanadi, juda ko’p dizaynerlar va dasturchilar o’z loyihalari uchun aynan bootstrap’ni ishlatishadi. Ushbu maqola tayyorlanishi davomida bootstrapning 5-versiyasi ommaga taqdim etildi. Lekin uning ushbu maqolada keltirilgan 4-versiyasidan ko’p ham farqi yo’q. Agar darslarimiz orqali bootstrap’ni yaxshi tusunib olgan bo’lsangiz, yangi versiyada yana qanday qulayliklar paydo bo’lganini ham o’qib, bilib olishlarizni maslahat beraman. Men ham, sal keyinroq shu mavzuda maqola yozish niyatim bor.

Quyida bugun yozgan ikki faylimizning to’liq kodini qoldiraman:


    
        Kadirov Dev
        
        
                
    
    
        
        
  • Detektiv
  • Klassika
  • Fantastika
  • Komediya
  • Romantika
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
Kitob rasmi
O'tkan kunlar

Some quick example text to build on the card title and make up the bulk of the card's content.

O'qish
© All right reserved

index.html


    
        Kadirov Dev
        
        
                
    
    
        
        
  • Detektiv
  • Klassika
  • Fantastika
  • Komediya
  • Romantika

O'tkan kunlar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et cursus neque, in pretium lectus. Nunc malesuada porttitor ex, et tincidunt tortor hendrerit in. Aenean purus felis, venenatis et diam eget, venenatis tincidunt sem. Suspendisse sed nisi vitae neque venenatis porta ac sed velit. Etiam commodo bibendum eleifend. Ut ullamcorper, sem sit amet pharetra molestie, orci urna suscipit neque, ut luctus enim leo ac leo. In mollis turpis sem, et imperdiet metus dapibus et.

Proin ultrices quam neque, vitae lacinia turpis molestie at. Quisque bibendum, eros ut placerat venenatis, velit purus varius diam, nec dictum eros nibh in elit. Maecenas sed risus et lorem malesuada rutrum vitae sed odio. Aenean dapibus, purus sed commodo vulputate, lectus est euismod lacus, commodo ornare velit enim vitae massa. In eu velit vel ipsum volutpat fermentum non eget purus. Vestibulum ut iaculis velit. Integer feugiat eleifend tellus quis feugiat. Suspendisse massa dui, scelerisque eu urna id, vehicula gravida odio. Nam at sem augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat feugiat tempus. Cras elementum sapien volutpat erat volutpat, eu interdum nibh ultricies. Morbi condimentum felis in ante bibendum convallis a vel nunc. Phasellus volutpat neque sit amet lorem ultrices, vel dictum nibh pretium. Vestibulum ac felis luctus lacus luctus venenatis id nec lorem. Mauris dignissim turpis sed turpis porttitor dapibus vel ullamcorper odio.

Integer eu dolor in tortor suscipit scelerisque vitae accumsan nibh. Proin sollicitudin nunc eget pellentesque laoreet. Curabitur vitae eleifend metus, quis tincidunt quam. Nam a elit in sem laoreet vulputate commodo a ligula. Donec sed eros id mi aliquet sollicitudin. Duis porta at arcu ut luctus. Vivamus vehicula neque venenatis sapien porttitor, in commodo elit tincidunt. Proin vestibulum, urna id lobortis fringilla, ante dolor tristique risus, a tincidunt felis augue in mauris. Suspendisse egestas tellus at finibus luctus. Sed hendrerit vel turpis volutpat venenatis. Maecenas congue, elit eu bibendum ornare, ipsum leo viverra tortor, quis rhoncus lacus sem a urna. Phasellus imperdiet sem nulla. Pellentesque tristique in magna quis congue. Fusce convallis felis non felis sodales dapibus.

Cras facilisis porta tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi sed orci lorem. Aenean porttitor nec neque vitae consectetur. Maecenas et urna scelerisque, consectetur nulla ut, pharetra metus. Donec consequat viverra elit vel ornare. Aliquam bibendum dui sed dictum viverra. Vivamus gravida tempor justo, id posuere nulla. Duis vitae est consequat, blandit elit sed, condimentum nulla. Phasellus ut diam justo. Proin vitae nunc eu eros congue ornare. Donec lacinia magna at elit porta eleifend. Praesent vehicula suscipit velit gravida suscipit.

Phasellus accumsan, tellus at porttitor aliquet, lacus justo tristique erat, id tincidunt nulla urna sit amet tortor. Nullam sed turpis dolor. Fusce eu maximus sapien. Mauris ut dui dui. Donec condimentum maximus diam, vel consectetur velit ultricies nec. Nunc bibendum mauris quis libero ullamcorper vehicula. Sed vehicula, quam ut pharetra suscipit, lectus felis lobortis augue, placerat aliquam ligula lectus fringilla justo. Nulla accumsan iaculis est, ut bibendum justo commodo ac. Phasellus id dolor at dolor convallis faucibus. Nulla imperdiet, neque non vulputate varius, sem dolor rutrum magna, consectetur iaculis nulla lectus hendrerit erat. Duis ante nisl, bibendum vitae velit ac, dignissim laoreet tortor. Pellentesque turpis justo, semper non nulla ac, scelerisque placerat risus. Vivamus mattis ullamcorper tellus. Morbi laoreet orci cursus posuere accumsan. Sed placerat mi sed est malesuada, sed placerat orci vestibulum.

© All right reserved

book.html

28+