Source

کارت ها

کارت‌های Bootstrap یک محفظه محتوای انعطاف‌پذیر و قابل گسترش با انواع و گزینه‌های متعدد ارائه می‌کنند.

در باره

کارت یک محفظه محتوای انعطاف پذیر و قابل توسعه است. این شامل گزینه هایی برای سرصفحه ها و پاورقی ها، طیف گسترده ای از محتوا، رنگ های پس زمینه متنی و گزینه های نمایش قدرتمند است. اگر با Bootstrap 3 آشنا هستید، کارت ها جایگزین پانل ها، چاه ها و تصاویر کوچک قدیمی ما می شوند. عملکردی مشابه با آن اجزا به عنوان کلاس های اصلاح کننده برای کارت ها در دسترس است.

مثال

کارت‌ها با کمترین نشانه‌گذاری و سبک ممکن ساخته می‌شوند، اما همچنان کنترل و سفارشی‌سازی زیادی را ارائه می‌کنند. ساخته شده با فلکس باکس، هم ترازی آسان را ارائه می کنند و به خوبی با سایر اجزای Bootstrap ترکیب می شوند. آنها به marginطور پیش فرض هیچ ندارند، بنابراین در صورت نیاز از ابزارهای فاصله استفاده کنید .

در زیر نمونه ای از کارت پایه با محتوای ترکیبی و عرض ثابت آورده شده است. کارت‌ها هیچ عرض ثابتی برای شروع ندارند، بنابراین به طور طبیعی تمام عرض عنصر اصلی را پر می‌کنند. این به راحتی با گزینه های مختلف اندازه ما سفارشی می شود.

100% x180
عنوان کارت

چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.

برو یه جایی
<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>

انواع محتوا

کارت‌ها از محتوای متنوعی از جمله تصاویر، متن، گروه‌های فهرست، پیوندها و موارد دیگر پشتیبانی می‌کنند. در زیر نمونه هایی از موارد پشتیبانی شده آورده شده است.

بدن

بلوک سازنده یک کارت است .card-body. هر زمان که به یک بخش خالی در کارت نیاز دارید از آن استفاده کنید.

این مقداری متن در بدنه کارت است.
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

عنوان کارت با افزودن .card-titleبه یک <h*>برچسب استفاده می شود. .card-linkبه همین ترتیب لینک ها اضافه می شوند و با افزودن به یک <a>تگ در کنار یکدیگر قرار می گیرند .

زیرنویس با افزودن یک .card-subtitleبه یک <h*>برچسب استفاده می شود. اگر .card-titleو .card-subtitleموارد در یک .card-bodyآیتم قرار می گیرند، عنوان کارت و زیرنویس به خوبی تراز می شوند.

عنوان کارت
زیرنویس کارت

چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.

پیوند کارت پیوند دیگر
<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>

تصاویر

.card-img-topیک تصویر را در بالای کارت قرار می دهد. با .card-text، می توان متن را به کارت اضافه کرد. متن درون .card-textنیز می تواند با تگ های استاندارد HTML استایل دهی شود.

درپوش تصویر [100%x180]

چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.

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

لیست کردن گروه ها

لیستی از محتوا را در یک کارت با یک گروه فهرست هموار ایجاد کنید.

  • Cras justo odio
  • Dapibus ac facilisis in
  • دهلیزی در اروس
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
ویژه
  • Cras justo odio
  • Dapibus ac facilisis in
  • دهلیزی در اروس
<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>

سینک آشپزخانه

چندین نوع محتوا را با هم ترکیب کرده و مطابقت دهید تا کارت مورد نیاز خود را ایجاد کنید، یا همه چیز را در آنجا بیندازید. در زیر، سبک‌های تصویر، بلوک‌ها، سبک‌های متن و یک گروه فهرست نشان داده شده است که همه در یک کارت با عرض ثابت پیچیده شده‌اند.

درپوش تصویر [100%x180]
عنوان کارت

چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.

  • Cras justo odio
  • Dapibus ac facilisis in
  • دهلیزی در اروس
<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>

یک سرصفحه و/یا پاورقی اختیاری در کارت اضافه کنید.

ویژه
درمان عنوان ویژه

با متن پشتیبان زیر به عنوان راهنما طبیعی برای محتوای اضافی.

برو یه جایی
<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>

