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.
INDEX.HTML
index.html faylini yaratamiz. Boshlang’ich teglarni yaratamiz. Bootstrapni ulaymiz.
<div class="container-fluid"> </div>
Birinchi novbatta body’ning ichida konteyner yasashimiz kerak.
<div class="container-fluid">
<div class="row"></div>
</div>
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.
<div class="container-fluid">
<div class="row">
<div class="col"></div>
</div>
</div>
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.
<div class="container-fluid">
<div class="row">
<div class="col">
<header></header>
</div>
</div>
</div>
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.
<div class="container-fluid">
<div class="row">
<div class="col">
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
</div>
</div>
</div>
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.
<div class="container-fluid">
<!-- header qatori boshlandi -->
<div class="row">
<div class="col">
<header>
<nav class="navbar">...</nav>
</header>
</div>
</div>
<!-- header qatori tugadi -->
</div>
HTML dasturlash tili emas, unda chalkashish juda oson. Shuning uchun ham har bir qadamingizda izoh qoldirib keting. Ohirida rahmat deysizlar.
Navbar’imiz oq bo’ldi. Keling boshqa rang variantini tanlaymiz.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">...</nav>
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.
Tekshiramiz, navbar rangi o’zgardi.
Navbar’da menyu yo’llanmalari va qidiruv formasini ko’rishingiz mumkin.
Ekranni kichikroq qilsak menyu responsive ekanligini ko’ramiz. Ya’ni, menyu elementlari yo’qolib, o’rniga uch qator belgisi paydo bo’lmoqda.
Ustiga bossak navbar “ochilib”, yashiringan elementlar ko’rinadi.
Ekranni kengaytiiramiz, 1000 pikselga yaqinlashgach, ya’ni LG hajmida – menyu yana keng holatda ko’rinmoqda. Bu holat uchun navbar-expand-lg sinfi javob beradi.
<nav class="navbar navbar-expand-md navbar-dark bg-dark">...</nav>
Keling ushbu sinf ohirini lg emas, md deb yozaylik.
Ko’rib turganingizdek, endi md hajmida menyumiz keng variantda ko’rinmoqda. Adashmasam expand so’zi ingiliz tilidan kengaytirmoq deb tarjima qilinadi.
<!-- header qatori boshlandi -->
<div class="row">
<div class="col">
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">Kitoblar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
</div>
</div>
<!-- header qatori tugadi -->
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.
Bitta row, ya’ni bir qatorni tugatdik.
SIDEBAR
Chizmamizga boqamiz, endi sidebar va kontent uchun yana bir row ochishimiz kerak.
<div class="container-fluid">
<!-- header qatori boshlandi -->
<div class="row">
<div class="col">
<header>
<nav class="navbar">...</nav>
</header>
</div>
</div>
<!-- header qatori tugadi -->
<!-- main qatori boshlandi -->
<div class="row">
</div>
<!-- main qatori tugadi -->
</div>
Keling, yangi qatorimizni main, ya’ni asosiy qator deb nomlaylik.
<!-- main qatori boshlandi -->
<div class="row">
<div class="col">
</div>
</div>
<!-- main qatori tugadi -->
Row ichida faqat col bo’lishi mumkin, keling uni yaratamiz.
<!-- main qatori boshlandi -->
<div class="row">
<div class="col">
<ul class="list-group">
<li class="list-group-item active" aria-current="true">An active item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
</div>
</div>
<!-- main qatori tugadi -->
Endi, bootstrap’ning List Group komponentindan nusxa olib qo’yamiz
<!-- main qatori boshlandi -->
<div class="row">
<div class="col">
<ul class="list-group">
<li class="list-group-item">Detektiv</li>
<li class="list-group-item active" aria-current="true">Klassika</li>
<li class="list-group-item">Fantastika</li>
<li class="list-group-item">Komediya</li>
<li class="list-group-item">Romantika</li>
</ul>
</div>
</div>
<!-- main qatori tugadi -->
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
Col’imiz butun bir qatorni egalladi.
<!-- main qatori boshlandi -->
<div class="row">
<div class="col-2">
<ul class="list-group">
<li class="list-group-item">Detektiv</li>
<li class="list-group-item active" aria-current="true">Klassika</li>
<li class="list-group-item">Fantastika</li>
<li class="list-group-item">Komediya</li>
<li class="list-group-item">Romantika</li>
</ul>
</div>
</div>
<!-- main qatori tugadi -->
Keling, uning hajmini 2 qilamiz. Buning uchun col sinfi o’rniga col-2 sinfini ishlatamiz.
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.
<!-- main qatori boshlandi -->
<div class="row mt-5">
<div class="col-2">
<ul class="list-group">
<li class="list-group-item">Detektiv</li>
<li class="list-group-item active" aria-current="true">Klassika</li>
<li class="list-group-item">Fantastika</li>
<li class="list-group-item">Komediya</li>
<li class="list-group-item">Romantika</li>
</ul>
</div>
</div>
<!-- main qatori tugadi -->
Biz qatorimizning yuqori qismiga margin xususiyatini bermoqchimiz. Buning uchun row sinfi yonidan mt-5 sinfini qo’shaylik
Qatorimiz juda ham pastga tushib ketdi.
<!-- main qatori boshlandi --> <div class="row mt-2">
Keling mt-2 sinfini berib ko’ramiz.
Bu esa juda ham kichik bo’shliq.
<!-- main qatori boshlandi --> <div class="row mt-4">
4 beramiz.
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
O’ng tomonimizda kontent qismi bor.
<!-- main qatori boshlandi -->
<div class="row mt-4">
<div class="col-2">
<ul class="list-group">
<li class="list-group-item">Detektiv</li>
<li class="list-group-item active" aria-current="true">Klassika</li>
<li class="list-group-item">Fantastika</li>
<li class="list-group-item">Komediya</li>
<li class="list-group-item">Romantika</li>
</ul>
</div>
<div class="col-10">
</div>
</div>
<!-- main qatori tugadi -->
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
Uning ichida kitoblarimiz turishi kerak. Buning uchun Cards componentini ishlatishni taklif qilaman.
<!-- main qatori boshlandi -->
<div class="row mt-4">
<div class="col-2">
<ul class="list-group">
<li class="list-group-item">Detektiv</li>
<li class="list-group-item active" aria-current="true">Klassika</li>
<li class="list-group-item">Fantastika</li>
<li class="list-group-item">Komediya</li>
<li class="list-group-item">Romantika</li>
</ul>
</div>
<div class="col-10">
<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>
</div>
</div>
<!-- main qatori tugadi -->
Bootstrap saytidagi misoldan nusxa olamiz.
Internetdan biror kitob rasmini topamiz, img papkasini yaratamiz va rasmni o’sha papkaga joylaymiz.
<!-- main qatori boshlandi -->
<div class="row mt-4">
<div class="col-2">
<ul class="list-group">
<li class="list-group-item">Detektiv</li>
<li class="list-group-item active" aria-current="true">Klassika</li>
<li class="list-group-item">Fantastika</li>
<li class="list-group-item">Komediya</li>
<li class="list-group-item">Romantika</li>
</ul>
</div>
<div class="col-10">
<div class="card" style="width: 18rem;">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
</div>
<!-- main qatori tugadi -->
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.
Yaxshi, endi keling kitoblar ko’p bo’lsin.
<!-- main qatori boshlandi -->
<div class="row mt-4">
<div class="col-2">
<ul class="list-group">
<li class="list-group-item">Detektiv</li>
<li class="list-group-item active" aria-current="true">Klassika</li>
<li class="list-group-item">Fantastika</li>
<li class="list-group-item">Komediya</li>
<li class="list-group-item">Romantika</li>
</ul>
</div>
<div class="col-10">
<div class="card" style="width: 18rem;">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
<div class="card" style="width: 18rem;">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
<div class="card" style="width: 18rem;">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
<div class="card" style="width: 18rem;">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
</div>
<!-- main qatori tugadi -->
Buning uchun card sinfiga ega div’dan nusxa ko’chirib bir necha bor qo’yamiz.
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.
<!-- main qatori boshlandi -->
<div class="row mt-4">
<!-- sideBar boshlandi -->
<div class="col-2">
<ul class="list-group">
<li class="list-group-item">Detektiv</li>
<li class="list-group-item active" aria-current="true">Klassika</li>
<li class="list-group-item">Fantastika</li>
<li class="list-group-item">Komediya</li>
<li class="list-group-item">Romantika</li>
</ul>
</div>
<!-- sideBar tugadi -->
<!-- kontent boshlandi -->
<div class="col-10">
<!-- kitoblar qatori boshlandi -->
<div class="row">
<!-- kitob boshlandi -->
<div class="col-3">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
</div>
<!-- kitoblar qatori tugadi -->
</div>
<!-- kontent tugadi -->
</div>
<!-- main qatori tugadi -->
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.
<!-- main qatori boshlandi -->
<div class="row mt-4">
<!-- sideBar boshlandi -->
<div class="col-2">
<ul class="list-group">
<li class="list-group-item">Detektiv</li>
<li class="list-group-item active" aria-current="true">Klassika</li>
<li class="list-group-item">Fantastika</li>
<li class="list-group-item">Komediya</li>
<li class="list-group-item">Romantika</li>
</ul>
</div>
<!-- sideBar tugadi -->
<!-- kontent boshlandi -->
<div class="col-10">
<!-- kitoblar qatori boshlandi -->
<div class="row">
<!-- kitob boshlandi -->
<div class="col-3">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-3">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-3">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-3">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-3">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-3">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-3">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-3">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
</div>
<!-- kitoblar qatori tugadi -->
</div>
<!-- kontent tugadi -->
</div>
<!-- main qatori tugadi -->
Endi kitoblarimizni ko’paytiramiz.
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 boshlandi -->
<div class="col-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
Kitoblarimizga mb-4 sinfini berdik.
Kitoblarimizning orasi ochildi.
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.
<!-- sideBar boshlandi -->
<div class="col-12">
<ul class="list-group">
<li class="list-group-item">Detektiv</li>
<li class="list-group-item active" aria-current="true">Klassika</li>
<li class="list-group-item">Fantastika</li>
<li class="list-group-item">Komediya</li>
<li class="list-group-item">Romantika</li>
</ul>
</div>
<!-- sideBar tugadi -->
<!-- kontent boshlandi -->
<div class="col-12">
<!-- kitoblar qatori boshlandi -->
<div class="row">
<!-- kitob boshlandi -->
<div class="col-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
</div>
<!-- kitoblar qatori tugadi -->
</div>
<!-- kontent tugadi -->
</div>
<!-- main qatori tugadi -->
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.
Tekshiramiz. Hammasi yaxshi.
Ekranni kattalashtirsak ham col-12 hajmi qolayotganligini ko’ramiz.
Kelinglar md hajmiga kelib janrlarimiz va kontent qismi yonma-yon bo’lishsin
<!-- sideBar boshlandi -->
<div class="col-12 col-md-2">
<ul class="list-group">
<li class="list-group-item">Detektiv</li>
<li class="list-group-item active" aria-current="true">Klassika</li>
<li class="list-group-item">Fantastika</li>
<li class="list-group-item">Komediya</li>
<li class="list-group-item">Romantika</li>
</ul>
</div>
<!-- sideBar tugadi -->
<!-- kontent boshlandi -->
<div class="col-12 col-md-10">
Buning uchun janrlar md hajmiga kelib 2, kontent qismi esa 10 col hajmiga ega bo’lsin deb yozamiz.
Kichik, xs variantda ular ostma-ost turishibdi,
md hajmiga kelib esa ular yonma-yon tushishmoqda.
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.
<!-- main qatori boshlandi -->
<div class="row mt-4">
<!-- sideBar boshlandi -->
<div class="col-12 col-md-2">
<ul class="list-group">
<li class="list-group-item">Detektiv</li>
<li class="list-group-item active" aria-current="true">Klassika</li>
<li class="list-group-item">Fantastika</li>
<li class="list-group-item">Komediya</li>
<li class="list-group-item">Romantika</li>
</ul>
</div>
<!-- sideBar tugadi -->
<!-- kontent boshlandi -->
<div class="col-12 col-md-10">
<!-- kitoblar qatori boshlandi -->
<div class="row">
<!-- kitob boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
</div>
<!-- kitoblar qatori tugadi -->
</div>
<!-- kontent tugadi -->
</div>
<!-- main qatori tugadi -->
Buning uchun har bir kitob’ning col-3 sinfi o’rniga «col-12 col-sm-6 col-lg-3» sinflarini joylaymiz.
Mobil qurilmalar uchun ko’rinish (xs)
Mobil qurilmalarining albom shaklida (sm)
Planshetlarda (md)
Planshetlarning albom shaklida (lg)
Hammasi yaxshi, faqat xs va sm variantlariga e’tibor bering. Ularning yuqori qismi janrlarga tegib qolgan.
<!-- kitoblar qatori boshlandi -->
<div class="row mt-4">
Buning uchun kitoblar qatoriga ham mt-4 sinfini beramiz.
Kichik hajmlarda yaxshi ko’rinmoqda.
Lekin bo’shliq barcha hajmlarga berilgani uchun, katta hajmlarda kitoblar janrlarga nisbatan pastroqdan boshlanmoqda. Bu yaxshi emas, oldinroq ular bir qator turishgan edi.
<!-- kitoblar qatori boshlandi -->
<div class="row mt-4 mt-md-0">
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.
Xs va sm hajmlarida bo’shliq bor, lekin md hajmiga kelib bo’shliq yo’qolmoqda. Ajoyib.
Chizmamizga boqamiz, kitoblar ostidan Pagination qatori joylashgan ekan.
<!-- main qatori boshlandi -->
<div class="row mt-4">
<!-- sideBar boshlandi -->
<div class="col-12 col-md-2">
<ul class="list-group">
<li class="list-group-item">Detektiv</li>
<li class="list-group-item active" aria-current="true">Klassika</li>
<li class="list-group-item">Fantastika</li>
<li class="list-group-item">Komediya</li>
<li class="list-group-item">Romantika</li>
</ul>
</div>
<!-- sideBar tugadi -->
<!-- kontent boshlandi -->
<div class="col-12 col-md-10">
<!-- kitoblar qatori boshlandi -->
<div class="row mt-4 mt-md-0">
<!-- kitob boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
</div>
<!-- kitoblar qatori tugadi -->
<!-- pagination qatori boshlandi -->
<div class="row">
</div>
<!-- pagination qatori tugadi -->
</div>
<!-- kontent tugadi -->
</div>
<!-- main qatori tugadi -->
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.
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.
<!-- main qatori boshlandi -->
<div class="row mt-4">
<!-- sideBar boshlandi -->
<div class="col-12 col-md-2">
<ul class="list-group">
<li class="list-group-item">Detektiv</li>
<li class="list-group-item active" aria-current="true">Klassika</li>
<li class="list-group-item">Fantastika</li>
<li class="list-group-item">Komediya</li>
<li class="list-group-item">Romantika</li>
</ul>
</div>
<!-- sideBar tugadi -->
<!-- kontent boshlandi -->
<div class="col-12 col-md-10">
<!-- kitoblar qatori boshlandi -->
<div class="row mt-4 mt-md-0">
<!-- kitob boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
</div>
<!-- kitoblar qatori tugadi -->
<!-- pagination qatori boshlandi -->
<div class="row">
<div class="col">
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- pagination qatori tugadi -->
</div>
<!-- kontent tugadi -->
</div>
<!-- main qatori tugadi -->
row ichiga col ochib, uning ichiga bootstrap saytidan olgan pagination komponenti nusxasini qo’yamiz.
Pagination paydo bo’ldi. Men ataylabdan bir kitobni o’chirib tashladim. Lekin pagination baribir alohida qatorda ko’rinmoqda
FOOTER
<!-- main qatori tugadi -->
<!-- footer boshlandi -->
<div class="row">
<div class="col">
<footer>
All right reserved
</footer>
</div>
</div>
<!-- footer tugadi -->
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.
<!-- main qatori tugadi -->
<!-- footer boshlandi -->
<div class="row">
<div class="col">
<footer>
© All right reserved
</footer>
</div>
</div>
<!-- footer tugadi -->
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
<!-- main qatori tugadi -->
<!-- footer boshlandi -->
<div class="row">
<div class="col p-5 bg-dark text-light">
<footer>
© All right reserved
</footer>
</div>
</div>
<!-- footer tugadi -->
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.
BOOK.HTML
Endi ikkinchi sahifani yaratishimiz kerak.
index.html faylimizdan nusxa olamiz va uni book.html deb nomlaymiz.
<!doctype html>
<html>
<head>
<title>Kadirov Dev</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" 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.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</head>
<body>
<!-- container boshlandi -->
<div class="container-fluid">
<!-- header qatori boshlandi -->
<div class="row">
<div class="col">
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">Kitoblar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
</div>
</div>
<!-- header qatori tugadi -->
<!-- main qatori boshlandi -->
<div class="row mt-4">
<!-- sideBar boshlandi -->
<div class="col-12 col-md-2">
<ul class="list-group">
<li class="list-group-item">Detektiv</li>
<li class="list-group-item active" aria-current="true">Klassika</li>
<li class="list-group-item">Fantastika</li>
<li class="list-group-item">Komediya</li>
<li class="list-group-item">Romantika</li>
</ul>
</div>
<!-- sideBar tugadi -->
<!-- kontent boshlandi -->
<div class="col-12 col-md-10">
</div>
<!-- kontent tugadi -->
</div>
<!-- main qatori tugadi -->
<!-- footer boshlandi -->
<div class="row">
<div class="col bg-dark text-light p-5">
<footer>
© All right reserved
</footer>
</div>
</div>
<!-- footer tugadi -->
</div>
<!-- container tugadi -->
</body>
</html>
Ushbu faylni ochamiz. Kontent qismining ichidagi barcha narsalarni o’chiramiz.
<h1>O'tkan kunlar</h1>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
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
<a class="navbar-brand" href="#">Kitoblar</a>
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 boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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="book.html" class="btn btn-primary">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
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:
<!doctype html>
<html>
<head>
<title>Kadirov Dev</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" 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.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</head>
<body>
<!-- container boshlandi -->
<div class="container-fluid">
<!-- header qatori boshlandi -->
<div class="row">
<div class="col">
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">Kitoblar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
</div>
</div>
<!-- header qatori tugadi -->
<!-- main qatori boshlandi -->
<div class="row mt-4">
<!-- sideBar boshlandi -->
<div class="col-12 col-md-2">
<ul class="list-group">
<li class="list-group-item">Detektiv</li>
<li class="list-group-item active" aria-current="true">Klassika</li>
<li class="list-group-item">Fantastika</li>
<li class="list-group-item">Komediya</li>
<li class="list-group-item">Romantika</li>
</ul>
</div>
<!-- sideBar tugadi -->
<!-- kontent boshlandi -->
<div class="col-12 col-md-10">
<!-- kitoblar qatori boshlandi -->
<div class="row mt-4 mt-md-0">
<!-- kitob boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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="book.html" class="btn btn-primary">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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="book.html" class="btn btn-primary">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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="book.html" class="btn btn-primary">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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="book.html" class="btn btn-primary">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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="book.html" class="btn btn-primary">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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="book.html" class="btn btn-primary">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
<!-- kitob boshlandi -->
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card">
<img src="img/otkan-kunlar.jpg" class="card-img-top" alt="Kitob rasmi">
<div class="card-body">
<h5 class="card-title">O'tkan kunlar</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="book.html" class="btn btn-primary">O'qish</a>
</div>
</div>
</div>
<!-- kitob tugadi-->
</div>
<!-- kitoblar qatori tugadi -->
<!-- pagination qatori boshlandi -->
<div class="row">
<div class="col">
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- pagination qatori tugadi -->
</div>
<!-- kontent tugadi -->
</div>
<!-- main qatori tugadi -->
<!-- footer boshlandi -->
<div class="row">
<div class="col bg-dark text-light p-5">
<footer>
© All right reserved
</footer>
</div>
</div>
<!-- footer tugadi -->
</div>
<!-- container tugadi -->
</body>
</html>
index.html
<!doctype html>
<html>
<head>
<title>Kadirov Dev</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" 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.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</head>
<body>
<!-- container boshlandi -->
<div class="container-fluid">
<!-- header qatori boshlandi -->
<div class="row">
<div class="col">
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="index.html">Kitoblar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
</div>
</div>
<!-- header qatori tugadi -->
<!-- main qatori boshlandi -->
<div class="row mt-4">
<!-- sideBar boshlandi -->
<div class="col-12 col-md-2">
<ul class="list-group">
<li class="list-group-item">Detektiv</li>
<li class="list-group-item active" aria-current="true">Klassika</li>
<li class="list-group-item">Fantastika</li>
<li class="list-group-item">Komediya</li>
<li class="list-group-item">Romantika</li>
</ul>
</div>
<!-- sideBar tugadi -->
<!-- kontent boshlandi -->
<div class="col-12 col-md-10">
<h1>O'tkan kunlar</h1>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
</div>
<!-- kontent tugadi -->
</div>
<!-- main qatori tugadi -->
<!-- footer boshlandi -->
<div class="row">
<div class="col bg-dark text-light p-5">
<footer>
© All right reserved
</footer>
</div>
</div>
<!-- footer tugadi -->
</div>
<!-- container tugadi -->
</body>
</html>
book.html