کارتها Cards
میخواهید اطلاعاتی را به صورت کارت مانند در اختیار کاربر قرار دهید، کارتها در این خصوص به شما کمک خواهند کرد.
ما تعدادی از حالات کارت را پیاده سازی کردیم، ولیکن انواع مختلفی از نمایش کارتها وجود دارد، که شما میتوانید با تغییر در استایل سیستم فاصله گذاری، رنگ بندی و ... آنرا بهبود دهید.
برای نمایش انواع مختلف به مثالهای زیر توجه کنید.
مثال
LTR
![](/images/WN01.png)
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereRTL
![](/images/WN01.png)
اجزا
کارتهای به چند بخش تقسیم شده اند، بخش مهم که بدنه است، با کلاس
LTR
RTL
عنوان، متن و لینک
درون بدنه شما میتوانید از انواع هدینگ
برای اضافه کردن زیر تیتر، میتوانید از یک هدینگ کوچکتر با کلاس
برای درج لینکها، کلاس
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 linkRTL
عنوان کارت
زیر عنوان
این یک متن آزمایش است برای آنکه ببینید متن درون بدنه چگونه نمایش داده میشود.
لینک کارت لینکی دیگر
تصویر
شما میتوانید هر تصویری را در کارت خود داشته باشید، کافیست از کلاس
LTR
![](/images/WN01.png)
![](/images/WN01.png)
![](/images/WN01.png)
![](/images/WN01.png)
RTL
![](/images/WN01.png)
![](/images/WN01.png)
![](/images/WN01.png)
![](/images/WN01.png)
هدر، فوتر و لیست
شما میتوانید در کارت خود یک لیست بدون لبه داشته باشید، برای همین منظور یک لیست با کلاس
همچنین میتوانید برای کارت خود یک هدر داشته باشید، برای همین یک div با کلاس
اگر تمایل دارید برای کارت خود یک فوتر داشته باشید، یک div با کلاس
مخلوط اجزاء
برای ساخت کارت دلخواه خود میتوانید مجموعه ای از اجزاء را کنار هم قرار دهید تا کارت دلخواه خود را بسازید.
LTR
![](/images/WN01.png)
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
RTL
![](/images/WN01.png)
عنوان کارت
زیر عنوان
این یک متن آزمایش است برای آنکه ببینید متن درون بدنه چگونه نمایش داده میشود.
اندازه گذاری
کارتها به صورت پیش فرض اندازه 100% را دارند، اگر میخواهید از اندازه خاصی استفاده کنید، میتوانید از کلاسهای مرتبط با اندازه عرض
همچنین برای تغییر اندازه کلی میتوانید از کلاس های مرتبط با اندازه
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.
RTL
عنوان کارت
زیر عنوان
این یک متن آزمایش است برای آنکه ببینید متن درون بدنه چگونه نمایش داده میشود.
پوشش تصویر
اگر میخواهید بدنه بر روی تصویر قرار گیرد، به صورتیکه تصویر در پس زمینه قرار گیرد، میتوانید از کلاس
توجه داشته باشید فقط یک
LTR
![](/images/WN01.png)
RTL
![](/images/WN01.png)
کارت افقی
اگر میخواهید چینش درون کارت را تغییر دهید و به صورت افقی نمایش دهید به مثال زیر توجه کنید.
LTR
![](/images/tools128.png)
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereRTL
![](/images/tools128.png)
رنگها
با استفاده از سیستم رنگ بندی، رنگهای متفاوت را تجربه کنید
LTR
RTL
کارتهای گروهی
با استفاده از سیستم رنگ بندی، رنگهای متفاوت را تجربه کنید
LTR
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 somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereRTL