BS4 kartochkalar

Kartochkalar

Bootstrap 4’dagi kartochka — kontenti atrofida biroz ichki chekinishi (padding) bo‘lgan, chegarali blok. U sarlavha (header), pastki qism (footer), kontent, ranglar va boshqa imkoniyatlarni o‘z ichiga oladi.

John Doe

Some example text some example text. John Doe is an architect and engineer

See Profile

Oddiy kartochka

Oddiy kartochka .card klassi yordamida yaratiladi, kartochka ichidagi kontent esa .card-body klassiga ega bo‘ladi:

Basic card

Misol

<div class="card"> <div class="card-body">Basic card</div> </div>

O‘zingiz sinab ko‘ring »

Agar Bootstrap 3 bilan tanish bo‘lsangiz, kartochkalar eski panellar (panels), well’lar (wells) va eskizlar (thumbnails) o‘rnini egallaydi.

Header va footer (sarlavha va pastki qism)

Header

Content

Footer

.card-header klassi kartochkaga sarlavha (header), .card-footer klassi esa pastki qism (footer) qo‘shadi:

Misol

<div class="card"> <div class="card-header">Header</div> <div class="card-body">Content</div> <div class="card-footer">Footer</div> </div>

O‘zingiz sinab ko‘ring »

Kontekstual kartochkalar

Kartochkaga fon rangi berish uchun kontekstual klasslardan (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark va .bg-light) foydalaning.

Misol

Basic card

Primary card

Success card

Info card

Warning card

Danger card

Secondary card

Dark card

Light card

O‘zingiz sinab ko‘ring »

Sarlavhalar, matn va havolalar

Card title

Some example text. Some example text.

Card link Another link

Istalgan sarlavha elementiga kartochka sarlavhasini qo‘shish uchun .card-title dan foydalaning. .card-text klassi, agar <p> elementi .card-body ichidagi oxirgi (yoki yagona) farzand element bo‘lsa, undagi pastki tashqi chekinishni (margin) olib tashlash uchun ishlatiladi. .card-link klassi istalgan havolaga ko‘k rang va hover effektini qo‘shadi.

Misol

<div class="card"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some example text. Some example text.</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div>

O‘zingiz sinab ko‘ring »

Kartochka rasmlari

John Doe

Some example text some example text. John Doe is an architect and engineer

See Profile

Jane Doe

Some example text some example text. Jane Doe is an architect and engineer

See Profile

Rasmni kartochka ichida yuqorida yoki pastda joylashtirish uchun <img> ga .card-img-top yoki .card-img-bottom ni qo‘shing. E’tibor bering, rasm butun kenglikni egallashi uchun biz uni .card-body dan tashqarida joylashtirdik:

Misol

<div class="card" style="width:400px"> <img class="card-img-top" src="img_avatar1.png" alt="Card image"> <div class="card-body"> <h4 class="card-title">John Doe</h4> <p class="card-text">Some example text.</p> <a href="#" class="btn btn-primary">See Profile</a> </div> </div>

O‘zingiz sinab ko‘ring »

Cho‘zilgan havola (stretched link)

Kartochka ichidagi havolaga .stretched-link klassini qo‘shing — shunda butun kartochka bosiladigan va hover effektiga ega bo‘ladi (kartochka havola vazifasini bajaradi):

John Doe

Some example text some example text. John Doe is an architect and engineer

See Profile

Jane Doe

Some example text some example text. Jane Doe is an architect and engineer

See Profile

Misol

<a href="#" class="btn btn-primary stretched-link">See Profile</a>

O‘zingiz sinab ko‘ring »

Kartochka rasmi ustidagi matn (overlay)

John Doe

Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.

See Profile

Rasmni kartochka foniga aylantiring va rasm ustiga matn qo‘shish uchun .card-img-overlay dan foydalaning:

Misol

<div class="card" style="width:500px"> <img class="card-img-top" src="img_avatar1.png" alt="Card image"> <div class="card-img-overlay"> <h4 class="card-title">John Doe</h4> <p class="card-text">Some example text.</p> <a href="#" class="btn btn-primary">See Profile</a> </div> </div>

O‘zingiz sinab ko‘ring »

Kartochka ustunlari (card columns)

Some text inside the first card

Some text inside the second card

Some text inside the third card

Some text inside the fourth card

Some text inside the fifth card

Some text inside the sixth card

.card-columns klassi kartochkalardan masonry uslubidagi (pinterest’dagi kabi) grid yaratadi. Kartochkalar qo‘shilgan sari maket avtomatik ravishda moslashadi.

Eslatma: Kichik ekranlarda (576px dan kichik) kartochkalar vertikal joylashadi:

Misol

<div class="card-columns"> <div class="card bg-primary"> <div class="card-body text-center"> <p class="card-text">Some text inside the first card</p> </div> </div> <div class="card bg-warning"> <div class="card-body text-center"> <p class="card-text">Some text inside the second card</p> </div> </div> <div class="card bg-success"> <div class="card-body text-center"> <p class="card-text">Some text inside the third card</p> </div> </div> <div class="card bg-danger"> <div class="card-body text-center"> <p class="card-text">Some text inside the fourth card</p> </div> </div> <div class="card bg-light"> <div class="card-body text-center"> <p class="card-text">Some text inside the fifth card</p> </div> </div> <div class="card bg-info"> <div class="card-body text-center"> <p class="card-text">Some text inside the sixth card</p> </div> </div> </div>

O‘zingiz sinab ko‘ring »

Kartochkalar to‘plami (card deck)

Some text inside the first card

Some more text to increase the height

Some text inside the second card

Some text inside the third card

Some text inside the fourth card

.card-deck klassi balandligi va kengligi teng bo‘lgan kartochkalardan grid yaratadi. Kartochkalar qo‘shilgan sari maket avtomatik ravishda moslashadi.

Eslatma: Kichik ekranlarda (576px dan kichik) kartochkalar vertikal joylashadi:

Misol

<div class="card-deck"> <div class="card bg-primary"> <div class="card-body text-center"> <p class="card-text">Some text inside the first card</p> </div> </div> <div class="card bg-warning"> <div class="card-body text-center"> <p class="card-text">Some text inside the second card</p> </div> </div> <div class="card bg-success"> <div class="card-body text-center"> <p class="card-text">Some text inside the third card</p> </div> </div> <div class="card bg-danger"> <div class="card-body text-center"> <p class="card-text">Some text inside the fourth card</p> </div> </div> </div>

O‘zingiz sinab ko‘ring »

Kartochkalar guruhi (card group)

Some text inside the first card

Some more text to increase the height

Some text inside the second card

Some text inside the third card

Some text inside the fourth card

.card-group klassi .card-deck ga o‘xshaydi. Yagona farqi shundaki, .card-group klassi har bir kartochka orasidagi chap va o‘ng tashqi chekinishlarni (margin) olib tashlaydi.

Eslatma: Kichik ekranlarda (576px dan kichik) kartochkalar yuqori va pastki tashqi chekinish (margin) BILAN vertikal joylashadi:

Misol

<div class="card-group"> <div class="card bg-primary"> <div class="card-body text-center"> <p class="card-text">Some text inside the first card</p> </div> </div> <div class="card bg-warning"> <div class="card-body text-center"> <p class="card-text">Some text inside the second card</p> </div> </div> <div class="card bg-success"> <div class="card-body text-center"> <p class="card-text">Some text inside the third card</p> </div> </div> <div class="card bg-danger"> <div class="card-body text-center"> <p class="card-text">Some text inside the fourth card</p> </div> </div> </div>

O‘zingiz sinab ko‘ring »

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish