Asosiy tarkibga o'tish Hujjatlar navigatsiyasiga oʻtish
in English

Kartalar

Bootstrap kartalari bir nechta variant va variantlarga ega moslashuvchan va kengaytiriladigan kontent konteynerini taqdim etadi.

Ushbu sahifada

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 .

Placeholder Image cap
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.

Bu karta korpusidagi ba'zi matn. 
<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.

Placeholder Image cap

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.

  • Buyum
  • Ikkinchi element
  • Uchinchi element
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
Tanlangan
  • Buyum
  • Ikkinchi element
  • Uchinchi element
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
  • Buyum
  • Ikkinchi element
  • Uchinchi element
Karta altbilgisi 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</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.

Placeholder Image cap
Karta sarlavhasi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

  • Buyum
  • Ikkinchi element
  • Uchinchi element
Karta havolasi Boshqa havola 
<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">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Karta ichiga ixtiyoriy sarlavha va/yoki altbilgi qo'shing.

Tanlangan
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>
Iqtibos

Blok tirnoq elementida joylashgan taniqli iqtibos.

Manba sarlavhasida mashhur kimdir 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
Tanlangan
Maxsus nom bilan davolash

Qo'shimcha kontentga tabiiy kirish sifatida quyidagi qo'llab-quvvatlovchi matn bilan.

Bir joyga boring
2 kun oldin 
<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 boring
Maxsus 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.

Tugma
Karta 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 boring
Maxsus nom bilan davolash

Qo'shimcha kontentga tabiiy kirish sifatida quyidagi qo'llab-quvvatlovchi matn bilan.

Bir joyga boring
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>

<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-end" 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>

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" aria-current="true" 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">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">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.

Placeholder Image cap
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

Placeholder Image cap 
<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-bottom" 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.

Placeholder Card image
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 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 .g-0foydalanamiz . Sizning kartangiz tarkibiga qarab qo'shimcha tuzatishlar talab qilinishi mumkin..col-md-*md

Placeholder Image
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 g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" 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 rangi va fon yordam dasturlaridan foydalaning.

Sarlavha
Asosiy karta nomi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Sarlavha
Ikkilamchi karta nomi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Sarlavha
Muvaffaqiyat kartasi nomi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Sarlavha
Xavfli karta sarlavhasi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Sarlavha
Ogohlantirish kartasining sarlavhasi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Sarlavha
Ma'lumot kartasining sarlavhasi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Sarlavha
Engil karta sarlavhasi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Sarlavha
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-dark 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-dark 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 text-dark 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 .visually-hiddensinf 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

Sarlavha
Asosiy karta nomi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Sarlavha
Ikkilamchi karta nomi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Sarlavha
Muvaffaqiyat kartasi nomi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Sarlavha
Xavfli karta sarlavhasi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Sarlavha
Ogohlantirish kartasining sarlavhasi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Sarlavha
Ma'lumot kartasining sarlavhasi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Sarlavha
Engil karta sarlavhasi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Sarlavha
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">
    <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">
    <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.

Sarlavha
Muvaffaqiyat kartasi nomi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Altbilgi 
<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 to'plangan holda boshlanadi va to'xtash display: flex;nuqtasidan boshlab bir xil o'lchamlarga ega bo'lish uchun ishlatiladi sm.

Placeholder Image cap
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

Placeholder Image cap
Karta sarlavhasi

Bu kartada qoʻshimcha kontentga tabiiy kirish uchun quyida qoʻllab-quvvatlovchi matn mavjud.

Oxirgi marta 3 daqiqa oldin yangilangan

Placeholder Image cap
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.

Placeholder Image cap
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
Placeholder Image cap
Karta sarlavhasi

Bu kartada qoʻshimcha kontentga tabiiy kirish uchun quyida qoʻllab-quvvatlovchi matn mavjud.

Oxirgi marta 3 daqiqa oldin yangilangan
Placeholder Image cap
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>
    </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.

Placeholder Image cap
Karta sarlavhasi

Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.

Placeholder Image cap
Karta sarlavhasi

Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.

Placeholder Image cap
Karta sarlavhasi

Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud.

Placeholder Image cap
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 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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.

Placeholder Image cap
Karta sarlavhasi

Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.

Placeholder Image cap
Karta sarlavhasi

Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.

Placeholder Image cap
Karta sarlavhasi

Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud.

Placeholder Image cap
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 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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.

Placeholder Image cap
Karta sarlavhasi

Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.

Placeholder Image cap
Karta sarlavhasi

Bu qisqa karta.

Placeholder Image cap
Karta sarlavhasi

Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud.

Placeholder Image cap
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 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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 guruhlarida bo'lgani kabi, karta altbilgilari ham avtomatik ravishda qatorlanadi.

Placeholder Image cap
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
Placeholder Image cap
Karta sarlavhasi

Bu kartada qoʻshimcha kontentga tabiiy kirish uchun quyida qoʻllab-quvvatlovchi matn mavjud.

Oxirgi marta 3 daqiqa oldin yangilangan
Placeholder Image cap
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="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <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 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>
  <div class="col">
    <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 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>
  <div class="col">
    <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 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>
</div>

Duvarcılık

Biz devorga o'xshash ustunlar v4xatti-harakatini taqlid qilish uchun faqat CSS usulidan foydalanganmiz , ammo bu usul juda ko'p noxush yon ta'sirlar bilan birga kelgan . Agar siz ushbu turdagi tartibga ega bo'lishni istasangiz, faqat Masonry plaginidan foydalanishingiz mumkin. Masonlik Bootstrap tarkibiga kiritilmagan , ammo biz sizga boshlashingizga yordam berish uchun demo misol tayyorladik.v5

Sass

O'zgaruvchilar

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 rgba($black, .125);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;