Source

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 class="card-img-top" src=".../100px180/" alt="Card image cap">
  <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.

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

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <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>

Tanlangan

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

Karta havolasi Boshqa havola

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <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.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Manba sarlavhasida mashhur kimdir

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

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

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="#">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="#">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 class="card-img-top" src=".../100px180/" alt="Card image cap">
  <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 class="card-img-bottom" src=".../100px180/" alt="Card image cap">
</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.

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 class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" alt="Card image">
  <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>

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.

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

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

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 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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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.

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

Oxirgi marta 3 daqiqa oldin yangilangan

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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

Oxirgi marta 3 daqiqa oldin yangilangan

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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.

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

Oxirgi marta 3 daqiqa oldin yangilangan

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 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.

Manba sarlavhasida mashhur kimdir

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.

Manba sarlavhasida mashhur kimdir

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.

Manba sarlavhasida mashhur kimdir

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 class="card-img-top" src=".../100px160/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px160/" alt="Card image cap">
    <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">
        <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 class="card-img" src=".../100px260/" alt="Card image">
  </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 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;
  }
}

Kartalar

Haqida

Misol

Karta sarlavhasi

Tarkib turlari

Tana

Sarlavhalar, matn va havolalar

Karta sarlavhasi

Karta subtitri

Tasvirlar

Guruhlarni ro'yxatga olish

Oshxona lavabosi

Karta sarlavhasi

Sarlavha va altbilgi

Maxsus nom bilan davolash

Tanlangan

Maxsus nom bilan davolash

Maxsus nom bilan davolash

Hajmi

Grid belgilaridan foydalanish

Maxsus nom bilan davolash

Maxsus nom bilan davolash

Utilitlardan foydalanish

Karta sarlavhasi

Karta sarlavhasi

Maxsus CSS-dan foydalanish

Maxsus nom bilan davolash

Matnni tekislash

Maxsus nom bilan davolash

Maxsus nom bilan davolash

Maxsus nom bilan davolash

Navigatsiya

Maxsus nom bilan davolash

Maxsus nom bilan davolash

Tasvirlar

Rasm qalpoqlari

Karta sarlavhasi

Karta sarlavhasi

Rasm qoplamalari

Karta sarlavhasi

Karta uslublari

Fon va rang

Asosiy karta nomi

Ikkilamchi karta nomi

Muvaffaqiyat kartasi nomi

Xavfli karta sarlavhasi

Ogohlantirish kartasining sarlavhasi

Ma'lumot kartasining sarlavhasi

Engil karta sarlavhasi

Qorong'i karta sarlavhasi

Yordamchi texnologiyalarga ma'no etkazish

Chegara

Asosiy karta nomi

Ikkilamchi karta nomi

Muvaffaqiyat kartasi nomi

Xavfli karta sarlavhasi

Ogohlantirish kartasining sarlavhasi

Ma'lumot kartasining sarlavhasi

Engil karta sarlavhasi

Qorong'i karta sarlavhasi

Mixins yordamchi dasturlari

Muvaffaqiyat kartasi nomi

Karta tartibi

Karta guruhlari

Karta sarlavhasi

Karta sarlavhasi

Karta sarlavhasi

Karta sarlavhasi

Karta sarlavhasi

Karta sarlavhasi

Karta to'plamlari

Karta sarlavhasi

Karta sarlavhasi

Karta sarlavhasi

Karta sarlavhasi

Karta sarlavhasi

Karta sarlavhasi

Karta ustunlari

Yangi qatorga o'tadigan karta sarlavhasi

Karta sarlavhasi