سرصفحه کارت را می توان با افزودن .card-headerبه <h*>عناصر استایل دهی کرد.

ویژه
درمان عنوان ویژه

با متن پشتیبان زیر به عنوان راهنما طبیعی برای محتوای اضافی.

برو یه جایی
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
نقل قول

Lorem ipsum dolor sit amet, consectetur adipiscing elit. عدد صحیح posuere erat a ante.

شخصی معروف در عنوان منبع
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
ویژه
درمان عنوان ویژه

با متن پشتیبان زیر به عنوان راهنما طبیعی برای محتوای اضافی.

برو یه جایی
<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>

سایز بندی

کارت‌ها برای شروع کار خاصی را فرض نمی‌کنند width، بنابراین 100% پهن خواهند بود مگر اینکه خلاف آن ذکر شده باشد. می‌توانید این مورد را در صورت نیاز با CSS سفارشی، کلاس‌های گرید، میکس‌های Grid Sass یا ابزارهای کمکی تغییر دهید.

استفاده از نشانه گذاری شبکه

با استفاده از شبکه، کارت ها را در صورت نیاز در ستون ها و ردیف ها بپیچید.

درمان عنوان ویژه

با متن پشتیبان زیر به عنوان راهنما طبیعی برای محتوای اضافی.

برو یه جایی
درمان عنوان ویژه

با متن پشتیبان زیر به عنوان راهنما طبیعی برای محتوای اضافی.

برو یه جایی
<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>

با استفاده از خدمات شهری

برای تنظیم سریع عرض کارت از تعداد انگشت شماری از ابزارهای اندازه گیری موجود ما استفاده کنید.

عنوان کارت

با متن پشتیبان زیر به عنوان راهنما طبیعی برای محتوای اضافی.

دکمه
عنوان کارت

با متن پشتیبان زیر به عنوان راهنما طبیعی برای محتوای اضافی.

دکمه
<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>

استفاده از CSS سفارشی

از CSS سفارشی در شیوه نامه های خود یا به عنوان سبک های درون خطی برای تنظیم عرض استفاده کنید.

درمان عنوان ویژه

با متن پشتیبان زیر به عنوان راهنما طبیعی برای محتوای اضافی.

برو یه جایی
<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" 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 مقداری پیمایش به سرصفحه (یا بلوک) کارت اضافه کنید.

درمان عنوان ویژه

با متن پشتیبان زیر به عنوان راهنما طبیعی برای محتوای اضافی.

برو یه جایی
<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>
درمان عنوان ویژه

با متن پشتیبان زیر به عنوان راهنما طبیعی برای محتوای اضافی.

برو یه جایی
<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>

تصاویر

کارت ها شامل چند گزینه برای کار با تصاویر هستند. از میان افزودن «کلاه‌های تصویر» در دو انتهای کارت، پوشاندن تصاویر با محتوای کارت، یا به سادگی جاسازی تصویر در کارت، انتخاب کنید.

سرپوش های تصویری

همانند سرصفحه‌ها و پاورقی‌ها، کارت‌ها می‌توانند شامل «کلاه‌های تصویر» بالا و پایین باشند—تصاویر در بالا یا پایین کارت.

100% x180
عنوان کارت

این یک کارت گسترده تر با متن پشتیبانی در زیر به عنوان یک راهنما طبیعی به محتوای اضافی است. این محتوا کمی طولانی تر است.

آخرین به روز رسانی 3 دقیقه قبل

عنوان کارت

این یک کارت گسترده تر با متن پشتیبانی در زیر به عنوان یک راهنما طبیعی به محتوای اضافی است. این محتوا کمی طولانی تر است.

آخرین به روز رسانی 3 دقیقه قبل

100% x180
<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>

پوشش های تصویر

یک تصویر را به پس‌زمینه کارت تبدیل کنید و روی متن کارت خود قرار دهید. بسته به تصویر، ممکن است به سبک ها یا ابزارهای اضافی نیاز داشته باشید یا نباشید.

100% x270
عنوان کارت

این یک کارت گسترده تر با متن پشتیبانی در زیر به عنوان یک راهنما طبیعی به محتوای اضافی است. این محتوا کمی طولانی تر است.

آخرین به روز رسانی 3 دقیقه قبل

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

سبک های کارت

کارت‌ها شامل گزینه‌های مختلفی برای سفارشی کردن پس‌زمینه، حاشیه‌ها و رنگ آن‌ها هستند.

