آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش کار با کارت Card در Bootstrap 4

دوره های مرتبط با این مقاله

آموزش کار با کارت Card در Bootstrap 4:

یک کارت (Card) در بوت استرپ 4، یک جعبه یا Box با خطوط حاشیه به دور آن و مقداری حاشیه درونی یا Padding به دور محتویاتش است.

کارت یا Card در بوت استرپ 4، دارای قابلیت های مختلفی جهت اضافه کردن سر عنوان (Header)، پاورقی (Footer)، محتویات (Context)، رنگ بندی و Card... می باشد.

عکس زیر، یک کادر (Card) کامل در Bootstrap 4 را نشان می دهد :

آموزش کار با کارت Card در Bootstrap 4

آموزش ساخت کارت ساده Basic Card در Bootstrap 4:

یک کارت ساده (Basic Card) توسط یک المنت با کلاس Card ایجاد شده و محتویات آن درون یک المنت با کلاس .card-body قرار می گیرند :

آموزش ساخت کارت ساده Basic Card در Bootstrap 4

مثال 1

Basic card
امتحان کنید
راهنمایی :

اگر با چهارچوب کاری Bootstrap 3 آشنا هستید، کارت در Bootstrap 4 جایگزین پنل (Panel)، well و عکس های بند انگشتی (thumbnails) گردیده است.

آموزش ساخت Header و Footer برای کارت Bootstrap 4:

آموزش ساخت Header و Footer برای کارت Bootstrap 4

کلاس card-header. یک بخش سر عنوان (Header) و کلاس card-footer یه بخش پایین صفحه (Footer) به کارت اضافه می کند. در کد مثال عملی زیر، یک کارت را درون تگ <div> مادر ایجاد کرده و 3 بخش اصلی را برای آن تعیین کرده ایم :

مثال 2

Header
Content
امتحان کنید

آموزش استفاده از کلاس های رنگی متنی در کارت بوت استرپ 4:

آموزش استفاده از کلاس های رنگی متنی در کارت بوت استرپ 4

جهت تعیین رنگ پس زمینه کارت (Card) در Bootstrap 4 می توانید از کلاس های رنگی متنی ویژه بوت استرپ 4 که در مباحث قبلی هم به آن ها استناد کرده ایم، استفاده کنید. این کلاس ها عبارتند از .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark و .bg-light.

مثال: در کد مثال عملی زیر، انواع Card با رنگ های مختلف را ایجاد کرده ایم :

مثال 3

Cards with Contextual Classes

Basic card
 
Primary card
 
Success card
 
Info card
 
Warning card
 
Danger card
 
Secondary card
 
Dark card
 
Light card
امتحان کنید

آموزش ایجاد عنوان (title)، متن (text) و لینک در کارت :

آموزش ایجاد عنوان (title)، متن (text) و لینک در کارت

از کلاس card-title. برای اضافه کردن عنوان به بخش هدر المنت استفاده می شود. از کلاس card-text. برای حذف مارجین پایینی یک المنت <p> (اگر آخرین یا تنها فرزند موجود در بخش card-body باشد)، استفاده می شود. همچنین کلاس card-link.، به لینک درون آن رنگ آبی داده و خاصیت عبور موس یا hover را به آن می دهد.

مثال: در کد مثال عملی زیر، یک کارت (Card) در Bootstrap 4 با عنوان، متن و دو لینک را ایجاد کرده ایم :

مثال 4

Card title

Some example text. Some example text.

Card link Another link
امتحان کنید

آموزش استفاده از عکس در کارت (Card) بوت استرپ 4:

آموزش استفاده از عکس در کارت (Card) بوت استرپ 4 آموزش استفاده از عکس در کارت (Card) بوت استرپ 4

به ترتیب کلاس های card-img-top. یا card-img-bottom. را به تگ اضافه کنید تا عکس مورد نظرتان در قسمت بالایی یا پایینی کارت (Card) قرار بگیرد.

توجه داشته باشید که در کد مثال عملی زیر، تگ image را خارج از المنت card-body قرار داده ایم تا کل عرض کارت را اشغال کند :

مثال 5

Card image

