کارتها Cards

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

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

برای نمایش انواع مختلف به مثالهای زیر توجه کنید.

مثال

LTR

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

RTL

عنوان کارت

این یک متن آزمایشی است برای ساختن بدنه کارت.

برو یه جایی

اجزا

کارتهای به چند بخش تقسیم شده اند، بخش مهم که بدنه است، با کلاس card-body مشخص میشود، شما در این کلاس میتوانید اطلاعات مد نظر را درج کنید. طبیعی است از سیستم فاصله گذاری مرتب سازی و غیره برای بهبود نمایش استفاده کنید.

LTR

This is some text within a card body.

RTL

این یک متن آزمایش است برای آنکه ببینید متن درون بدنه چگونه نمایش داده میشود.

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

درون بدنه شما میتوانید از انواع هدینگ h? استفاده کنید، بهتر است کلاس card-title را نیز اضافه کنید.

برای اضافه کردن زیر تیتر، میتوانید از یک هدینگ کوچکتر با کلاس card-subtitle استفاده کنید، این کلاس، جایگاه نمایش را بهبود میدهد.

برای درج لینکها، کلاس card-link را نیز اضافه کنید.

LTR

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

RTL

عنوان کارت

زیر عنوان

این یک متن آزمایش است برای آنکه ببینید متن درون بدنه چگونه نمایش داده میشود.

لینک کارت لینکی دیگر

تصویر

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

LTR

Some quick example text to build on the card title and make up the bulk of the card's content.

RTL

این یک متن آزمایش است برای آنکه ببینید متن درون بدنه چگونه نمایش داده میشود.

هدر، فوتر و لیست

شما میتوانید در کارت خود یک لیست بدون لبه داشته باشید، برای همین منظور یک لیست با کلاس list-noedge در کارت خود قرار دهید.

همچنین میتوانید برای کارت خود یک هدر داشته باشید، برای همین یک div با کلاس card-header اضافه کنید.

اگر تمایل دارید برای کارت خود یک فوتر داشته باشید، یک div با کلاس card-footer اضافه کنید.

LTR

Item 1 Item 2 Item 3

Featured

Item 1 Item 2 Item 3

Featured

Item 1 Item 2 Item 3

Card Footer

RTL

گزینه 1 گزینه 2 گزینه 3

ویژه

گزینه 1 گزینه 2 گزینه 3

ویژه

گزینه 1 گزینه 2 گزینه 3

فوتر کارت

مخلوط اجزاء

برای ساخت کارت دلخواه خود میتوانید مجموعه ای از اجزاء را کنار هم قرار دهید تا کارت دلخواه خود را بسازید.

LTR

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Item 1 Item 2 Item 3

Card link Another link

RTL

عنوان کارت

زیر عنوان

این یک متن آزمایش است برای آنکه ببینید متن درون بدنه چگونه نمایش داده میشود.

گزینه 1 گزینه 2 گزینه 3

لینک کارت لینکی دیگر

اندازه گذاری

کارتها به صورت پیش فرض اندازه 100% را دارند، اگر میخواهید از اندازه خاصی استفاده کنید، میتوانید از کلاسهای مرتبط با اندازه عرض w-? استفاده کنید.

همچنین برای تغییر اندازه کلی میتوانید از کلاس های مرتبط با اندازه s-? استفاده کنید.

LTR

Small size

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Item 1 Item 2 Item 3

Card link Another link

RTL

اندازه کوچک

عنوان کارت

زیر عنوان

این یک متن آزمایش است برای آنکه ببینید متن درون بدنه چگونه نمایش داده میشود.

گزینه 1 گزینه 2 گزینه 3

لینک کارت لینکی دیگر

پوشش تصویر

اگر میخواهید بدنه بر روی تصویر قرار گیرد، به صورتیکه تصویر در پس زمینه قرار گیرد، میتوانید از کلاس card-overlay برای بدنه استفاده کنید.

توجه داشته باشید فقط یک card-body card-overlay میتوانید داشته باشید.

LTR

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

RTL

عنوان کارت

این یک متن آزمایشی است برای ساختن بدنه کارت.

برو یه جایی

کارت افقی

اگر میخواهید چینش درون کارت را تغییر دهید و به صورت افقی نمایش دهید به مثال زیر توجه کنید.

LTR

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

RTL

عنوان کارت

این یک متن آزمایشی است برای ساختن بدنه کارت.

برو یه جایی

رنگها

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

LTR

Header

Some quick example text to build on the card title and make up the bulk of the card's content.

Footer

Header

Some quick example text to build on the card title and make up the bulk of the card's content.

Footer

Header

Some quick example text to build on the card title and make up the bulk of the card's content.

Footer

Header

Some quick example text to build on the card title and make up the bulk of the card's content.

Footer

Header

Some quick example text to build on the card title and make up the bulk of the card's content.

Footer

RTL

عنوان

این یک متن آزمایشی است برای ساختن بدنه کارت.

پانوشت

عنوان

این یک متن آزمایشی است برای ساختن بدنه کارت.

پانوشت

عنوان

این یک متن آزمایشی است برای ساختن بدنه کارت.

پانوشت

عنوان

این یک متن آزمایشی است برای ساختن بدنه کارت.

پانوشت

عنوان

این یک متن آزمایشی است برای ساختن بدنه کارت.

پانوشت

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

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

LTR

Header

Some quick example text to build on the card title and make up the bulk of the card's content.

Footer

Header

Some quick example text to build on the card title and make up the bulk of the card's content.

Footer

Header

Some quick example text to build on the card title and make up the bulk of the card's content.

Footer

RTL

عنوان

این یک متن آزمایشی است برای ساختن بدنه کارت.

پانوشت

عنوان

این یک متن آزمایشی است برای ساختن بدنه کارت.

پانوشت

عنوان

این یک متن آزمایشی است برای ساختن بدنه کارت.

پانوشت

نمایش توری

با استفاده از کلاس های row و col ساختار چینش و اندازه دلخواه کارتها را مشخص کنید.

LTR

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

RTL

عنوان کارت

این یک متن آزمایشی است برای ساختن بدنه کارت.

برو یه جایی

عنوان کارت

این یک متن آزمایشی است برای ساختن بدنه کارت.

برو یه جایی