کارت ها

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

مثال پایه

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

عنوان کارت

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم

رفتن به لینک

انواع محتوا

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

بدنه (Body)

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

عنوان، متن و لینک

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

تصاویر

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

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم

لیست گروهی

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

هدر و فوتر

یک هدر/فوتر اختیاری در کارت اضافه کنید.

سایزها

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

نوار ناوبری کارت

با اجزای ناوبری بوت استرپ مقداری پیمایش به هدر (یا بلوک) کارت اضافه کنید.

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

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

عنوان کارت

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم

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

پس زمینه رنگی

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

کارت گروهی

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

عنوان کارت

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم

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

عنوان کارت

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم متن ساختگی

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

عنوان کارت

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم متن ساختگی

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

شبکه بندی کارت ها

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

عنوان کارت

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم متن ساختگی

عنوان کارت

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم متن ساختگی

عنوان کارت

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم متن ساختگی

عنوان کارت

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم متن ساختگی