کارت‌ها

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکون‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع

کارت در بوت استرپ ۴ یک مستطیل کادردار با حاشیه در اطراف محتوایش است. یک کارت شامل امکاناتی برای عنوان‌ها، پاورقی‌ها، محتوا، رنگ‌ها و غیره است.[۱]

کارت ساده

یک کارت ساده از طریق کلاس .card ایجاد می‌شود و محتوای داخل کارت کلاس .card-body دارند:

مثال

1 <div class="card">
2   <div class="card-body">Basic card</div>
3 </div>


مشاهدهٔ نتیجه


اگر با بوت استرپ ۳ آشنا هستید، کارت‌ها جایگزین Thumbnailها، Wellها و پنل‌های قدیمی هستند.

عنوان و پاورقی

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

مثال

1 <div class="card">
2   <div class="card-header">Header</div>
3   <div class="card-body">Content</div>
4   <div class="card-footer">Footer</div>
5 </div>


مشاهدهٔ نتیجه


کارت های متنی

برای اضافه کردن رنگ پیش زمینه به کارت از کلاس‌های متنی استفاده می‌شود (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark و .bg-light.

مثال


مشاهدهٔ نتیجه


عنوان ها (به انگلیسی: Title)، متن و لینک ها

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

مثال

1 <div class="card">
2   <div class="card-body">
3     <h4 class="card-title">Card title</h4>
4     <p class="card-text">Some example text. Some example text.</p>
5     <a href="#" class="card-link">Card link</a>
6     <a href="#" class="card-link">Another link</a>
7   </div>
8 </div>


مشاهدهٔ نتیجه


تصاویر کارتی

برای قرار دادن تصویر در بالا یا پایین درون کارت، کلاس .card-img-top یا .card-img-bottom را به <img> اضافه کنید. دقت کنید که تصویر را خارج از .card-body اضافه کرده‌ایم تا عرض آن به اندازه عرض کل شود:

مثال

1 <div class="card" style="width:400px">
2   <img class="card-img-top" src="img_avatar1.png" alt="Card image">
3   <div class="card-body">
4     <h4 class="card-title">John Doe</h4>
5     <p class="card-text">Some example text.</p>
6     <a href="#" class="btn btn-primary">See Profile</a>
7   </div>
8 </div>


مشاهدهٔ نتیجه


لینک های منبسط (به انگلیسی: Stretched)

کلاس .stretched-link را به لینک درون کارت اضافه کنید و در اینصورت کل کارت قابل کلیک کردن و hoverable می شود(کل کارت به شکل یک لینک عمل می‌کند):

مثال

<a href="#" class="btn btn-primary stretched-link">See Profile</a>


مشاهدهٔ نتیجه


Card Image Overlays

تصویری را به پیش زمینهٔ کارت تبدیل کرده و از .card-img-overlay برای اضافه کردن متن به بالای تصویر استفاده کنید:

مثال

1 <div class="card" style="width:500px">
2   <img class="card-img-top" src="img_avatar1.png" alt="Card image">
3   <div class="card-img-overlay">
4     <h4 class="card-title">John Doe</h4>
5     <p class="card-text">Some example text.</p>
6     <a href="#" class="btn btn-primary">See Profile</a>
7   </div>
8 </div>


مشاهدهٔ نتیجه


ستون های کارت

کلاس .card-columns یک شبکه masonry-مانند از کارت‌ها را ایجاد می‌کند (مانند Pinterest). اگر تعداد کارت‌های بیشتری بخواهید، طرح آن بطور خودکار (به انگلیسی: Layout) سازگار می‌شود.

نکته:کارت‌ها در صفحه نمایش‌های کوچک (کمتر از ۵۷۶ پیکسل) به شکل عمودی نمایش داده می‌شوند.

مثال

 1 <div class="card-columns">
 2   <div class="card bg-primary">
 3     <div class="card-body text-center">
 4       <p class="card-text">Some text inside the first card</p>
 5     </div>
 6   </div>
 7   <div class="card bg-warning">
 8     <div class="card-body text-center">
 9       <p class="card-text">Some text inside the second card</p>
10     </div>
11   </div>
12   <div class="card bg-success">
13     <div class="card-body text-center">
14       <p class="card-text">Some text inside the third card</p>
15     </div>
16   </div>
17   <div class="card bg-danger">
18     <div class="card-body text-center">
19       <p class="card-text">Some text inside the fourth card</p>
20     </div>
21   </div>
22   <div class="card bg-light">
23     <div class="card-body text-center">
24       <p class="card-text">Some text inside the fifth card</p>
25     </div>
26   </div>
27   <div class="card bg-info">
28     <div class="card-body text-center">
29       <p class="card-text">Some text inside the sixth card</p>
30     </div>
31   </div>
32 </div>


مشاهدهٔ نتیجه


دسته کارت (به انگلیسی: Card Deck)

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

نکته: کارت‌ها در صفحه نمایش کوچک (کمتر از ۵۷۶ پیکسل) بصورت عمودی نمایش داده می‌شوند.

مثال

 1 <div class="card-deck">
 2   <div class="card bg-primary">
 3     <div class="card-body text-center">
 4       <p class="card-text">Some text inside the first card</p>
 5     </div>
 6   </div>
 7   <div class="card bg-warning">
 8     <div class="card-body text-center">
 9       <p class="card-text">Some text inside the second card</p>
10     </div>
11   </div>
12   <div class="card bg-success">
13     <div class="card-body text-center">
14       <p class="card-text">Some text inside the third card</p>
15     </div>
16   </div>
17   <div class="card bg-danger">
18     <div class="card-body text-center">
19       <p class="card-text">Some text inside the fourth card</p>
20     </div>
21   </div>
22 </div>


مشاهدهٔ نتیجه


گروه کارت

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

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

مثال

 1 <div class="card-group">
 2   <div class="card bg-primary">
 3     <div class="card-body text-center">
 4       <p class="card-text">Some text inside the first card</p>
 5     </div>
 6   </div>
 7   <div class="card bg-warning">
 8     <div class="card-body text-center">
 9       <p class="card-text">Some text inside the second card</p>
10     </div>
11   </div>
12   <div class="card bg-success">
13     <div class="card-body text-center">
14       <p class="card-text">Some text inside the third card</p>
15     </div>
16   </div>
17   <div class="card bg-danger">
18     <div class="card-body text-center">
19       <p class="card-text">Some text inside the fourth card</p>
20     </div>
21   </div>
22 </div>


مشاهدهٔ نتیجه



منابع آموزشی