آموزش کارت ها (cards) در بوت استرپ

با عرض سلام و وقت بخیر خدمت کاربران عزیز وب سایت پرنیان طرح

در این آموزش مبحث cadrs ، کارت ها در بوت استرپ ۴ را به شما همراهان عزیز خواهیم آموخت.

کارت ها در بوت استرپ به معنای جعبه هایی هستند که دور آن ها حاشیه دارد.

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

کارت ساده (Basic Card):

یک کارت ساده با استفاده از کلاس card. ایجاد میشود و محتویات داخل کارت کلاس card-body.  دارند.

مثال:

[php]

<div class=”container”>
<h2>Basic Card</h2>
<div class=”card”>
<div class=”card-body”>Basic card</div>
</div>
</div>

[/php]

تصویر یک کارت ساده:

basic card

Header & Footer :

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

برای توضیح بیشتر این مثال را ببینید:

[php]

<div class=”container”>
<h2>Card Header and Footer</h2>
<div class=”card”>
<div class=”card-header”>Header</div>
<div class=”card-body”>Content</div>
<div class=”card-footer”>Footer</div>
</div>
</div>

[/php]

تصویر کلاسهای header & footer :

header & footer

کارت های متنی (Contextual Cards) :

برای افزودن رنگ پس زمینه به کارت از کلاسهای متنی استفاده کنید چند نمونه از کلاسهای متنی را در تمرین زیر استفاده کرده ایم.

مثال:

[php]

<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>
</div>

[/php]

تصویر پس زمینه با کلاس های متنی در کارت ها:

contexual cards

Titles ، Text and Links :

برای افزودن عنوان ها ، متن و لینک ها داخل محتوای کارت باید کلاس های آن را تعریف کنیم .

برای مثال در تمرین زیر کلاس های مربوط به افزودن عنوان و متن و لینک ها افزوده ایم.

مثال :

[php]

<div class=”container”>
<h2>Card titles, text, and links</h2>
<p>Use .card-title to add card titles to any heading element. The .card-text class is used to remove bottom margins for a p element if it is the last child (or the only one) in card-body. The .card-link class adds a blue color to any link, and a hover effect.</p>
<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>
</div>

[/php]

در تصویر زیر خروجی مثال بالا را ببینید:

title link & text

Card Images :

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

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

[php]

<div class=”container”>
<h2>Card Image</h2>
<p>Image at the top (card-img-top):</p>
<div class=”card” style=”width:400px”>
<img class=”card-img-top” src=”img_avatar1.png” alt=”Card image” style=”width:100%”>
<div class=”card-body”>
<h4 class=”card-title”>John Doe</h4>
<p class=”card-text”>Some example text some example text. John Doe is an architect and engineer</p>
<a href=”#” class=”btn btn-primary”>See Profile</a>
</div>
</div>
<br>

<p>Image at the bottom (card-img-bottom):</p>
<div class=”card” style=”width:400px”>
<div class=”card-body”>
<h4 class=”card-title”>Jane Doe</h4>
<p class=”card-text”>Some example text some example text. Jane Doe is an architect and engineer</p>
<a href=”#” class=”btn btn-primary”>See Profile</a>
</div>
<img class=”card-img-bottom” src=”img_avatar6.png” alt=”Card image” style=”width:100%”>
</div>
</div>

[/php]

تصویر مثال بالا:

card images

Card Image Overlay :

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

یک نمونه مثال :

[php]

<div class=”container”>
<h2>Card Image Overlay</h2>
<p>Turn an image into a card background and use .card-img-overlay to overlay the card’s text:</p>
<div class=”card img-fluid” style=”width:500px”>
<img class=”card-img-top” src=”img_avatar1.png” alt=”Card image” style=”width:100%”>
<div class=”card-img-overlay”>
<h4 class=”card-title”>John Doe</h4>
<p class=”card-text”>Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.</p>
<a href=”#” class=”btn btn-primary”>See Profile</a>
</div>
</div>
</div>

[/php]

در تصویر زیر ، عکس به صورت پس زمینه استفاده شده است:

card image overlay

ستون های کارت (Card Calumns) :

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

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

به این مثال توجه کنید:

[php]

<div class=”container”>
<h2>Cards Columns</h2>
<p>The .card-columns class creates a masonry-like grid of cards. The layout will automatically adjust as you insert more cards.</p>
<p><strong>Note:</strong> The cards are displayed vertically on small screens (less than 576px):</p>
<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>
</div>
</div>

[/php]

طرز قرار گرفتن کارت ها همانند تصویر زیر است:

card columns

Card Deck :

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

با وارد کردن کارت های بیشتر ، طرح به طور خودکار تنظیم میشود.

برای مثال:

[php]

<div class=”container”>
<h2>Card Deck</h2>
<p>The .card-deck class creates an <strong>equal height and width</strong> grid of cards. The layout will automatically adjust as you insert more cards.</p>
<p>In this example we have added extra content to the first card, to make it taller. Notice how the other cards follow.</p>
<p><strong>Note:</strong> The cards are displayed vertically on small screens (less than 576px):</p>
<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>
<p class=”card-text”>Some more text to increase the height</p>
<p class=”card-text”>Some more text to increase the height</p>
<p class=”card-text”>Some more text to increase the height</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>
</div>

[/php]

تصویر خروجی مثال بالا :

card deck

گروه کارت ها (Card Group):

این کلاس از کارتها نیز مانند مثال قبل است با این تفاوت که حاشیه های راست و چپ مابین کارت ها حذف میشود و کارت ها به هم میچسبند.

مثال :

[php]

<div class=”container”>
<h2>Card Group</h2>
<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>
</div>

[/php]

در این تصویر خروجی کلاس کارت های به هم چسبیده را ببینید:

card group