یک کادر در بوت استرپ 4 ، حاوی حاشیه دور یا border می باشد . شما میتوانید در این کادر محتوا نیز قرار دهید ، همچنین این کادر میتوان شمال هدر ، پاورقی یا فوتر ، محتوا ، رنگ و … نیز باشد.
پیشنهاد میشود قبل از ورود به این اموزش قسمت های پیشین دوره ی بوت استرپ را مطالعه فرمایید. اما اگر وقت این کار را ندارید هیچ مسئله ای نیست تا انتهای مقاله با ما همراه باشید سعی میکنیم به مطالعه گذشته نیز اشاره خواهیم داشت.
کارت ساده
یک کارت ساده به وسیله ی کلاس .card و همچنین استفاده از تگ div با کلاس .card-body قابل استفاده است.
به مثال زیر توجه فرمایید :
|
1 2 3 |
<div class="card"> <div class="card-body">Basic card</div> </div> |
هدر و فوتر
برای اضافه کردن هدر و فوتر به کارت کافی است از کلاس .card-header برای سربرگ و .cart-footer برای پاورقی استفاده کنید.
به مثال زیر توجه فرمایید :
|
1 2 3 4 5 |
<div class="card"> <div class="card-header">Header</div> <div class="card-body">Content</div> <div class="card-footer">Footer</div> </div> |
کارتهای رنگی
همانطور که در جلسه ی چهارم بوت استرپ راجب رنگ های پس زمینه در بوت استرپ صحبت کردیم ، شما میتوانید از کلاس های .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark و .bg-light استفاده کنید. به مثال زیر توجه کنید :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<div class="container"> <h2>Cards with Contextual Classes</h2> <div class="card"> <div class="card-body">Basic card</div> </div> <br> <div class="card bg-primary text-white"> <div class="card-body">Primary card</div> </div> <br> <div class="card bg-success text-white"> <div class="card-body">Success card</div> </div> <br> <div class="card bg-info text-white"> <div class="card-body">Info card</div> </div> <br> <div class="card bg-warning text-white"> <div class="card-body">Warning card</div> </div> <br> <div class="card bg-danger text-white"> <div class="card-body">Danger card</div> </div> <br> <div class="card bg-secondary text-white"> <div class="card-body">Secondary card</div> </div> <br> <div class="card bg-dark text-white"> <div class="card-body">Dark card</div> </div> <br> <div class="card bg-light text-dark"> <div class="card-body">Light card</div> </div> </div> |
تیتر ها ، نوشته ها و لینک ها
از عنوان کارت استفاده کنید تا عناوین کارت را به عناصر مختلف اضافه کنید. اگر آخرین فرزند (یا تنها فرزند) درون .card-body باشد ، از کلاس .card-text برای حذف حاشیه های پایین برای یک عنصر <p> استفاده می شود. کلاس .card-link یک رنگ آبی را به هر پیوند و یک اثر شناور اضافه می کند.
برای درک بهتر به مثال زیر توجه فرمایید :
|
1 2 3 4 5 6 7 8 |
<div class="card"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some example text. Some example text.</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div> |
عکس در کارت
شما میتوانید از .card-img-top و همچنین .card-img-bottom در تگ img استفاده کنید . به یاد داشته باشید که ما عکس ها را خارج از .card-body تعریف میکنیم.
به مثال زیر توجه فرمایید:
|
1 2 3 4 5 6 7 8 |
<div class="card" style="width:400px"> <img class="card-img-top" src="img_avatar1.png" alt="Card image"> <div class="card-body"> <h4 class="card-title">John Doe</h4> <p class="card-text">Some example text.</p> <a href="#" class="btn btn-primary">See Profile</a> </div> </div> |
پیوند کارت
کلاس .stretched-link را به پیوندی درون کارت اضافه کنید ، و کل کارت قابل کلیک و قابل جابجایی خواهد بود (کارت به عنوان پیوند عمل می کند):
|
1 |
<a href="#" class="btn btn-primary stretched-link">See Profile</a> |
پوشش تصویر کارت
شاید شما هم تمایل داشته باشید که بر روی عکسی که قرار داده اید متنی بنویسید ، برای این کار کافی است کلاس .card-img-overlay را به تگ مورد نظر اضافه کنید به مثال زیر توجه فرمایید :
|
1 2 3 4 5 6 7 8 |
<div class="card" style="width:500px"> <img class="card-img-top" src="img_avatar1.png" alt="Card image"> <div class="card-img-overlay"> <h4 class="card-title">John Doe</h4> <p class="card-text">Some example text.</p> <a href="#" class="btn btn-primary">See Profile</a> </div> </div> |
ستون کارتها
کلاس. ستون-ستونها یک شبکه از کارتن مانند (به عنوان pinterest) ایجاد می کند. با وارد کردن کارت های بیشتر ، طرح به طور خودکار تنظیم می شود.
توجه: کارت ها به صورت عمودی در صفحه های کوچک نمایش داده می شوند (کمتر از 576 پیکسل):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<div class="card-columns"> <div class="card bg-primary"> <div class="card-body text-center"> <p class="card-text">Some text inside the first card</p> </div> </div> <div class="card bg-warning"> <div class="card-body text-center"> <p class="card-text">Some text inside the second card</p> </div> </div> <div class="card bg-success"> <div class="card-body text-center"> <p class="card-text">Some text inside the third card</p> </div> </div> <div class="card bg-danger"> <div class="card-body text-center"> <p class="card-text">Some text inside the fourth card</p> </div> </div> <div class="card bg-light"> <div class="card-body text-center"> <p class="card-text">Some text inside the fifth card</p> </div> </div> <div class="card bg-info"> <div class="card-body text-center"> <p class="card-text">Some text inside the sixth card</p> </div> </div> </div> |
عرشه کارتها
کلاس .card-deck یک شبکه کارت ایجاد می کند که از نظر قد و عرض برابر هستند. با وارد کردن کارت های بیشتر ، طرح به طور خودکار تنظیم می شود.
توجه: کارت ها به صورت عمودی در صفحه های کوچک نمایش داده می شوند (کمتر از 576 پیکسل):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div class="card-deck"> <div class="card bg-primary"> <div class="card-body text-center"> <p class="card-text">Some text inside the first card</p> </div> </div> <div class="card bg-warning"> <div class="card-body text-center"> <p class="card-text">Some text inside the second card</p> </div> </div> <div class="card bg-success"> <div class="card-body text-center"> <p class="card-text">Some text inside the third card</p> </div> </div> <div class="card bg-danger"> <div class="card-body text-center"> <p class="card-text">Some text inside the fourth card</p> </div> </div> </div> |
گروه کارتها
کلاس .card-group شبیه به .card-deck است. تنها تفاوت این است که کلاس .card-group حاشیه های چپ و راست را بین هر کارت حذف می کند.
توجه: کارت ها به صورت عمودی در صفحه های کوچک (کمتر از 576 پیکسل) نمایش داده می شوند ، با حاشیه بالا و پایین:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div class="card-group"> <div class="card bg-primary"> <div class="card-body text-center"> <p class="card-text">Some text inside the first card</p> </div> </div> <div class="card bg-warning"> <div class="card-body text-center"> <p class="card-text">Some text inside the second card</p> </div> </div> <div class="card bg-success"> <div class="card-body text-center"> <p class="card-text">Some text inside the third card</p> </div> </div> <div class="card bg-danger"> <div class="card-body text-center"> <p class="card-text">Some text inside the fourth card</p> </div> </div> </div> |
ویدیوی قسمت شانزدهم
پیشنهاد میشود برای داشتن اطلاعات بیشتر به سایت getbootstrap مراجعه فرمایید.
همچنین میتوانید برای داشتن اطلاعات بیشتر از جلسات قبل به دوره ی جامع بوت استرپ 4 مراجعه فرمایید و از اموزش های رایگان ما استفاده کنید.
پایدار باشید.