زمینه و رنگ

از ابزارهای متن و پس زمینه برای تغییر ظاهر کارت استفاده کنید.

سرتیتر
عنوان کارت اصلی

چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.

سرتیتر
عنوان کارت ثانویه

چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.

سرتیتر
عنوان کارت موفقیت

چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.

سرتیتر
عنوان کارت خطر

چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.

سرتیتر
عنوان کارت اخطار

چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.

سرتیتر
عنوان کارت اطلاعات

چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.

سرتیتر
عنوان کارت نور

چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.

سرتیتر
عنوان کارت تیره

چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.

<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>
انتقال معنا به فناوری های کمکی

استفاده از رنگ برای افزودن معنی فقط یک نشانه بصری ارائه می دهد که به کاربران فناوری های کمکی - مانند صفحه خوان ها - منتقل نمی شود. اطمینان حاصل کنید که اطلاعات مشخص شده با رنگ یا از خود محتوا واضح است (مثلاً متن قابل مشاهده)، یا از طریق ابزارهای جایگزین، مانند متن اضافی پنهان شده با .sr-onlyکلاس، گنجانده شده است.

مرز

از ابزارهای مرزی برای تغییر فقط border-colorکارت استفاده کنید. توجه داشته باشید که می‌توانید طبق شکل زیر .text-{color}کلاس‌هایی را روی والد .cardیا زیرمجموعه‌ای از محتویات کارت قرار دهید.

سرتیتر
عنوان کارت اصلی

چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.

سرتیتر
عنوان کارت ثانویه

چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.

سرتیتر
عنوان کارت موفقیت

چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.

سرتیتر
عنوان کارت خطر

چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.

سرتیتر
عنوان کارت اخطار

چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.

سرتیتر
عنوان کارت اطلاعات

چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.

سرتیتر
عنوان کارت نور

چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.

سرتیتر
عنوان کارت تیره

چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.

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

ابزارهای کاربردی را مخلوط می کند

همچنین می‌توانید حاشیه‌های سرصفحه و پاورقی کارت را در صورت نیاز تغییر دهید و حتی آن‌ها را background-colorبا .bg-transparent.

سرتیتر
عنوان کارت موفقیت

چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.

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

چیدمان کارت

بوت استرپ علاوه بر استایل دادن به محتوا در کارت ها، چند گزینه برای چیدمان سری کارت ها نیز دارد. در حال حاضر، این گزینه‌های طرح‌بندی هنوز پاسخگو نیستند.

گروه های کارت

از گروه های کارت برای رندر کردن کارت ها به عنوان یک عنصر منفرد و متصل با ستون های عرض و ارتفاع یکسان استفاده کنید. گروه های کارت display: flex;برای رسیدن به اندازه یکنواخت خود استفاده می کنند.

100% x180
عنوان کارت

این یک کارت گسترده تر با متن پشتیبانی در زیر به عنوان یک راهنما طبیعی به محتوای اضافی است. این محتوا کمی طولانی تر است.

آخرین به روز رسانی 3 دقیقه قبل

100% x180
عنوان کارت

این کارت دارای متن پشتیبان در زیر به عنوان راهنما طبیعی برای محتوای اضافی است.

آخرین به روز رسانی 3 دقیقه قبل

100% x180
عنوان کارت

این یک کارت گسترده تر با متن پشتیبانی در زیر به عنوان یک راهنما طبیعی به محتوای اضافی است. این کارت حتی محتوای طولانی‌تری نسبت به کارت اول دارد که عملکرد ارتفاع برابر را نشان می‌دهد.

آخرین به روز رسانی 3 دقیقه قبل

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

هنگام استفاده از گروه های کارت با پاورقی، محتوای آنها به طور خودکار ردیف می شود.

100% x180
عنوان کارت

این یک کارت گسترده تر با متن پشتیبانی در زیر به عنوان یک راهنما طبیعی به محتوای اضافی است. این محتوا کمی طولانی تر است.

100% x180
عنوان کارت

این کارت دارای متن پشتیبان در زیر به عنوان راهنما طبیعی برای محتوای اضافی است.

100% x180
عنوان کارت

این یک کارت گسترده تر با متن پشتیبانی در زیر به عنوان یک راهنما طبیعی به محتوای اضافی است. این کارت حتی محتوای طولانی‌تری نسبت به کارت اول دارد که عملکرد ارتفاع برابر را نشان می‌دهد.

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

عرشه های کارت

آیا به مجموعه ای از کارت های عرض و ارتفاع مساوی نیاز دارید که به یکدیگر متصل نباشند؟ از عرشه کارت استفاده کنید.

100% x 200
عنوان کارت

این یک کارت طولانی‌تر با متن پشتیبانی در زیر به‌عنوان یک راهنما طبیعی برای محتوای اضافی است. این محتوا کمی طولانی تر است.

آخرین به روز رسانی 3 دقیقه قبل

100% x 200
عنوان کارت

این کارت دارای متن پشتیبان در زیر به عنوان راهنما طبیعی برای محتوای اضافی است.

آخرین به روز رسانی 3 دقیقه قبل

100% x 200
عنوان کارت

این یک کارت گسترده تر با متن پشتیبانی در زیر به عنوان یک راهنما طبیعی به محتوای اضافی است. این کارت حتی محتوای طولانی‌تری نسبت به کارت اول دارد که عملکرد ارتفاع برابر را نشان می‌دهد.

آخرین به روز رسانی 3 دقیقه قبل

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

درست مانند گروه‌های کارت، پاورقی‌های کارت در عرشه‌ها به‌طور خودکار ردیف می‌شوند.

100% x180
عنوان کارت

این یک کارت گسترده تر با متن پشتیبانی در زیر به عنوان یک راهنما طبیعی به محتوای اضافی است. این محتوا کمی طولانی تر است.

100% x180
عنوان کارت

این کارت دارای متن پشتیبان در زیر به عنوان راهنما طبیعی برای محتوای اضافی است.

100% x180
عنوان کارت

این یک کارت گسترده تر با متن پشتیبانی در زیر به عنوان یک راهنما طبیعی به محتوای اضافی است. این کارت حتی محتوای طولانی‌تری نسبت به کارت اول دارد که عملکرد ارتفاع برابر را نشان می‌دهد.

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

ستون های کارت

کارت‌ها را می‌توان در ستون‌های ماسونی‌مانند فقط با CSS با قرار دادن آنها در.card-columns . کارت ها با ویژگی های CSS columnبه جای flexbox برای تراز آسان تر ساخته شده اند. کارت ها از بالا به پایین و از چپ به راست مرتب می شوند.

سر بالا! مسافت پیموده شده شما با ستون های کارت ممکن است متفاوت باشد. برای جلوگیری از شکستن کارت‌ها در ستون‌ها، باید آن‌ها را طوری تنظیم کنیم که display: inline-blockهنوز column-break-inside: avoidراه‌حلی ضد گلوله نیست.

100% x160
عنوان کارت که به یک خط جدید بسته می شود

این یک کارت طولانی‌تر با متن پشتیبانی در زیر به‌عنوان یک راهنما طبیعی برای محتوای اضافی است. این محتوا کمی طولانی تر است.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. عدد صحیح posuere erat a ante.

شخصی معروف در عنوان منبع
100% x160
عنوان کارت

این کارت دارای متن پشتیبان در زیر به عنوان راهنما طبیعی برای محتوای اضافی است.

آخرین به روز رسانی 3 دقیقه قبل

Lorem ipsum dolor sit amet, consectetur adipiscing elit. عدد صحیح posuere erat.

شخصی معروف در عنوان منبع
عنوان کارت

این کارت دارای عنوان منظم و پاراگراف کوتاهی از متن در زیر آن است.

آخرین به روز رسانی 3 دقیقه قبل

100% x260

Lorem ipsum dolor sit amet, consectetur adipiscing elit. عدد صحیح posuere erat a ante.

شخصی معروف در عنوان منبع
عنوان کارت

این کارت دیگری با عنوان و متن پشتیبانی در زیر است. این کارت دارای محتوای اضافی است تا در کل کمی بلندتر شود.

آخرین به روز رسانی 3 دقیقه قبل

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

ستون های کارت را نیز می توان با برخی کدهای اضافی گسترش داد و سفارشی کرد. در زیر یک فرمت .card-columnsکلاس با استفاده از همان CSS که ما استفاده می کنیم - ستون های CSS - برای ایجاد مجموعه ای از لایه های پاسخگو برای تغییر تعداد ستون ها استفاده می کنیم.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}