کارت ها در Bootstrap 5

کارت ها در Bootstrap 5

 

کارت های Bootstrap بستری قابل انعطاف و قابل توسعه با اشکال و امکانات مختلف ، برای ارائه ی محتوا فراهم می کند. مثلاً کارت زیر یک نمونه از کارت های بوت استرپ است:

 

 

درباره

 

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

 

 

مثال

 

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

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

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Clicksite</h5>
    <p class="card-text">Software engineer, software developer and web designer. You can contact me via email at clicksite.ir@gmail.com. </p>
    <a href="#" class="btn btn-primary">Send Email</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 نیز تغییر استایل داد.

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

 

 

گروه های لیستی

 

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

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

 

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

 

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

 

 

محتویات متنوع در یک کارت

 

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

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

 

 

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

 

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

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

 

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

 

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

 

 

سایز بندی

 

به صورت پیش فرض کارتها عرض خاصی ندارند ، بنابراین 100٪ عرض تگی که در آن هستند را پر می کنند ، مگر اینکه خلاف آن را تنظیم کنید. در صورت لزوم می توانید این مورد را با CSS های سفارشی ، کلاس های grid یا mixin های  grid در Sass  یا سایر ابزارهای کمکی تغییر دهید.

 

 

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

 

می توانید با استفاده از grid (شبکه بندی بوت استرپ)، در صورت نیاز کارتها را در ستون ها و ردیف ها قرار بدید.

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

 

 

استفاده از utility ها

 

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

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

<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" href="#" tabindex="-1" aria-disabled="true">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="#" tabindex="-1" aria-disabled="true">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>

 

 

تصاویر

 

کارت ها شامل چند گزینه برای استفاده از تصاویر هستند. می توان از بین گزینه های افزودن " درپوش های تصویری " ( image caps  ) در دو انتهای کارت ، همپوشانی ( overlaying ) تصاویر با محتوای کارت یا جاسازی ساده تصویر در کارت ، انتخاب کنید.

 

 

درپوش های تصویری (image caps )

 

کارتها می توانند مانند سرصفحه ها و پاورقی ها "درپوش های تصویری"  (image caps یا تصاویر در بالا یا پایین کارت) داشته باشند.

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

 

 

همپوشانی های تصویر (overlaying )

 

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

<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

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

 

 

کارت افقی

 

با استفاده از ترکیبی از کلاسهای کمکی و شبکه بندی (grid) ، کارت ها را می توان در یک طراحی واکنش گرا و سازگار با موبایل ، افقی ساخت. در مثال زیر ، ما فضای خالی شبکه grid را با کلاس g-0 برداشته و از کلاسهای *-col-md برای افقی کردن کارت در نقطه شکست md استفاده می کنیم. بسته به محتوای کارت شما ممکن است نیاز به تنظیمات بیشتری باشد.

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." 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>

 

 

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

 

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

 

 

پس زمینه و رنگ ها

 

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

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

 

 

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

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

 

 

خط حاشیه ای

 

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

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

 

 

استفاده ترکیبی از ابزارها

 

در صورت لزوم می توانید حاشیه های مربوط به سرصفحه و پاورقی کارت را تغییر دهید و حتی رنگ پس زمینه آنها را با کلاس 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>

 

 

طرح کارت

 

علاوه بر استایل دادن به مطالب درون کارت ها ، Bootstrap شامل چند گزینه برای قرار دادن مجموعه ای از کارت ها است. ولی متاسفانه در حال حاضر ، این گزینه های طرح بندی هنوز واکنش گرا نیستند.

 

 

کارت های گروهی

 

از گروه های کارت برای ارائه کارتها به عنوان یک عنصر متصل و منفرد با ستون های هم عرض و هم ارتفاع استفاده کنید. گروه های کارت در حالت اولیه در یک ستون بالای همدیگر قرار دارند و از ویژگی display: flex استفاده می کنند تا در نقطه شکست (نقطه شکست یا Break Point نقطه ای است که استایل های اعمال شده به سند تغییر می کند) در عرض خاصی کنار هم قرار گیرند.

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

 

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

<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 چهار کارت در چندین ردیف را از نقطه تقسیم متوسط (medium) به بالا ، با عرض برابر تقسیم می کند.

<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 تغییر دهید و مشاهده می کنید که کارت چهارم در ردیف دوم قرار می گیرد.

 

<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 را به کارتها اضافه کنید. اگر به طور پیش فرض ارتفاع مساوی می خواهید ، می توانید %100:card-height$ را در Sass تنظیم کنید.

 

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

 

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

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

 

 

Masonry

 

در نسخه چهارم بوت استرپ از یک تکنیک CSS برای تقلید از ظاهر ستونهای شبیه آجر های بنایی (مانند تصویر بالا) استفاده شده بود ، اما این روش با بسیاری از مشکلات جانبی ناخوشایندی همراه بود. اگر می خواهید این نوع طرح را در نسخه ۵ بوت استرپ داشته باشید ، می توانید از پلاگین Masonry استفاده کنید.توجه داشته باشید که Masonry جزئی از Bootstrap 5 نیست ، اما برای آشنایی می توانید از این نمونه آزمایشی استفاده کنید.

 

 

متغیرهای Sass

 

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer / 2;
$card-border-width:                 $border-width;
$card-border-radius:                $border-radius;
$card-border-color:                 rgba($black, .125);
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y / 2;
$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 / 2;