John Doe

Some example text.

See Profile
امتحان کنید

آموزش ساخت کارت قابل کلیک در بوت استرپ 4:

چنانچه کلاس Stretched-link. را به یک لینک درون Card اضافه کنید، کل کارت قابل کلیک شدن شده و خاصیت عبور موس یا افکت hover به آن اضافه می شود (کل کارت به صورت یک لینک عمل می کند).

مثال: در کد مثال عملی زیر، کلاس stretched-link. را به لینک با متن See Profile اضافه کرده ایم و کل کارت قابل کلیک شده است :

آموزش تعیین عکس به صورت تمام صفحه در کارت Bootstrap 4:

آموزش تعیین عکس به صورت تمام صفحه در کارت Bootstrap 4

چنانچه به عنصر دربرگیرنده بدنه Card (مثلا تگ div)، کلاس card-img-overlay را اضافه کنید، عکس موجود در کارت به صورت تمام صفحه نشان داده شده و سایر محتویات بر روی عکس قرار می گیرند. به مثال زیر دقت نمایید :

مثال 7

Card image

John Doe

Some example text.

See Profile
امتحان کنید

آموزش قرار دادن چندین Card در یک ستون بوت استرپ 4:

به کار بردن کلاس card-columns. در تگ اصلی کارت، یک جدول یا گرید کاشی مانند از چندین کارت در سطر و ستون های مختلف را ایجاد می کند.

به عبارت دیگر می توانید 2 یا چندین کارت را در یک کارت مادر در کنار هم چیده و نمایش دهید. قالب یا layout و نحوه قرارگیری کارت ها در این حالت، به صورت خودکار و بر حسب تعداد کارت های وارد شده، تغییر می کند.

آموزش قرار دادن چندین Card در یک ستون بوت استرپ 4
نکته :

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

مثال: در کد مثال عملی زیر، 6 کارت را با رنگ های مختلف (که از کلاس های رنگی متنی ویژه بوت استرپ استفاده شده) را درون یک کارت مادر قرار داده ایم :

مثال 8

Some text inside the first card

Some text inside the second card

Some text inside the third card

Some text inside the fourth card

Some text inside the fifth card

Some text inside the sixth card

امتحان کنید

آموزش ساخت یک دسته کارت Deck در Bootstrap 4:

آموزش ساخت یک دسته کارت Deck در Bootstrap 4

با اعمال کلاس card-desk. به عنصر مادر کارت، یک دسته یا grid از کارت ها با عرض و ارتفاع یکسان در کنار هم، ایجاد می شود. قالب یا حالت چیدمان کارت ها، بر حسب مقدار کارت های وارد شده به صورت خودکار تغییر می کند.

نکته :

در صورت نمایش با عرض کمتر از 576 پیکسل، کارت ها به صورت عمودی بر روی هم نمایش داده می شوند.

مثال: در کد مثال عملی زیر، 6 کارت رنگی مختلف را درون یک تگ div با کلاس card-deck. قرار داده ایم:

مثال 9

Some text inside the first card

Some text inside the second card

Some text inside the third card

Some text inside the fourth card

امتحان کنید

آموزش ساخت گروهی از کارت ها Card Groups:

آموزش ساخت گروهی از کارت ها Card Groups

می توانید برای ایجاد گروهی از کارت در کنار یکدیگر، کلاس Card-group را به عنصر اصلی کارت اعمال کنید.

کلاس card-group بسیار شبیه کلاس card-deck. است، با این تفاوت که در حالت group، برنامه مارجین های چپ و راست بین کارت ها را از بین برده و آن ها را به هم می چسباند. قالب یا چیدمان قرارگیری کارت ها نیز بر حسب تعداد کارت ها، به صورت خودکار، تغییر خواهد کرد.

نکته :

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

مثال: در کد مثال عملی زیر، 4 کارت با رنگ های مختلف را درون یک کارت به صورت گروهی نشان داده ایم:

مثال 10

Some text inside the first card

Some text inside the second card

Some text inside the third card

Some text inside the fourth card

امتحان کنید
  • 93
  •    78
  • تاریخ ارسال :   1398/07/28

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .