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 .

Karta sarlavhasi

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

Bir joyga boring

html

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

html

<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

html

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

html

<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

html

<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

html

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

html

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

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

html

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

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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

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

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

html

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

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

html

<div class="card text-bg-dark">
  <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"><small>Last updated 3 mins ago</small></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

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

html

<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

5.2.0 versiyasida qo'shilgan

Yordamchilarimiz bilan background-colorkontrastli old fonni o'rnating . Ilgari o'zingizning tanlovingiz va uslublar uchun yordamchi dasturlarni qo'lda ulash talab qilingan, agar xohlasangiz, ulardan hali ham foydalanishingiz mumkin.color.text-bg-{color}.text-{color}.bg-{color}

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.

html

<div class="card text-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-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-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-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-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-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-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-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.

html

<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

html

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

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

html

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

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

html

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

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.

html

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

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.

html

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

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.

html

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

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

html

<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

CSS

O'zgaruvchilar

5.2.0 versiyasida qo'shilgan

Bootstrap-ning rivojlanayotgan CSS o'zgaruvchilari yondashuvining bir qismi sifatida kartalar endi .cardreal vaqt rejimini yaxshilash uchun mahalliy CSS o'zgaruvchilardan foydalanadi. CSS o'zgaruvchilari uchun qiymatlar Sass orqali o'rnatiladi, shuning uchun Sass moslashuvi hali ham qo'llab-quvvatlanadi.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Sass o'zgaruvchilari

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$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;

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

Gorizontal

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

Grid kartalari

Karta sarlavhasi

Karta sarlavhasi

Karta sarlavhasi

Karta sarlavhasi

Karta sarlavhasi

Karta sarlavhasi

Karta sarlavhasi