کارت ها
کارتهای Bootstrap یک محفظه محتوای انعطافپذیر و قابل گسترش با انواع و گزینههای متعدد ارائه میکنند.
در باره
کارت یک محفظه محتوای انعطاف پذیر و قابل توسعه است. این شامل گزینه هایی برای سرصفحه ها و پاورقی ها، طیف گسترده ای از محتوا، رنگ های پس زمینه متنی و گزینه های نمایش قدرتمند است. اگر با Bootstrap 3 آشنا هستید، کارت ها جایگزین پانل ها، چاه ها و تصاویر کوچک قدیمی ما می شوند. عملکردی مشابه با آن اجزا به عنوان کلاس های اصلاح کننده برای کارت ها در دسترس است.
مثال
کارتها با کمترین نشانهگذاری و سبک ممکن ساخته میشوند، اما همچنان کنترل و سفارشیسازی زیادی را ارائه میکنند. ساخته شده با فلکس باکس، هم ترازی آسان را ارائه می کنند و به خوبی با سایر اجزای Bootstrap ترکیب می شوند. آنها به margin
طور پیش فرض هیچ ندارند، بنابراین در صورت نیاز از ابزارهای فاصله استفاده کنید .
در زیر نمونه ای از کارت پایه با محتوای ترکیبی و عرض ثابت آورده شده است. کارتها هیچ عرض ثابتی برای شروع ندارند، بنابراین به طور طبیعی تمام عرض عنصر اصلی را پر میکنند. این به راحتی با گزینه های مختلف اندازه ما سفارشی می شود.
عنوان کارت
چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
برو یه جایی<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
انواع محتوا
کارتها از م��توای متنوعی از جمله تصاویر، متن، گروههای فهرست، پیوندها و موارد دیگر پشتیبانی میکنند. در زیر نمونه هایی از موارد پشتیبانی شده آورده شده است.
بدن
بلوک سازنده یک کارت است .card-body
. هر زمان که به یک بخش خالی در کارت نیاز دارید از آن استفاده کنید.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
عناوین، متن و پیوندها
عنوان کارت با افزودن .card-title
به یک <h*>
برچسب استفاده می شود. .card-link
به همین ترتیب لینک ها اضافه می شوند و با افزودن به یک <a>
تگ در کنار یکدیگر قرار می گیرند .
زیرنویس با افزودن یک .card-subtitle
به یک <h*>
برچسب استفاده می شود. اگر .card-title
و .card-subtitle
موارد در یک .card-body
آیتم قرار می گیرند، عنوان کارت و زیرنویس به خوبی تراز می شوند.
عنوان کارت
زیرنویس کارت
چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
پیوند کارت پیوند دیگر<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
تصاویر
.card-img-top
یک تصویر را در بالای کارت قرار می دهد. با .card-text
، می توان متن را به کارت اضافه کرد. متن درون .card-text
نیز می تواند با تگ های استاندارد HTML استایل دهی شود.
چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
لیست کردن گروه ها
لیستی از محتوا را در یک کارت با یک گروه فهرست هموار ایجاد کنید.
- یک آیتم
- یک مورد دوم
- مورد سوم
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
- یک آیتم
- یک مورد دوم
- مورد سوم
<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
- یک آیتم
- یک مورد دوم
- مورد سوم
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-footer">
Card footer
</div>
</div>
سینک آشپزخانه
چندین نوع محتوا را با هم ترکیب کرده و مطابقت دهید تا کارت مورد نیاز خود را ایجاد کنید، یا همه چیز را در آنجا بیندازید. در زیر، سبکهای تصویر، بلوکها، سبکهای متن و یک گروه فهرست نشان داده شده است که همه در یک کارت با عرض ثابت پیچیده شدهاند.
عنوان کارت
چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
- یک آیتم
- یک مورد دوم
- مورد سوم
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
سربرگ و پاورقی
یک سرصفحه و/یا پاورقی اختیاری در کارت اضافه کنید.
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
سرصفحه کارت را می توان با افزودن .card-header
به <h*>
عناصر استایل دهی کرد.
ویژه
<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
یک نقل قول شناخته شده، موجود در یک عنصر blockquote.
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
سایز بندی
کارتها برای شروع کار خاصی را فرض نمیکنند width
، بنابراین 100% پهن خواهند بود مگر اینکه خلاف آن ذکر شده باشد. میتوانید این مورد را در صورت نیاز با CSS سفارشی، کلاسهای گرید، میکسهای Grid Sass یا ابزارهای کمکی تغییر دهید.
استفاده از نشانه گذاری شبکه
با استفاده از شبکه، کارت ها را در صورت نیاز در ستون ها و ردیف ها بپیچید.
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
با استفاده از خدمات شهری
برای تنظیم سریع عرض کارت از تعداد انگشت شماری از ابزارهای اندازه گیری موجود ما استفاده کنید.
<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
<div class="card w-50">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
استفاده از CSS سفارشی
از CSS سفارشی در شیوه نامه های خود یا به عنوان سبک های درون خطی برای تنظیم عرض استفاده کنید.
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
تراز متن
میتوانید بهسرعت همترازی نوشتار هر کارتی را - در کل یا بخشهای خاص آن - با کلاسهای تراز متن ما تغییر دهید .
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-center" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-end" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
جهت یابی
با اجزای ناوبری Bootstrap مقداری پیمایش به سرصفحه (یا بلوک) کارت اضافه کنید.
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="true" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
تصاویر
کارت ها شامل چند گزینه برای کار با تصاویر هستند. از میان افزودن «کلاههای تصویر» در دو انتهای کارت، پوشاندن تصاویر با محتوای کارت، یا به سادگی جاسازی تصویر در کارت، انتخاب کنید.
سرپوش های تصویری
همانند سرصفحهها و پاورقیها، کارتها میتوانند شامل «کلاههای تصویر» بالا و پایین باشند—تصاویر در بالا یا پایین کارت.
عنوان کارت
این یک کارت گسترده تر با متن پشتیبانی در زیر به عنوان یک راهنما طبیعی به محتوای اضافی است. این محتوا کمی طولانی تر است.
آخرین به روز رسانی 3 دقیقه قبل
عنوان کارت
این یک کارت گسترده تر با متن پشتیبانی در زیر به عنوان یک راهنما طبیعی به محتوای اضافی است. این محتوا کمی طولانی تر است.
آخرین به روز رسانی 3 دقیقه قبل
<div class="card mb-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img src="..." class="card-img-bottom" alt="...">
</div>
پوشش های تصویر
یک تصویر را به پسزمینه کارت تبدیل کنید و روی متن کارت خود قرار دهید. بسته به تصویر، ممکن است به سبک ها یا ابزارهای اضافی نیاز داشته باشید یا نباشید.
<div class="card bg-dark text-white">
<img src="..." class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>
افقی
با استفاده از ترکیبی از کلاسهای شبکه و ابزار، کارتها را میتوان به صورت افقی به روشی سازگار با موبایل و پاسخگو ساخت. در مثال زیر، ناودانهای شبکه را با کلاسها حذف میکنیم .g-0
و از .col-md-*
کلاسها برای افقی کردن کارت در md
نقطه شکست استفاده میکنیم. بسته به محتوای کارت شما ممکن است تنظیمات بیشتری لازم باشد.
عنوان کارت
این یک کارت گسترده تر با متن پشتیبانی در زیر به عنوان یک راهنما طبیعی به محتوای اضافی است. این محتوا کمی طولانی تر است.
آخرین به روز رسانی 3 دقیقه قبل
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="..." class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
سبک های کارت
کارتها شامل گزینههای مختلفی برای سفارشی کردن پسزمینه، حاشیهها و رنگ آنها هستند.
زمینه و رنگ
از ابزارهای رنگ متن و پس زمینه برای تغییر ظاهر کارت استفاده کنید.
عنوان کارت اصلی
چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
عنوان کارت ثانویه
چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
عنوان کارت موفقیت
چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
عنوان کارت خطر
چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
عنوان کارت اخطار
چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
عنوان کارت اطلاعات
چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
عنوان کارت نور
چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
عنوان کارت تیره
چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-dark bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-dark bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-dark bg-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
انتقال معنا به فناوری های کمکی
استفاده از رنگ برای افزودن معنی فقط یک نشانه بصری ارائه می دهد که به کاربران فناوری های کمکی - مانند صفحه خوان ها - منتقل نمی شود. اطمینان حاصل کنید که اطلاعات مشخص شده با رنگ یا از خود محتوا واضح است (مثلاً متن قابل مشاهده)، یا از طریق ابزارهای جایگزین، مانند متن اضافی پنهان شده با .visually-hidden
کلاس، گنجانده شده است.
مرز
از ابزارهای مرزی برای تغییر فقط border-color
کارت استفاده کنید. توجه داشته باشید که میتوانید طبق شکل زیر .text-{color}
کلاسهایی را روی والد .card
یا زیرمجموعهای از محتویات کارت قرار دهید.
عنوان کارت اصلی
چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
عنوان کارت ثانویه
چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
عنوان کارت موفقیت
چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
عنوان کارت خطر
چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
عنوان کارت اخطار
چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
عنوان کارت اطلاعات
چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
عنوان کارت نور
چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
عنوان کارت تیره
چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-secondary">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-dark">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
ابزارهای کاربردی را مخلوط می کند
همچنین میتوانید حاشیههای سرصفحه و پاورقی کارت را در صورت نیاز تغییر دهید و حتی آنها را background-color
با .bg-transparent
.
عنوان کارت موفقیت
چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class="card-footer bg-transparent border-success">Footer</div>
</div>
چیدمان کارت
بوت استرپ علاوه بر استایل دادن به محتوا در کارت ها، چند گزینه برای چیدمان سری کارت ها نیز دارد. در حال حاضر، این گزینههای طرحبندی هنوز پاسخگو نیستند.
گروه های کارت
از گروه های کارت برای رندر کردن کارت ها به عنوان یک عنصر منفرد و متصل با ستون های عرض و ارتفاع یکسان استفاده کنید. گروه های کارتی به صورت انباشته شروع می شوند و display: flex;
برای اتصال با ابعاد یکنواخت از sm
نقطه شکست استفاده می کنند.
عنوان کارت
این یک کارت گسترده تر با متن پشتیبانی در زیر به عنوان یک راهنما طبیعی به محتوای اضافی است. این محتوا کمی طولانی تر است.
آخرین به روز رسانی 3 دقیقه قبل
عنوان کارت
این کارت دارای متن پشتیبان در زیر به عنوان راهنما طبیعی برای محتوای اضافی است.
آخرین به روز رسانی 3 دقیقه قبل
عنوان کارت
این یک کارت گسترده تر با متن پشتیبانی در زیر به عنوان یک راهنما طبیعی به محتوای اضافی است. این کارت حتی محتوای طولانیتری نسبت به کارت اول دارد که عملکرد ارتفاع برابر را نشان میدهد.
آخرین به روز رسانی 3 دقیقه قبل
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
هنگام استفاده از گروه های کارت با پاورقی، محتوای آنها به طور خودکار ردیف می شود.
عنوان کارت
این یک کارت گسترده تر با متن پشتیبانی در زیر به عنوان یک ر��هنما طبیعی به محتوای اضافی است. این محتوا کمی طولانی تر است.
عنوان کارت
این کارت دارای متن پشتیبان در زیر به عنوان راهنما طبیعی برای محتوای اضافی است.
عنوان کارت
این یک کارت گسترده تر با متن پشتیبانی در زیر به عنوان یک راهنما طبیعی به محتوای اضافی است. این کارت حتی محتوای طولانیتری نسبت به کارت اول دارد که عملکرد ارتفاع برابر را نشان میدهد.
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
کارت های شبکه
از سیستم شبکه Bootstrap و .row-cols
کلاسهای آن برای کنترل تعداد ستونهای شبکه (که دور کارتهای شما پیچیده شدهاند) در هر ردیف استفاده کنید. به عنوان مثال، در اینجا قرار .row-cols-1
دادن کارت ها در یک ستون، و .row-cols-md-2
تقسیم چهار کارت به عرض مساوی در چندین ردیف، از نقطه شکست متوسط به بالا است.
عنوان کارت
این یک کارت طولانیتر با متن پشتیبانی در زیر بهعنوان یک راهنما طبیعی برای محتوای اضافی است. این محتوا کمی طولانی تر است.
عنوان کارت
این یک کارت طولانیتر با متن پشتیبانی در زیر بهعنوان یک راهنما طبیعی برای محتوای اضافی است. این محتوا کمی طولانی تر است.
عنوان کارت
این یک کارت طولانیتر با متن پشتیبانی در زیر بهعنوان یک راهنما طبیعی برای محتوای اضافی است.
عنوان کارت
این یک کارت طولانیتر با متن پشتیبانی در زیر بهعنوان یک راهنما طبیعی برای محتوای اضافی است. این محتوا کمی طولانی تر است.
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
آن را به تغییر دهید .row-cols-3
و چهارمین بسته بندی کارت را خواهید دید.
عنوان کارت
این یک کارت طولانیتر با متن پشتیبانی در زیر بهعنوان یک راهنما طبیعی برای محتوای اضافی است. این محتوا کمی طولانی تر است.
عنوان کارت
این یک کارت طولانیتر با متن پشتیبانی در زیر بهعنوان یک راهنما طبیعی برای محتوای اضافی است. این محتوا کمی طولانی تر است.
عنوان کارت
این یک کارت طولانیتر با متن پشتیبانی در زیر بهعنوان یک راهنما طبیعی برای محتوای اضافی است.
عنوان کارت
این یک کارت طولانیتر با متن پشتیبانی در زیر بهعنوان یک راهنما طبیعی برای محتوای اضافی است. این محتوا کمی طولانی تر است.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
هنگامی که به ارتفاع مساوی نیاز دارید، .h-100
به کارت ها اضافه کنید. اگر به طور پیش فرض ارتفاع مساوی می خواهید، می توانید $card-height: 100%
در Sass تنظیم کنید.
عنوان کارت
این یک کارت طولانیتر با متن پشتیبانی در زیر بهعنوان یک راهنما طبیعی برای محتوای اضافی است. این محتوا کمی طولانی تر است.
عنوان کارت
این یک کارت کوتاه است.
عنوان کارت
این یک کارت طولانیتر با متن پشتیبانی در زیر بهعنوان یک راهنما طبیعی برای محتوای اضافی است.
عنوان کارت
این یک کارت طولانیتر با متن پشتیبانی در زیر بهعنوان یک راهنما طبیعی برای محتوای اضافی است. این محتوا کمی طولانی تر است.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
درست مانند گروه های کارت، پاورقی کارت ها به طور خودکار در یک ردیف قرار می گیرند.
عنوان کارت
این یک کارت گسترده تر با متن پشتیبانی در زیر به عنوان یک راهنما طبیعی به محتوای اضافی است. این محتوا کمی طولانی تر است.
عنوان کارت
این کارت دارای متن پشتیبان در زیر به عنوان راهنما طبیعی برای محتوای اضافی است.
عنوان کارت
این یک کارت گسترده تر با متن پشتیبانی در زیر به عنوان یک راهنما طبیعی به محتوای اضافی است. این کارت حتی محتوای طولانیتری نسبت به کارت اول دارد که عملکرد ارتفاع برابر را نشان میدهد.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
سنگ تراشی
ما از v4
یک تکنیک فقط CSS برای تقلید از رفتار ستونهای ماسونری استفاده کردیم، اما این تکنیک با عوارض جانبی ناخوشایندی همراه بود . اگر میخواهید این نوع طرحبندی v5
را داشته باشید، فقط میتوانید از افزونه Masonry استفاده کنید. سنگ تراشی در Bootstrap گنجانده نشده است ، اما ما یک نمونه آزمایشی برای کمک به شما برای شروع ایجاد کرده ایم.
ساس
متغیرها
$card-spacer-y: $spacer;
$card-spacer-x: $spacer;
$card-title-spacer-y: $spacer * .5;
$card-border-width: $border-width;
$card-border-radius: $border-radius;
$card-border-color: rgba($black, .125);
$card-inner-border-radius: subtract($card-border-radius, $card-border-width);
$card-cap-padding-y: $card-spacer-y * .5;
$card-cap-padding-x: $card-spacer-x;
$card-cap-bg: rgba($black, .03);
$card-cap-color: null;
$card-height: null;
$card-color: null;
$card-bg: $white;
$card-img-overlay-padding: $spacer;
$card-group-margin: $grid-gutter-width * .5;