کارت ها

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

کاری که ما انجام دادیم این بود که کد آن‌ها را با افزودن گزینه‌هایی برای پس‌زمینه‌های سفارشی، تصاویر، بارگذاری تنبل(lazyload)، حاشیه‌های گرد، سایه‌ها و خیلی چیزهای دیگر، کد آن‌ها را کمی بهبود بخشیم تا حتی بهتر از آنچه که هست، شود.

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

2 نوع کارت وجود دارد. کارت ساده "Expanding Card" که بسته به محتوای داخل آن گسترش مییابد و کارت "Height Control" که در آن میتوانید از انعطاف بیشتری در محتوای آنها استفاده کنید.

Expanding Card

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

html

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

خط 1 دارای کلاس و سبک های مورد نیاز برای حاشیه های گرد و مارجین از کنار صفحه است. شما همچنین میتوانید کلاس کمکی را اضافه کنید.

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

با استفاده از سیستم دقیقی که در اینجا توضیح داده شد، نحوه ایجاد کارت ها در صفحات component-cards-gradient.html و component-cards-content.html است. برای درک بهتر و دیدن کد این المان ها میتوانید این صفحات را برای بررسی کنید.

Height Control

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

html

<div class="card UTILITY_STYLING" data-card-height="VALUE">
  <!--- Card types go here-->
  <div class="card-overlay bg-VALUE opacity-VALUE"></div>
</div>

این ساختار اولیه یک کارت با کنترل ارتفاع است. بیایید توضیح دهیم که چگونه کار میکند.

خط 1 دارای کلاس کارت و سبک کارت است که در ابتدای این راهنما توضیح دادیم، اما شما همچنین میتوانید کلاس های کمکی کمکی را اضافه کنید.

خط 1 همچنین دارای گزینه data-card-height است. این مقدار را میتوان بر حسب پیکسل بیان کرد، به عنوان مثال data-card-height=300 یا اگر میخواهید کارت در اندازه کامل صفحه باشد، از data-card-height="cover" استفاده کنید.

خط 2 جایی است که انواع کارت اضافه میشود که در زیر توضیح داده خواهد شد.

خط 3 همپوشانی کارت شما است، به این معنی که رنگ پس زمینه روی تصویر، اما زیر متن قرار میگیرد. در "Expanding card" این رنگ در خط اول اضافه شده است، اما در اینجا، خط اول تصویر پس زمینه است و ما از رنگ برای قرار دادن روی تصویر استفاده میکنیم. bg-VALUE را با رنگی که میخواهید از فهرست رنگ‌های موجود در راهنمای اصلی و در قسمت رنگ ها و opacity-VALUE را با شفافیت مورد دلخواه جایگزین کنید تا تصویر پس‌زمینه تقریبا قابل مشاهده باشد.

نوع کارت ها

html

<div class="card-center">I will appear in the center of the Caption</div>

<div class="card-top mt-3 ms-3">
  I will appear in the top part, pushed from the left and top by 15 pixels
</div>

<div class="card-bottom mb-3 ms-3">
  I will appear in the bottom part, pushed from the left and bottom by 15 pixels
</div>

نوع کارت‌ها در داخل کارت‌های Height Control، در خط 2 اضافه میشوند. هنگام استفاده از کارت‌هایی با ارتفاع ثابت، میتوانید از این کارت‌ها برای قرار دادن محتوا در داخل آن، هر کجا که بخواهید استفاده کنید. میتوانید از هر تعداد المانی که میخواهید استفاده کنید.

برای مشاهده نمونه‌های کاملی از نحوه استفاده از این کارت‌ها، component-cards-captions.html را بررسی کنید، که در آن نمونه‌هایی از انواع متعدد و همچنین component-cards-infinite.html را خواهید داشت تا نمونه‌ای را ببینید که در آن تصویر پس‌زمینه به عنوان یک تصویر تکرار شونده استفاده میشود.

بارگذاری تصاویر در کارت ها

برای از بارگذاری یک تصویر در کارت، در قسمت ابتدایی کارت، باید این ساختار را اضافه کنید

html

<div
  class="card preload-img"
  data-src="image.png"
  data-card-height="VALUE"></div>

در این سناریو، همچنان میتوانید از کلاس کمکی در کارت خود استفاده کنید، اما دیگر نمیتوانید از کلاس‌ های bg-NUMBER برای تصاویر استفاده کنید. هر چیز دیگری در کد بالا همان چیزی است که قبلا توضیح داده شد.

کدام نوع کارت بهتر است؟ باز شونده یا ارتفاع ثابت

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

مورد استفاده	باز شونده	ارتفاع ثابت
استفاده ساده
المان های تمام صفحه
تصویر پس زمینه/بی نهایت
رنگ پس زمینه (گرادینت/ساده)
موقعیت محتوا - بالا/وسط/پایین
اسلایدر کاور و خوشامدگویی

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