کارت ها

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

در این صفحه

در باره

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

مثال

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

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

عنوان کارت

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

برو یه جایی

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>

انواع محتوا

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

بدن

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

این مقداری متن در بدنه کارت است.

html

<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آیتم قرار می گیرند، عنوان کارت و زیرنویس به خوبی تراز می شوند.

عنوان کارت

زیرنویس کارت

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

پیوند کارت پیوند دیگر

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>

تصاویر

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

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

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>

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

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

یک آیتم
یک مورد دوم
مورد سوم

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>

ویژه

یک آیتم
یک مورد دوم
مورد سوم

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>

یک آیتم
یک مورد دوم
مورد سوم

پاورقی کارت

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>

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

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

عنوان کارت

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

یک آیتم
یک مورد دوم
مورد سوم

پیوند کارت پیوند دیگر

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>

سربرگ و پاورقی

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

ویژه

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

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

برو یه جایی

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>

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

ویژه

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

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

برو یه جایی

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>

نقل قول

یک نقل قول شناخته شده، موجود در یک عنصر blockquote.

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

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>

ویژه

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

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

برو یه جایی

2 روز پیش

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>

سایز بندی

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

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

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

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

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

برو یه جایی

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

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

برو یه جایی

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>

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

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

عنوان کارت

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

دکمه

عنوان کارت

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

دکمه

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>

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

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

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

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

برو یه جایی

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>

تراز متن

می‌توانید به‌سرعت هم‌ترازی نوشتار هر کارتی را - در کل یا بخش‌های خاص آن - با کلاس‌های تراز متن ما تغییر دهید .

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

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

برو یه جایی

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

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

برو یه جایی

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

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

برو یه جایی

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

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

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

برو یه جایی

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>

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

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

برو یه جایی

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>

تصاویر

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

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

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

عنوان کارت

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

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

عنوان کارت

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

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>

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

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

عنوان کارت

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

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>

توجه داشته باشید که محتوا نباید بزرگتر از ارتفاع تصویر باشد. اگر محتوا بزرگتر از تصویر باشد، محتوا خارج از تصویر نمایش داده می شود.

افقی

با استفاده از ترکیبی از کلاس‌های شبکه و ابزار، کارت‌ها را می‌توان به صورت افقی به روشی سازگار با موبایل و پاسخگو ساخت. در مثال زیر، ناودان‌های شبکه را با کلاس‌ها حذف می‌کنیم .g-0و از .col-md-*کلاس‌ها برای افقی کردن کارت در mdنقطه شکست استفاده می‌کنیم. بسته به محتوای کارت شما ممکن است تنظیمات بیشتری لازم باشد.

عنوان کارت

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

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>

سبک های کارت

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

زمینه و رنگ

اضافه شده در نسخه 5.2.0

با کمکیاران ما یک background-colorپیش زمینه متضاد تنظیم کنید . قبلاً لازم بود که به صورت دستی انتخاب و ابزارهای کاربردی برای یک ظاهر طراحی شده جفت شوند که در صورت تمایل همچنان می توانید از آنها استفاده کنید.color.text-bg-{color}.text-{color}.bg-{color}

سرتیتر

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

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

سرتیتر

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

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

سرتیتر

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

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

سرتیتر

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

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

سرتیتر

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

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

سرتیتر

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

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

سرتیتر

عنوان کارت نور

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

سرتیتر

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

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

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>

انتقال معنا به فناوری های کمکی

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

مرز

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

سرتیتر

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

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

سرتیتر

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

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

سرتیتر

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

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

سرتیتر

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

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

سرتیتر

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

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

سرتیتر

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

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

سرتیتر

عنوان کارت نور

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

سرتیتر

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

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

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>

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

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

سرتیتر

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

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

پاورقی

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>

چیدمان کارت

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

گروه های کارت

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

عنوان کارت

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

عنوان کارت

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

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

عنوان کارت

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

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

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>

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

عنوان کارت

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

عنوان کارت

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

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

عنوان کارت

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

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>

کارت های شبکه

از سیستم شبکه Bootstrap و .row-colsکلاس‌های آن برای کنترل تعداد ستون‌های شبکه (که دور کارت‌های شما پیچیده شده‌اند) در هر ردیف استفاده کنید. به عنوان مثال، در اینجا قرار .row-cols-1دادن کارت ها در یک ستون، و .row-cols-md-2تقسیم چهار کارت به عرض مساوی در چندین ردیف، از نقطه شکست متوسط به بالا است.

عنوان کارت

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

عنوان کارت

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

عنوان کارت

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>

آن را به تغییر دهید .row-cols-3و چهارمین بسته بندی کارت را خواهید دید.

عنوان کارت

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

عنوان کارت

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>

هنگامی که به ارتفاع مساوی نیاز دارید، .h-100به کارت ها اضافه کنید. اگر به طور پیش فرض ارتفاع مساوی می خواهید، می توانید $card-height: 100%در Sass تنظیم کنید.

عنوان کارت

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

عنوان کارت

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

عنوان کارت

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>

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

عنوان کارت

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

عنوان کارت

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

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

عنوان کارت

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

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>

سنگ تراشی

ما از v4یک تکنیک فقط CSS برای تقلید از رفتار ستون‌های ماسونری استفاده کردیم، اما این تکنیک با عوارض جانبی ناخوشایندی همراه بود . اگر می‌خواهید این نوع طرح‌بندی v5را داشته باشید، فقط می‌توانید از افزونه Masonry استفاده کنید. سنگ تراشی در Bootstrap گنجانده نشده است ، اما ما یک نمونه آزمایشی برای کمک به شما برای شروع ایجاد کرده ایم.

CSS

متغیرها

اضافه شده در نسخه 5.2.0

به عنوان بخشی از رویکرد متغیرهای CSS در حال تکامل Bootstrap، کارت‌ها اکنون از متغیرهای CSS محلی .cardبرای سفارشی‌سازی در زمان واقعی استفاده می‌کنند. مقادیر برای متغیرهای CSS از طریق Sass تنظیم می‌شوند، بنابراین سفارشی‌سازی Sass نیز همچنان پشتیبانی می‌شود.

  --#{$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

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

کارت ها

در باره

مثال

عنوان کارت

انواع محتوا

بدن

عناوین، متن و پیوندها

عنوان کارت

زیرنویس کارت

تصاویر

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

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

عنوان کارت

سربرگ و پاورقی

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

ویژه

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

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

سایز بندی

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

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

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

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

عنوان کارت

عنوان کارت

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

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

تراز متن

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

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

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

جهت یابی

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

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

تصاویر

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

عنوان کارت

عنوان کارت

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

عنوان کارت

افقی

عنوان کارت

سبک های کارت

زمینه و رنگ

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

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

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

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

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

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

عنوان کارت نور

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

انتقال معنا به فناوری های کمکی

مرز

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

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

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

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

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

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

عنوان کارت نور

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

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

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

چیدمان کارت

گروه های کارت

عنوان کارت

عنوان کارت

عنوان کارت

عنوان کارت

عنوان کارت

عنوان کارت

کارت های شبکه

عنوان کارت

عنوان کارت

عنوان کارت

عنوان کارت

عنوان کارت

عنوان کارت

عنوان کارت