BS5 kartalar

Kartalar

Bootstrap 5’dagi karta — 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 karta

Oddiy karta .card klassi yordamida yaratiladi, karta 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 »

Header va footer (sarlavha va pastki qism)

Header

Content

Footer

.card-header klassi kartaga 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 kartalar

Kartaga 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 karta 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 »

Karta 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 karta 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 »

Karta 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 karta 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 »

Bilasizmi?

W3.CSS — Bootstrap’ga ajoyib muqobil.

W3.CSS hajmi kichikroq, tezroq ishlaydi va undan foydalanish osonroq.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish