استایل اصلی کارت ها

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

html

<div class="card card-style">
  <div class="content UTILITY_SPACING">
    <h1>Hello.</h1>
    <p>I am a card.</p>
  </div>
</div>

خط 1 تگ div را به عنوان یک کارت تعریف می کند. اضافه کردن کارت به سبک حاشیه ها و سایه های گرد ایجاد می کند و همچنین یک حاشیه بین آن و لبه ها باقی می گذارد.
خط 2 محتوای کارت است. این یک حاشیه در داخل خود کارت ایجاد می کند تا محتوا را حفظ کند.

توجه داشته باشید که یک فضای UTILITY_SPACING در محتوا باقی مانده است. این میتواند برای افزودن کلاس های کمکی همانطور که در راهنمای اصلی برای تنظیم فضای بین محتوا و کارت ذکر شده است استفاده شود. برای مثال، فرض کنید میخواهید هیچ حاشیه‌ای برای محتوای خود نداشته باشید، سپس به جای UTILITY_SPACING، mb-0 را اضافه کنید. میتوانید از هر کلاس کمکی قالب یا بوت‌استرپ در اینجا استفاده کنید همانطور که در فصل کلاس‌ های کمکی توضیح داده شد.

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