کادر کارت
کارت ها یک کانتینر محتوای انعطاف پذیر و قابل گسترش متنوع و تنظیمات متعدد ارائه می دهند.
مثال های پایه
کارت ها با کمترین نشانه گذاری و سبک های ممکن ساخته می شوند، اما همچنان کنترل و سفارشی سازی زیادی را ارائه می دهند.
کارت با لینک کشیده
چند مثال متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
رفتن به جاییمثال کد
<div class="card">
<img src="..." class="card-img-top" alt="">
<div class="card-inner">
<h5 class="card-title">کارت با لینک کشیده</h5>
<p class="card-text">چند مثال متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.</p>
<a href="#" class="btn btn-primary">رفتن به جایی</a>
</div>
</div>
عنوان ها، متن و لینک ها
عنوان کارت با افزودن .card-title به یک تگ <*h> استفاده می شود.
به همین ترتیب، لینک ها با افزودن .card-link به تگ <a> اضافه می شوند و در کنار یکدیگر قرار می گیرند.
عنوان کارت
عنوان فرعی کارت
چند مثال متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
لینک کارت یک لینک دیگرمثال کد
<div class="card">
<div class="card-inner">
<h5 class="card-title">عنوان کارت</h5>
<h6 class="card-subtitle mb-2">عنوان فرعی کارت</h6>
<p class="card-text">چند مثال متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.</p>
<a href="#" class="card-link">لینک کارت</a>
<a href="#" class="card-link">یک لینک دیگر</a>
</div>
</div>
گروه های لیست
لیستی از محتوا را در یک کارت با یک گروه لیست هموار ایجاد کنید.
- لورم ایپسوم متن
- لورم ایپسوم متن ساختگی
- لورم ایپسوم متن
- لورم ایپسوم متن
- لورم ایپسوم متن ساختگی
- لورم ایپسوم متن
مثال کد
<!-- با عنوان -->
<div class="card">
<div class="card-header border-bottom">ویژه</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">لورم ایپسوم متن</li>
<li class="list-group-item">لورم ایپسوم متن ساختگی</li>
<li class="list-group-item">لورم ایپسوم متن</li>
</ul>
</div>
<!-- بدون عنوان -->
<div class="card">
<ul class="list-group list-group-flush">
<li class="list-group-item">لورم ایپسوم متن</li>
<li class="list-group-item">لورم ایپسوم متن ساختگی</li>
<li class="list-group-item">لورم ایپسوم متن</li>
</ul>
</div>
عنوان و پاورقی
یک عنوان و/یا پاورقی اختیاری در کارت اضافه کنید.
مثال کد
<!-- با عنوان و پاورقی -->
<div class="card">
<div class="card-header border-bottom">عنوان ویژه</div>
<div class="card-body">
<h5 class="card-title">رفتار عنوان ویژه</h5>
<p class="card-text">با متن پشتیبان زیر به عنوان هدایت عادی به محتوای اضافی.</p>
<a href="#" class="btn btn-primary">رفتن به جایی</a>
</div>
<div class="card-footer border-top text-muted">2 روز پیش</div>
</div>
<!-- فقط با عنوان -->
<div class="card">
<div class="card-header border-bottom">عنوان ویژه</div>
<div class="card-inner">
<h5 class="card-title">رفتار عنوان ویژه</h5>
<p class="card-text">با متن پشتیبان زیر به عنوان هدایت عادی به محتوای اضافی.</p>
<a href="#" class="btn btn-primary">رفتن به جایی</a>
</div>
</div>
سبک های کارت
کارت ها شامل تنظیمات متنوعی برای سفارشی سازی پس زمینه، خط های حاشیه و رنگشان هستند.
از ابزارهای رنگ برای تغییر ظاهر کارت استفاده کنید.
عنوان کارت اولیه
چند مثال متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
عنوان کارت ثانویه
چند مثال متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
عنوان کارت تاریک
چند مثال متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
عنوان کارت روشن
چند مثال متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
مثال کد
<div class="card text-white bg-primary">
<div class="card-header">عنوان</div>
<div class="card-inner">
<h5 class="card-title">عنوان کارت اولیه</h5>
<p class="card-text">چند مثال متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.</p>
</div>
</div>
