Kartalar
Bootstrap kartalari bir nechta variant va variantlarga ega moslashuvchan va kengaytiriladigan kontent konteynerini taqdim etadi.
Haqida
Karta moslashuvchan va kengaytiriladigan kontent konteyneridir. U sarlavhalar va altbilgilar uchun variantlarni, turli xil tarkibni, kontekstli fon ranglarini va kuchli displey imkoniyatlarini o'z ichiga oladi. Agar siz Bootstrap 3 bilan tanish bo'lsangiz, kartalar bizning eski panellarimiz, quduqlarimiz va eskizlarimizni almashtiradi. Ushbu komponentlarga o'xshash funksionallik kartalar uchun modifikator sinflari sifatida mavjud.
Misol
Kartalar iloji boricha kamroq belgilar va uslublar bilan yaratilgan, ammo baribir tonna nazorat va sozlashni ta'minlay oladi. Flexbox bilan yaratilgan ular oson tekislashni taklif qiladi va boshqa Bootstrap komponentlari bilan yaxshi aralashadi. Ularda marginsukut bo'yicha yo'q, shuning uchun kerak bo'lganda oraliq yordamchi dasturlardan foydalaning .
Quyida aralash tarkibli va belgilangan kenglikdagi asosiy kartaning namunasi keltirilgan. Kartochkalarda boshlash uchun belgilangan kenglik yo'q, shuning uchun ular tabiiy ravishda asosiy elementning to'liq kengligini to'ldiradi. Bu bizning turli o'lcham variantlarimiz bilan osongina moslashtiriladi .
Karta sarlavhasi
Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.
Bir joyga boring<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>Tarkib turlari
Kartalar rasmlar, matn, ro'yxat guruhlari, havolalar va boshqalarni o'z ichiga olgan turli xil tarkibni qo'llab-quvvatlaydi. Quyida qo'llab-quvvatlanadigan narsalarga misollar keltirilgan.
Tana
Kartaning qurilish bloki bu .card-body. Karta ichida to'ldirilgan qism kerak bo'lganda undan foydalaning.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>Sarlavhalar, matn va havolalar
Karta sarlavhalari tegga qo'shish orqali ishlatiladi .card-title. <h*>Xuddi shu tarzda, havolalar qo'shiladi va tegga qo'shish .card-linkorqali bir-birining yoniga joylashtiriladi.<a>
Subtitrlar tegga .card-subtitlea qo'shish orqali ishlatiladi . <h*>Agar .card-titleva .card-subtitleelementlari .card-bodyelementga joylashtirilsa, kartaning sarlavhasi va taglavhasi yaxshi tekislanadi.
Karta sarlavhasi
Karta subtitri
Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.
Karta havolasi Boshqa havola<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<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="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>Tasvirlar
.card-img-toptasvirni kartaning yuqori qismiga qo'yadi. , bilan .card-textmatn kartaga qo'shilishi mumkin. Ichidagi matn .card-textstandart HTML teglari bilan ham uslublanishi mumkin.
Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<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>
</div>
</div>Guruhlarni ro'yxatga olish
Flaş ro'yxati guruhiga ega kartada kontent ro'yxatini yarating.
- Cras justo odio
- Dapibus ac facilisis in
- Eroz va vestibulum
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>- Cras justo odio
- Dapibus ac facilisis in
- Eroz va vestibulum
<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>Oshxona lavabosi
Kerakli kartani yaratish uchun bir nechta kontent turlarini aralashtiring va moslang yoki u erda hamma narsani tashlang. Quyida tasvir uslublari, bloklar, matn uslublari va ro'yxatlar guruhi ko'rsatilgan - barchasi belgilangan kenglikdagi kartaga o'ralgan.
Karta sarlavhasi
Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.
- Cras justo odio
- Dapibus ac facilisis in
- Eroz va vestibulum
<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>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>Sarlavha va altbilgi
Karta ichiga ixtiyoriy sarlavha va/yoki altbilgi qo'shing.
Maxsus nom bilan davolash
Qo'shimcha kontentga tabiiy kirish sifatida quyidagi qo'llab-quvvatlovchi matn bilan.
Bir joyga boring<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Karta sarlavhalarini elementlarga qo'shish orqali uslublash mumkin .card-header.<h*>
Tanlangan
Maxsus nom bilan davolash
Qo'shimcha kontentga tabiiy kirish sifatida quyidagi qo'llab-quvvatlovchi matn bilan.
Bir joyga boring<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>Maxsus nom bilan davolash
Qo'shimcha kontentga tabiiy kirish sifatida quyidagi qo'llab-quvvatlovchi matn bilan.
Bir joyga boring<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>Hajmi
Kartalar widthboshlash uchun hech qanday aniq belgi yo'q, shuning uchun ular boshqacha ko'rsatilmagan bo'lsa, 100% kenglikda bo'ladi. Buni kerak bo'lganda maxsus CSS, grid sinflari, grid Sass mikslari yoki yordamchi dasturlar bilan o'zgartirishingiz mumkin.
Grid belgilaridan foydalanish
To'rdan foydalanib, kerak bo'lganda kartalarni ustunlar va qatorlarga o'rang.
Maxsus nom bilan davolash
Qo'shimcha kontentga tabiiy kirish sifatida quyidagi qo'llab-quvvatlovchi matn bilan.
Bir joyga boringMaxsus nom bilan davolash
Qo'shimcha kontentga tabiiy kirish sifatida quyidagi qo'llab-quvvatlovchi matn bilan.
Bir joyga boring<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>Utilitlardan foydalanish
Kartaning kengligini tezda o'rnatish uchun bir nechta mavjud o'lchamli yordamchi dasturlarimizdan foydalaning.
Karta sarlavhasi
Qo'shimcha kontentga tabiiy kirish sifatida quyidagi qo'llab-quvvatlovchi matn bilan.
TugmaKarta sarlavhasi
Qo'shimcha kontentga tabiiy kirish sifatida quyidagi qo'llab-quvvatlovchi matn bilan.
Tugma<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
<div class="card w-50">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>Maxsus CSS-dan foydalanish
Kenglikni o'rnatish uchun uslublar jadvallarida yoki ichki uslublar sifatida maxsus CSS-dan foydalaning.
Maxsus nom bilan davolash
Qo'shimcha kontentga tabiiy kirish sifatida quyidagi qo'llab-quvvatlovchi matn bilan.
Bir joyga boring<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Matnni tekislash
Matnni tekislash sinflarimiz yordamida istalgan kartaning matn hizalanishini toʻliq yoki alohida qismlarida tezda oʻzgartirishingiz mumkin .
Maxsus nom bilan davolash
Qo'shimcha kontentga tabiiy kirish sifatida quyidagi qo'llab-quvvatlovchi matn bilan.
Bir joyga boringMaxsus nom bilan davolash
Qo'shimcha kontentga tabiiy kirish sifatida quyidagi qo'llab-quvvatlovchi matn bilan.
Bir joyga boringMaxsus nom bilan davolash
Qo'shimcha kontentga tabiiy kirish sifatida quyidagi qo'llab-quvvatlovchi matn bilan.
Bir joyga boring<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-center" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-right" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Navigatsiya
Bootstrap-ning nav komponentlari bilan kartaning sarlavhasiga (yoki blokiga) biroz navigatsiya qo'shing .
Maxsus nom bilan davolash
Qo'shimcha kontentga tabiiy kirish sifatida quyidagi qo'llab-quvvatlovchi matn bilan.
Bir joyga boring<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Maxsus nom bilan davolash
Qo'shimcha kontentga tabiiy kirish sifatida quyidagi qo'llab-quvvatlovchi matn bilan.
Bir joyga boring<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Tasvirlar
Kartalar tasvirlar bilan ishlash uchun bir nechta variantni o'z ichiga oladi. Kartaning har ikki uchiga “tasvir qalpoqlarini” qo‘shish, rasmlarni karta mazmuni bilan qoplash yoki shunchaki tasvirni kartaga joylashtirishni tanlang.
Rasm qalpoqlari
Sarlavhalar va pastki ma'lumotlarga o'xshab, kartalar yuqori va pastki "tasvir qopqoqlarini" o'z ichiga olishi mumkin - kartaning yuqori yoki pastki qismidagi tasvirlar.
Karta sarlavhasi
Bu kengroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.
Oxirgi marta 3 daqiqa oldin yangilangan
Karta sarlavhasi
Bu kengroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.
Oxirgi marta 3 daqiqa oldin yangilangan
<div class="card mb-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img src="..." class="card-img-top" alt="...">
</div>Rasm qoplamalari
Tasvirni karta foniga aylantiring va kartangiz matnini ustiga qo'ying. Rasmga qarab, sizga qo'shimcha uslublar yoki yordamchi dasturlar kerak bo'lishi mumkin yoki kerak emas.
<div class="card bg-dark text-white">
<img src="..." class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>E'tibor bering, kontent tasvir balandligidan katta bo'lmasligi kerak. Agar kontent rasmdan kattaroq bo'lsa, kontent tasvirdan tashqarida ko'rsatiladi.
Gorizontal
Tarmoq va yordamchi sinflarning kombinatsiyasidan foydalangan holda, kartalar mobil qurilmalar uchun qulay va sezgir tarzda gorizontal holga keltirilishi mumkin. Quyidagi misolda biz panjara oluklarini olib tashlaymiz va to'xtash nuqtasida kartani gorizontal holga keltirish uchun sinflardan .no-guttersfoydalanamiz . Sizning kartangiz tarkibiga qarab qo'shimcha tuzatishlar talab qilinishi mumkin..col-md-*md
Karta sarlavhasi
Bu kengroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.
Oxirgi marta 3 daqiqa oldin yangilangan
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="..." class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>Karta uslublari
Kartalar fon, chegara va rangni sozlash uchun turli xil variantlarni o'z ichiga oladi.
Fon va rang
Karta ko'rinishini o'zgartirish uchun matn va fon yordam dasturlaridan foydalaning.
Asosiy karta nomi
Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.
Ikkilamchi karta nomi
Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.
Muvaffaqiyat kartasi nomi
Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.
Xavfli karta sarlavhasi
Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.
Ogohlantirish kartasining sarlavhasi
Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.
Ma'lumot kartasining sarlavhasi
Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.
Engil karta sarlavhasi
Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.
Qorong'i karta sarlavhasi
Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary 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>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary 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>
</div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Success 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>
</div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Danger 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>
</div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning 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>
</div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info 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>
</div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light 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>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark 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>
</div>
</div>Yordamchi texnologiyalarga ma'no etkazish
Ma'no qo'shish uchun rangdan foydalanish faqat vizual ko'rsatkichni ta'minlaydi, bu yordamchi texnologiyalar foydalanuvchilariga, masalan, ekranni o'qiydiganlarga etkazilmaydi. Rang bilan belgilangan ma'lumotlar mazmunning o'zidan (masalan, ko'rinadigan matn) aniq bo'lishiga yoki .sr-onlysinf bilan yashiringan qo'shimcha matn kabi muqobil vositalar orqali kiritilganligiga ishonch hosil qiling.
Chegara
Faqat kartani o'zgartirish uchun chegara yordam dasturidan foydalaning . E'tibor bering, siz quyida ko'rsatilganidek , ota-onaga yoki karta tarkibining bir qismiga sinflarni border-colorqo'yishingiz mumkin ..text-{color}.card
Asosiy karta nomi
Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.
Ikkilamchi karta nomi
Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.
Muvaffaqiyat kartasi nomi
Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.
Xavfli karta sarlavhasi
Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.
Ogohlantirish kartasining sarlavhasi
Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.
Ma'lumot kartasining sarlavhasi
Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.
Engil karta sarlavhasi
Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.
Qorong'i karta sarlavhasi
Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary 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>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-secondary">
<h5 class="card-title">Secondary 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>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success 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>
</div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-danger">
<h5 class="card-title">Danger 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>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-warning">
<h5 class="card-title">Warning 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>
</div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-info">
<h5 class="card-title">Info 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>
</div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light 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>
</div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-dark">
<h5 class="card-title">Dark 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>
</div>
</div>Mixins yordamchi dasturlari
Bundan tashqari, kerak bo'lganda kartaning sarlavhasi va altbilgisidagi chegaralarni o'zgartirishingiz va hatto ularni background-colorbilan olib tashlashingiz mumkin .bg-transparent.
Muvaffaqiyat kartasi nomi
Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success 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>
</div>
<div class="card-footer bg-transparent border-success">Footer</div>
</div>Karta tartibi
Kartalardagi tarkibni shakllantirishdan tashqari, Bootstrap kartalar seriyasini joylashtirish uchun bir nechta variantni o'z ichiga oladi. Hozircha ushbu tartib variantlari hali javob bermaydi .
Karta guruhlari
Kartalarni bir xil kenglik va balandlik ustunlari bilan bitta biriktirilgan element sifatida ko'rsatish uchun karta guruhlaridan foydalaning. Karta guruhlari display: flex;o'zlarining yagona o'lchamiga erishish uchun foydalanadilar.
Karta sarlavhasi
Bu kengroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.
Oxirgi marta 3 daqiqa oldin yangilangan
Karta sarlavhasi
Bu kartada qoʻshimcha kontentga tabiiy kirish uchun quyida qoʻllab-quvvatlovchi matn mavjud.
Oxirgi marta 3 daqiqa oldin yangilangan
Karta sarlavhasi
Bu kengroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu karta teng balandlikdagi harakatni ko'rsatadigan birinchisidan ham uzunroq tarkibga ega.
Oxirgi marta 3 daqiqa oldin yangilangan
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>Altbilgilar bilan karta guruhlarini ishlatganda, ularning mazmuni avtomatik ravishda qatorga tushadi.
Karta sarlavhasi
Bu kengroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.
Karta sarlavhasi
Bu kartada qoʻshimcha kontentga tabiiy kirish uchun quyida qoʻllab-quvvatlovchi matn mavjud.
Karta sarlavhasi
Bu kengroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu karta teng balandlikdagi harakatni ko'rsatadigan birinchisidan ham uzunroq tarkibga ega.
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>Karta to'plamlari
Bir-biriga biriktirilmagan teng kenglik va balandlik kartalari to'plami kerakmi? Karta to'plamlaridan foydalaning.
Karta sarlavhasi
Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.
Oxirgi marta 3 daqiqa oldin yangilangan
Karta sarlavhasi
Bu kartada qoʻshimcha kontentga tabiiy kirish uchun quyida qoʻllab-quvvatlovchi matn mavjud.
Oxirgi marta 3 daqiqa oldin yangilangan
Karta sarlavhasi
Bu kengroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu karta teng balandlikdagi harakatni ko'rsatadigan birinchisidan ham uzunroq tarkibga ega.
Oxirgi marta 3 daqiqa oldin yangilangan
<div class="card-deck">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>Xuddi karta guruhlarida bo'lgani kabi, palubadagi karta altbilgilari ham avtomatik ravishda qatorga tushadi.
Karta sarlavhasi
Bu kengroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.
Karta sarlavhasi
Bu kartada qoʻshimcha kontentga tabiiy kirish uchun quyida qoʻllab-quvvatlovchi matn mavjud.
Karta sarlavhasi
Bu kengroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu karta teng balandlikdagi harakatni ko'rsatadigan birinchisidan ham uzunroq tarkibga ega.
<div class="card-deck">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>Grid kartalari
Har bir satrda qancha panjara ustunlarini (kartalaringiz atrofiga o'ralgan) ko'rsatishingizni boshqarish uchun Bootstrap grid tizimi va uning .row-colssinflaridan foydalaning. Misol uchun, bu erda .row-cols-1kartalarni bitta ustunga qo'yish va .row-cols-md-2to'rtta kartani o'rtacha uzilish nuqtasidan boshlab bir nechta qatorlar bo'ylab teng kenglikka bo'lish.
Karta sarlavhasi
Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.
Karta sarlavhasi
Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.
Karta sarlavhasi
Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud.
Karta sarlavhasi
Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.
<div class="row row-cols-1 row-cols-md-2">
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>Uni o'zgartiring .row-cols-3va siz to'rtinchi karta o'ramini ko'rasiz.
Karta sarlavhasi
Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.
Karta sarlavhasi
Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.
Karta sarlavhasi
Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud.
Karta sarlavhasi
Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>Agar sizga teng balandlik kerak .h-100bo'lsa, kartalarga qo'shing. Agar siz sukut bo'yicha teng balandliklarni xohlasangiz $card-height: 100%, Sass-da o'rnatishingiz mumkin.
Karta sarlavhasi
Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.
Karta sarlavhasi
Bu qisqa karta.
Karta sarlavhasi
Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud.
Karta sarlavhasi
Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>Karta ustunlari
Kartalarni faqat CSS-ga o'ralgan holda Masonlik.card-columns kabi ustunlarga ajratish mumkin . columnKartalar qulayroq hizalanish uchun flexbox o'rniga CSS xususiyatlari bilan yaratilgan. Kartalar yuqoridan pastgacha va chapdan o'ngga tartiblanadi.
Oldindan qisqa ma'lumot berish! Karta ustunlari bilan kilometringiz farq qilishi mumkin. Kartalar ustunlar bo'ylab sinishining oldini olish uchun ularni hali o'q o'tkazmaydigan yechim display: inline-blocksifatida sozlashimiz kerak.column-break-inside: avoid
Yangi qatorga o'tadigan karta sarlavhasi
Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Karta sarlavhasi
Bu kartada qoʻshimcha kontentga tabiiy kirish uchun quyida qoʻllab-quvvatlovchi matn mavjud.
Oxirgi marta 3 daqiqa oldin yangilangan
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Butun son.
Karta sarlavhasi
Ushbu kartada oddiy sarlavha va uning ostida matnning qisqa paragrafi mavjud.
Oxirgi marta 3 daqiqa oldin yangilangan
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Karta sarlavhasi
Bu quyida sarlavha va qo'llab-quvvatlovchi matnga ega bo'lgan boshqa karta. Ushbu kartada uni biroz balandroq qilish uchun qo'shimcha tarkib mavjud.
Oxirgi marta 3 daqiqa oldin yangilangan
<div class="card-columns">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class="blockquote-footer text-white">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>Karta ustunlari ham kengaytirilishi va qo'shimcha kod bilan moslashtirilishi mumkin. Quyida .card-columnsbiz foydalanadigan bir xil CSS-dan foydalangan holda sinfning kengaytmasi ko'rsatilgan - CSS ustunlari - ustunlar sonini o'zgartirish uchun javob beradigan darajalar to'plamini yaratish.
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}