قسمت شانزدهم bootstrap : نحوه ی استفاده از کادر در بوت استرپ ۴

خانه » مقالات اموزشی » قسمت شانزدهم bootstrap : نحوه ی استفاده از کادر در بوت استرپ ۴
قسمت شانزدهم bootstrap : نحوه ی استفاده از کادر در بوت استرپ ۴

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

279

Calendar-amico (2)

تاریخ به‌روزرسانی:

۱۳۹۹-۰۳-۰۷

Work time-rafiki

زمان مطالعه:

5 دقیقه

یک کادر در بوت استرپ 4 ، حاوی حاشیه دور یا border می باشد . شما میتوانید در این کادر محتوا نیز قرار دهید ، همچنین این کادر میتوان شمال هدر ، پاورقی یا فوتر ، محتوا ، رنگ و … نیز باشد.

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

کارت ساده

یک کارت ساده به وسیله ی کلاس .card و همچنین استفاده از تگ div با کلاس .card-body قابل استفاده است.

به مثال زیر توجه فرمایید :

هدر و فوتر

برای اضافه کردن هدر و فوتر به کارت کافی است از کلاس .card-header برای سربرگ و .cart-footer برای پاورقی استفاده کنید.

به مثال زیر توجه فرمایید :

کارتهای رنگی

همانطور که در جلسه ی چهارم بوت استرپ راجب رنگ های پس زمینه در بوت استرپ صحبت کردیم ، شما میتوانید از کلاس های .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark و .bg-light استفاده کنید. به مثال زیر توجه کنید :

تیتر ها ، نوشته ها و لینک ها

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

برای درک بهتر به مثال زیر توجه فرمایید :

عکس در کارت

شما میتوانید از .card-img-top و همچنین .card-img-bottom در تگ img استفاده کنید . به یاد داشته باشید که ما عکس ها را خارج از .card-body تعریف میکنیم.

به مثال زیر توجه فرمایید:

پیوند کارت

کلاس .stretched-link را به پیوندی درون کارت اضافه کنید ، و کل کارت قابل کلیک و قابل جابجایی خواهد بود (کارت به عنوان پیوند عمل می کند):

پوشش تصویر کارت

شاید شما هم تمایل داشته باشید که بر روی عکسی که قرار داده اید متنی بنویسید ، برای این کار کافی است کلاس .card-img-overlay را به تگ مورد نظر اضافه کنید به مثال زیر توجه فرمایید :

ستون کارتها

کلاس. ستون-ستونها یک شبکه از کارتن مانند (به عنوان pinterest) ایجاد می کند. با وارد کردن کارت های بیشتر ، طرح به طور خودکار تنظیم می شود.

توجه: کارت ها به صورت عمودی در صفحه های کوچک نمایش داده می شوند (کمتر از 576 پیکسل):

عرشه کارتها

کلاس .card-deck یک شبکه کارت ایجاد می کند که از نظر قد و عرض برابر هستند. با وارد کردن کارت های بیشتر ، طرح به طور خودکار تنظیم می شود.

توجه: کارت ها به صورت عمودی در صفحه های کوچک نمایش داده می شوند (کمتر از 576 پیکسل):

گروه کارتها

کلاس .card-group شبیه به .card-deck است. تنها تفاوت این است که کلاس .card-group حاشیه های چپ و راست را بین هر کارت حذف می کند.

توجه: کارت ها به صورت عمودی در صفحه های کوچک (کمتر از 576 پیکسل) نمایش داده می شوند ، با حاشیه بالا و پایین:

ویدیوی قسمت شانزدهم

پیشنهاد میشود برای داشتن اطلاعات بیشتر به سایت getbootstrap مراجعه فرمایید.

همچنین میتوانید برای داشتن اطلاعات بیشتر از جلسات قبل به دوره ی جامع بوت استرپ 4 مراجعه فرمایید و از اموزش های رایگان ما استفاده کنید.

پایدار باشید.

مرتضی افضلی

مرتضی افضلی

این روزها دیگر نیاز نیست کلی هزینه‌ی اجاره‌ی مغازه بدهید. با دنیای کسب‌وکار اینترنتی و دیجیتال مارکتینگ می‌توانیم کسب درامد داشته باشیم و من در مجموعه‌ی کدپز در این راه همراه شما هستم.

تا کنون 264 نفر در کدپز ثبت نام کرده اند.

دیدگاهتان را بنویسید