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.
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 logotipi ham bo’lishi mumkin.
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.
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.
“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.
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.
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 112
Navbar’imiz oq bo’ldi. Keling boshqa rang variantini tanlaymiz.
#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.
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 114
Tekshiramiz, navbar rangi o’zgardi. Navbar’da menyu yo’llanmalari va qidiruv formasini ko’rishingiz mumkin.
#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.
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 116
Ustiga bossak navbar “ochilib”, yashiringan elementlar ko’rinadi.
#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.
#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.
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 119
Bitta row, ya’ni bir qatorni tugatdik.
SIDEBAR
#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.
#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
#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.
#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
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 124
Qatorimiz juda ham pastga tushib ketdi.
Keling mt-2 sinfini berib ko’ramiz.
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 125
Bu esa juda ham kichik bo’shliq.
4 beramiz.
#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
#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
#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.
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.
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 130
Yaxshi, endi keling kitoblar ko’p bo’lsin.
Detektiv
Klassika
Fantastika
Komediya
Romantika
O'tkan kunlar
Some quick example text to build on the card title and make up the bulk of the card's content.
Buning uchun card sinfiga ega div’dan nusxa ko’chirib bir necha bor qo’yamiz.
#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
O'tkan kunlar
Some quick example text to build on the card title and make up the bulk of the card's content.
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
O'tkan kunlar
Some quick example text to build on the card title and make up the bulk of the card's content.
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.
O'tkan kunlar
Some quick example text to build on the card title and make up the bulk of the card's content.
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
O'tkan kunlar
Some quick example text to build on the card title and make up the bulk of the card's content.
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.
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 135
Tekshiramiz. Hammasi yaxshi.
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 136
Ekranni kattalashtirsak ham col-12 hajmi qolayotganligini ko’ramiz.
#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.
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 138
Kichik, xs variantda ular ostma-ost turishibdi,
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 139
md hajmiga kelib esa ular yonma-yon tushishmoqda.
#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
O'tkan kunlar
Some quick example text to build on the card title and make up the bulk of the card's content.
Buning uchun har bir kitob’ning col-3 sinfi o’rniga «col-12 col-sm-6 col-lg-3» sinflarini joylaymiz.
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 141
Mobil qurilmalar uchun ko’rinish (xs)
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 142
Mobil qurilmalarining albom shaklida (sm)
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 143
Planshetlarda (md)
#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.
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 145
Kichik hajmlarda yaxshi ko’rinmoqda.
#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.
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 147
Xs va sm hajmlarida bo’shliq bor, lekin md hajmiga kelib bo’shliq yo’qolmoqda. Ajoyib.
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 148
Chizmamizga boqamiz, kitoblar ostidan Pagination qatori joylashgan ekan.
Detektiv
Klassika
Fantastika
Komediya
Romantika
O'tkan kunlar
Some quick example text to build on the card title and make up the bulk of the card's content.
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.
#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
O'tkan kunlar
Some quick example text to build on the card title and make up the bulk of the card's content.
row ichiga col ochib, uning ichiga bootstrap saytidan olgan pagination komponenti nusxasini qo’yamiz.
#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
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.
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.
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 151
BOOK.HTML
#9 – Bootstrap. 3-Qism. Veb-dasturlash kursi 152
Endi ikkinchi sahifani yaratishimiz kerak.
#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
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
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.
O'tkan kunlar
Some quick example text to build on the card title and make up the bulk of the card's content.
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
O'tkan kunlar
Some quick example text to build on the card title and make up the bulk of the card's content.
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.
