SB Admin pro - قالب داشبورد مدیریت بوت‌استرپ

پایه

نمونه کارت پایه

این یک نمونه کارت پایه است که مشاهده میکنید.

HTML
PUG

<div class="card">
    <div class="card-header">نمونه کارت پایه</div>
    <div class="card-body">این یک نمونه کارت پایه است که مشاهده میکنید.</div>
</div>

.card
    .card-header نمونه کارت پایه
    .card-body این یک نمونه کارت پایه است که مشاهده میکنید.

مثال بالا یک کارت پایه با هدر کارت و بدنه کارت است. می توانید کارت را با استفاده از هر یک از ویژگی های موجود در Bootstrap گسترش دهید. می‌توانید از کلاس‌های کاربردی برای ظاهر بهتر کارت‌ها نیز استفاده کنید.

توجه: استایل کارت در SB Admin Pro با رنگ پس‌زمینه روشن به دلیل رنگ پس‌زمینه هدر کارت، بدنه کارت و سایه جعبه بهتر به نظر می‌رسد.

کارت‌ها پیشرفته

منو کشویی در هدر:

هدر کشویی

این یک نمونه کارت سفارشی دارای منو کشویی در هدر کارت می باشد. ویژگی overflow این کارت روی مخفی کردن (hidden) تنظیم شده است، بنابراین ارتفاع کارت شما باید بیشتر از ارتفاع منو بازشوند باشد.

HTML
PUG

<div class="card card-header-actions">
    <div class="card-header">
        هدر منو کشویی
        <div class="dropdown no-caret">
            <button class="btn btn-transparent-dark btn-icon dropdown-toggle" id="dropdownMenuButton" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i data-feather="more-vertical"></i>
            </button>
            <div class="dropdown-menu dropdown-menu-right animated--fade-in-up" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#!">حذف</a>
                <a class="dropdown-item" href="#!">ویرایش</a>
                <a class="dropdown-item" href="#!">اشتراک گذاری</a>
            </div>
        </div>
    </div>
    <div class="card-body">
        ...
    </div>
</div>

.card.card-header-actions
    .card-header
        | هدر منو کشویی
        .dropdown.no-caret
            button#dropdownMenuButton.btn.btn-transparent-dark.btn-icon.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                i.text-primary(data-feather='more-vertical')
            .dropdown-menu.dropdown-menu-end.animated--fade-in-up(aria-labelledby='dropdownMenuButton')
                a.dropdown-item(href='#!') حذف
                a.dropdown-item(href='#!') ویرایش
                a.dropdown-item(href='#!') اشتراک گذاری

    .card-body
        | ...

کلاس .card-header-actions را به .card-header-actions خود اضافه کنید هنگام استفاده 2 المان در هدر کارت. این کلاس یک استایل انعطاف‌پذیر را در هدر کارت اعمال می‌کند، فاصله یکسان بین متن و المان دیگر ایجاد میکند.

کارت دارای آیکن :

کارت دارای آیکن

این نمونه از یک کارت سفارشی با گروهی از آیکون ها در داخل هدر کارت است.

HTML
PUG

<div class="card card-header-actions mx-auto">
    <div class="card-header">
        کارت دارای آیکن
        <div>
            <button class="btn btn-pink btn-icon mr-2">
                <i data-feather="heart"></i>
            </button>
            <button class="btn btn-teal btn-icon mr-2">
                <i data-feather="bookmark"></i>
            </button>
            <button class="btn btn-blue btn-icon">
                <i data-feather="share"></i>
            </button>
        </div>
    </div>
    <div class="card-body">
        ...
    </div>
</div>

.card.card-header-actions
    .card-header
        | کارت دارای آیکن
        div
            button.btn.btn-pink.btn-icon.me-2
                i(data-feather='heart')
            button.btn.btn-teal.btn-icon.me-2
                i(data-feather='bookmark')
            button.btn.btn-blue.btn-icon
                i(data-feather='share')

    .card-body
        ...

از آیکن های Feather icons یا Font Awesome و Box icons میتوانید استفاده کنید. ما از کلاس .card-header-actions در کامپوننت خود استفاده کردیم.

کارت با دکمه در هدر :

دکمه در هدر

این یک نمونه کارت که دارای دکمه در هدر می باشد.

HTML
PUG

<div class="card card-header-actions">
    <div class="card-header">
        دکمه در هدر
        <button class="btn btn-primary btn-sm">حذف</button>
    </div>
    <div class="card-body">
        ...
    </div>
</div>

.card.card-header-actions
    .card-header
        | دکمه در هدر
        button.btn.btn-primary.btn-sm حذف

    .card-body
        | ...

دکمه داخل هدر کارت در مثال کامپوننت بالا از کلاس .btn-sm استفاده می کند. از .btn-xs نیز هم پشتیبانی می شود، اما دکمه های بزرگتر ممکن است ارتفاع داخلی هدر کارت را تغییر دهند.

کارت دارای جستجو :

هدر

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

HTML
PUG

<div class="card card-header-actions">
    <div class="card-header">
        هدر
        <form>
            <input class="form-control" placeholder="جستجو...">
        </form>
    </div>
    <div class="card-body">
        ...
    </div>
</div>

.card.card-header-actions
    .card-header
        | هدر
        form
            input.form-control(placeholder='Search')

    .card-body
        ...

در هدر کارت میتوان از فرم های ورودی استفاده کرد برای قرار دادن فرم های ورودی باید از کلاس .card-header-actions در هدر کارت استفاده کنید.

کارت های پیشفرفته توسعه داده شده است

کلاس .card-header-actions به شما امکان می دهد محتوای هدر کارت را به میزان قابل توجهی گسترش دهید. مثال‌های بالا تنها تعدادی از روش هایی هستند که می‌توانید به هدر کارت خود اضافه کنید.

کارت باز و بسته کشویی

نمونه کارت کارت باز و بسته کشویی

این یک نمونه کارت تاشو با استفاده از بوت استرپ است، دارای یک ظاهر طراحی سفارشی اضافه شده است. روی هدر کارت کلیک کنید تا بدنه کارت را در حال باز و بسته شدن ببینید!

HTML
PUG

<div class="card card-collapsable">
    <a class="card-header" href="#collapseCardExample" data-bs-toggle="collapse" role="button" aria-expanded="true" aria-controls="collapseCardExample">نمونه کارت کارت باز و بسته کشویی
        <div class="card-collapsable-arrow">
            <i class="fas fa-chevron-down"></i>
        </div>
    </a>
    <div class="collapse show" id="collapseCardExample">
        <div class="card-body">
            ...
        </div>
    </div>
</div>

.card.card-collapsable
    a.card-header(href='#collapseCardExample', data-bs-toggle='collapse', role='button', aria-expanded='true', aria-controls='collapseCardExample')
        | نمونه کارت کارت باز و بسته کشویی
        .card-collapsable-arrow
            i.fas.fa-chevron-down
    #collapseCardExample.collapse.show
        .card-body
            | ...

کامپوننت کارت جمع شونده از قابلیت جمع شدن داخلی بوت استرپ استفاده می کند. برای کسب اطلاعات بیشتر در مورد استفاده از collapse، از بخش تاشو Bootstrap Docs دیدن کنید .

کارت ناوبری

کارت دارای تب ناوبری:

کارت ناوبری زبانه دار

کارت ناوبری زبانه‌دار به شما امکان می‌دهد از کامپوننت ناوبری داخلی بوت استرپ برای جابه‌جایی بین پنجره‌های برگه برای نمایش محتوا استفاده کنید.

تب نمونه

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

HTML
PUG

<div class="card">
    <div class="card-header border-bottom">
        <ul class="nav nav-tabs card-header-tabs" id="cardTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="overview-tab" href="#overview" data-bs-toggle="tab" role="tab" aria-controls="بررسی اجمالی" aria-selected="true">بررسی اجمالی</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="example-tab" href="#example" data-bs-toggle="tab" role="tab" aria-controls="نمونه" aria-selected="false">نمونه</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">غیرفعال</a>
            </li>
        </ul>
    </div>
    <div class="card-body">
        <div class="tab-content" id="cardTabContent">
            <div class="tab-pane fade show active" id="بررسی اجمالی" role="tabpanel" aria-labelledby="overview-tab">
                <h5 class="card-title">کارت ناوبری زبانه دار</h5>
                <p class="card-text">...</p>
            </div>
            <div class="tab-pane fade" id="example" role="tabpanel" aria-labelledby="example-tab">
                <h5 class="card-title">تب نمونه</h5>
                <p class="card-text">...</p>
            </div>
        </div>
    </div>
</div>

.card
    .card-header.border-bottom
        ul.nav.nav-tabs.card-header-tabs#cardTab(role='tablist')
            li.nav-item
                a.nav-link.active#overview-tab(href='#overview', data-bs-toggle='tab', role='tab', aria-controls='overview', aria-selected='true') بررسی اجمالی
            li.nav-item
                a.nav-link#example-tab(href='#example', data-bs-toggle='tab', role='tab', aria-controls='example', aria-selected='false') نمونه
            li.nav-item
                a.nav-link.disabled(href='#', tabindex='-1', aria-disabled='true') غیرفعال
    .card-body
        .tab-content#cardTabContent
            .tab-pane.fade.show.active#overview(role='tabpanel', aria-labelledby='overview-tab')
                h5.card-title کارت ناوبری زبانه دار
                p.card-text
                    | ...
            .tab-pane.fade#example(role='tabpanel', aria-labelledby='example-tab')
                h5.card-title تب نمونه
                p.card-text
                    | ...

این کامپوننت از تابع های جاوا اسکریپت ناوبری برگه‌دار بوت استرپ استفاده می‌کند. برای اطلاعات بیشتر در مورد استفاده، مراجعه کنید به بخش Navs در Bootstrap Docs .

کارت با پیمایش قرصی:

کارت پیمایش قرصی

کارت پیمایش قرص به شما این امکان را می‌دهد که از کامپوننت ناوبری داخلی بوت استرپ برای جابه‌جایی بین پنجره‌های برگه برای نمایش محتوا با استفاده از قرص‌های ناوبری در هدر کارت استفاده کنید.

پنل نمونه

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

HTML
PUG

<div class="card">
    <div class="card-header">
        <ul class="nav nav-pills card-header-pills" id="cardPill" role="tablist">
            <li class="nav-item"><a class="nav-link active" id="overview-pill" href="#overviewPill" data-bs-toggle="tab" role="tab" aria-controls="overview" aria-selected="true">بررسی اجمالی</a></li>
            <li class="nav-item"><a class="nav-link" id="example-pill" href="#examplePill" data-bs-toggle="tab" role="tab" aria-controls="example" aria-selected="false">نمونه</a></li>
            <li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">نمونه</a></li>
        </ul>
    </div>
    <div class="card-body">
        <div class="tab-content" id="cardPillContent">
            <div class="tab-pane fade show active" id="overviewPill" role="tabpanel" aria-labelledby="overview-pill">
                <h5 class="card-title">کارت پیمایش قرص</h5>
                <p class="card-text">...</p>
            </div>
            <div class="tab-pane fade" id="examplePill" role="tabpanel" aria-labelledby="example-pill">
                <h5 class="card-title">پنل نمونه</h5>
                <p class="card-text">...</p>
            </div>
        </div>
    </div>
</div>

.card
    .card-header
        ul.nav.nav-pills.card-header-pills#cardPill(role='tablist')
            li.nav-item
                a.nav-link.active#overview-pill(href='#overviewPill', data-bs-toggle='tab', role='tab', aria-controls='overview', aria-selected='true') بررسی اجمالی
            li.nav-item
                a.nav-link#example-pill(href='#examplePill', data-bs-toggle='tab', role='tab', aria-controls='example', aria-selected='false') نمونه
            li.nav-item
                a.nav-link.disabled(href='#', tabindex='-1', aria-disabled='true') غیرفعال
    .card-body
        .tab-content#cardPillContent
            .tab-pane.fade.show.active#overviewPill(role='tabpanel', aria-labelledby='overview-pill')
                h5.card-title کارت پیمایش قرصی
                p.card-text
                    | ...
            .tab-pane.fade#examplePill(role='tabpanel', aria-labelledby='example-pill')
                h5.card-title پنل نمونه
                p.card-text
                    | ...

کارت با پیمایش قرصی (عمودی):

پیمایش قرص عمودی

کارت ناوبری قرص عمودی

پنل نمونه

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

HTML
PUG

<div class="card">
    <div class="card-header">کارت پیمایش قرصی عمودی</div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-3">
                <ul class="nav nav-pills flex-column" id="cardPillVertical" role="tablist">
                    <li class="nav-item"><a class="nav-link active" id="overview-pill-vertical" href="#overviewPillVertical" data-bs-toggle="tab" role="tab" aria-controls="overview" aria-selected="true">بررسی اجمالی</a></li>
                    <li class="nav-item"><a class="nav-link" id="example-pill-vertical" href="#examplePillVertical" data-bs-toggle="tab" role="tab" aria-controls="example" aria-selected="false">نمونه</a></li>
                    <li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">نمونه</a></li>
                </ul>
            </div>
            <div class="col-md-9">
                <div class="tab-content" id="cardPillContentVertical">
                    <div class="tab-pane fade show active" id="overviewPillVertical" role="tabpanel" aria-labelledby="overview-pill-vertical">
                        <h5 class="card-title">کارت پیمایش قرصی عمودی</h5>
                        <p class="card-text">...</p>
                    </div>
                    <div class="tab-pane fade" id="examplePillVertical" role="tabpanel" aria-labelledby="example-pill-vertical">
                        <h5 class="card-title">پنل نمونه</h5>
                        <p class="card-text">...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

.card
    .card-header کارت پیمایش قرصی عمودی
    .card-body
        .row
            .col-md-3
                ul.nav.nav-pills.flex-column#cardPillVertical(role='tablist')
                    li.nav-item
                        a.nav-link.active#overview-pill-vertical(href='#overviewPillVertical', data-bs-toggle='tab', role='tab', aria-controls='overview', aria-selected='true') بررسی اجمالی
                    li.nav-item
                        a.nav-link#example-pill-vertical(href='#examplePillVertical', data-bs-toggle='tab', role='tab', aria-controls='example', aria-selected='false') نمونه
                    li.nav-item
                        a.nav-link.disabled(href='#', tabindex='-1', aria-disabled='true') نمونه
            .col-md-9
                .tab-content#cardPillContentVertical
                    .tab-pane.fade.show.active#overviewPillVertical(role='tabpanel', aria-labelledby='overview-pill-vertical')
                        h5.card-title کارت پیمایش قرصی عمودی
                        p.card-text
                            | ...
                    .tab-pane.fade#examplePillVertical(role='tabpanel', aria-labelledby='example-pill-vertical')
                        h5.card-title پنل نمونه
                        p.card-text
                            | ...

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

کارت دارای اسکرول

نمونه کارت قابل پیمایش

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

مکان نما را روی بدنه کارت قرار دهید و اسکرول کنید!

HTML
PUG

<div class="card card-scrollable">
    <div class="card-header">نمونه کارت قابل پیمایش</div>
    <div class="card-body">
        <p class="card-text">...</p>
    </div>
    <div class="card-footer small text-muted">فوتر سایت</div>
</div>

.card.card-scrollable
    .card-header نمونه کارت قابل پیمایش
    .card-body
        p.card-text
            ...
    .card-footer.small.text-muted فوتر سایت

کارت قابل پیمایش سفارشی به شما امکان می دهد حداکثر ارتفاع را روی آن تنظیم کنید. المان .card-body و وقتی ارتفاع ثابت شد محتویات بدنه کارت را اسکرول کنید. می توانید حداکثر ارتفاع بدنه کارت را با تغییر آن تنظیم کنید $card-scrollable-max-height متغیر SCSS که روی 15rem بصورت پیشفرض فعال است.همچنین می‌توانید حداکثر ارتفاع بدنه کارت را با استفاده از CSS درون خطی یا لغو CSS برای کارت‌های مختلف تنظیم کنید.

کارت دارای تصویر

تصویر کارت:

نمونه کارت تصویر در بالا

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

نمونه کارت تصویر در پایین

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

HTML
PUG

<!-- Card Image Cap (Top) Example -->
<div class="card">
    <img class="card-img-top" src="path/to/image" alt="...">
    <div class="card-body">
        <h5 class="card-title">نمونه کارت تصویر در بالا</h5>
        <p class="card-text">...</p>
    </div>
</div>

<!-- Card Image Cap (Bottom) Example -->
<div class="card">
    <div class="card-body">
        <h5 class="card-title">نمونه کارت تصویر در پایین</h5>
        <p class="card-text">...</p>
    </div>
    <img class="card-img-bottom" src="path/to/image" alt="...">
</div>

//- Card Image Cap (Top) Example
.card
    img.card-img-top(src='path/to/image', alt='...')
    .card-body
        h5.card-title نمونه کارت تصویر در بالا
        p.card-text
            | ...

//- Card Image Cap (Bottom) Example
.card
    .card-body
        h5.card-title نمونه کارت تصویر در پایین
        p.card-text
            | ...
    img.card-img-bottom(src='path/to/image', alt='...')

های تصویر کارت به طور پیش فرض با Bootstrap گنجانده شده است. هنگام افزودن تصویر خود، مطمئن شوید که به درستی به مسیر تصویر مورد استفاده اشاره کرده اید.

کارت دارای تصویر همپوشانی:

کارت دارای تصویر (همپوشانی با متن)

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

HTML
PUG

<!-- Card Image Overlay Example -->
<div class="card">
    <img class="card-img" src="path/to/image" alt="...">
    <div class="card-img-overlay">
        <h5 class="card-title">کارت دارای تصویر (همپوشانی با متن)</h5>
        <p class="card-text">...</p>
    </div>
</div>

//- Card Image Overlay Example
.card
    img.card-img(src='path/to/image', alt='...')
    .card-img-overlay
        h5.card-title کارت دارای تصویر (همپوشانی با متن)
        p.card-text
            | ...

هنگام استفاده از کارت پوشش تصویر، می توانید از ابزارهای متنی برای استایل دادن به محتوای کارت یا CSS سفارشی استفاده کنید. در مثال بالا، رنگ متن روی تیره تنظیم شده است تا تصویر پس زمینه روشن تر باشد.

تصویر کارت در اطراف:

تصویر کارت در طرف راست

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

تصویر کارت در طرف چپ

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

HTML
PUG

<!-- Card Image (Left) -->
<div class="card">
    <div class="row no-gutters">
        <div class="col-md-4"><img class="img-fluid" src="path/to/image" alt="..."></div>
        <div class="col-md-8">
            <div class="card-body">
                <h5 class="card-title">تصویر کارت در طرف راست</h5>
                <p class="card-text">...</p>
            </div>
        </div>
    </div>
</div>

<!-- Card Image (Right) -->
<div class="card">
    <div class="row no-gutters">
        <div class="col-md-8">
            <div class="card-body">
                <h5 class="card-title">تصویر کارت در طرف چپ</h5>
                <p class="card-text">...</p>
            </div>
        </div>
        <div class="col-md-4"><img class="img-fluid" src="path/to/image" alt="..."></div>
    </div>
</div>

//- Card Image (Left)
.card
    .row.g-0
        .col-md-4
            img.img-fluid(src='path/to/image', alt='...')
        .col-md-8
            .card-body
                h5.card-title تصویر کارت در طرف راست
                p.card-text
                    | ...

//- Card Image (Right)
.card
    .row.g-0
        .col-md-8
            .card-body
                h5.card-title تصویر کارت در طرف چپ
                p.card-text
                    | ...
        .col-md-4
            img.img-fluid(src='path/to/image', alt='...')

شبکه Bootstrap برای ایجاد انواع کارت های فوق استفاده می شود. مثال های بالا تصاویر کارت را در دو طرف بدنه کارت نشان می دهند.

کارت‌ها مدل دار

موج دار:

کارت مدل موج دار

این نمونه‌ای از کارت‌هایی است که در آن حالت امواج اعمال شده است. استفاده کنید از .card-waves برای تنظیم تصویر پس زمینه به شکل موج دار. این کار با کارت‌های سفید پیش‌فرض و کارت‌هایی که پاورقی کارت ندارند، بهترین کار را دارد.

HTML
PUG

<!-- Waves Styled Card -->
<div class="card card-waves">
    <div class="card-header">کارت مدل موج دار</div>
    <div class="card-body">...</div>
</div>

//- Waves Styled Card
.card.card-waves
    .card-header کارت مدل موج دار
    .card-body ...

کارت های سبک یک ویژگی منحصر به فرد برای SB Admin Pro هستند. اولین تغییر سبک ما، تنوع امواج ما است که از یک SVG به عنوان تصویر پس‌زمینه متصل به مؤلفه کارت والد استفاده می‌کند. این کامپوننت بهتر است با کارت هایی با محتوای بزرگتر استفاده شود.

زاویه دار:

کارت‌های مدل زاویه دار

این نمونه‌ای از کارت‌هایی است که یک ظاهر طراحی زاویه‌ای اعمال شده است. استفاده کنید از .card-angles برای تنظیم تصویر پس زمینه به شکل زاویه دار. این کار با کارت‌های سفید پیش‌فرض و کارت‌هایی که پاورقی کارت ندارند، بهترین کار را دارد.

HTML
PUG

<!-- Angles Styled Card -->
<div class="card card-angles">
    <div class="card-header">کارت‌های مدل زاویه دار</div>
    <div class="card-body">...</div>
</div>

//- Angles Styled Card
.card.card-angles
    .card-header کارت‌های مدل زاویه دار
    .card-body ...

کارت های سبک یک ویژگی منحصر به فرد برای SB Admin Pro هستند. دومین تغییر سبک ما، تغییر زاویه ما است که از یک SVG به عنوان تصویر پس‌زمینه متصل به مؤلفه کارت والد استفاده می‌کند. این کامپوننت بهتر است با کارت هایی با محتوای بزرگتر استفاده شود.

کارت دارای آیکون

آیکن سفارشی کارت

کارت آیکون توسعه ای از مؤلفه کارت بوت استرپ است که از کلاس های طرح بندی بوت استرپ به صورت هماهنگ با استایل سفارشی برای ایجاد طرح بندی کارت جدید استفاده می کند که می توانید از آن برای تأکید بر محتوای خاص استفاده کنید.

HTML
PUG

<!-- Icon Card Example -->
<div class="card card-icon">
    <div class="row no-gutters">
        <div class="col-auto card-icon-aside bg-primary">
            <i data-feather="layers"></i>
        </div>
        <div class="col">
            <div class="card-body py-5">
                <h5 class="card-title">آیکن سفارشی کارت</h5>
                <p class="card-text">...</p>
            </div>
        </div>
    </div>
</div>

//- Icon Card Example
.card.card-icon
    .row.g-0
        .col-auto.card-icon-aside.bg-primary
            i.me-1.text-white-50(data-feather='layers')
        .col
            .card-body.py-5
                h5.card-title آیکن سفارشی کارت
                p.card-text
                    | ...

فونت های Feather Icons, Font Awesome icons,Box icons, یا یک SVG سفارشی را می توان برای آیکن کارت استفاده کرد. از کلاس های پس زمینه ابزار استفاده کنید تا رنگ پس زمینه آیکن را کنار بگذارید.

رنگ بندی کارت‌ها

رنگ بندی پیشفرض کارت‌ها:

کارت اولیه

لورم ایپسوم متن ساختگی با تولید سادگی.

فوتر کارت

کارت ثانویه

لورم ایپسوم متن ساختگی با تولید سادگی.

فوتر کارت

کارت موفقیت

لورم ایپسوم متن ساختگی با تولید سادگی.

فوتر کارت

کارت خطر

لورم ایپسوم متن ساختگی با تولید سادگی.

فوتر کارت

کارت اخطار

لورم ایپسوم متن ساختگی با تولید سادگی.

فوتر کارت

کارت روشن

لورم ایپسوم متن ساختگی با تولید سادگی.

فوتر کارت

کارت تیره

لورم ایپسوم متن ساختگی با تولید سادگی.

فوتر کارت

HTML
PUG

<!-- Primary Card -->
<div class="card bg-primary text-white">
    <div class="card-header text-white">کارت اولیه</div>
    <div class="card-body">
        <p class="card-text">...</p>
    </div>
    <div class="card-footer">فوتر کارت</div>
</div>

<!-- Secondary Card -->
<div class="card bg-secondary text-white">
    <div class="card-header text-white">کارت ثانویه</div>
    <div class="card-body">
        <p class="card-text">...</p>
    </div>
    <div class="card-footer">فوتر کارت</div>
</div>

<!-- Success Card -->
<div class="card bg-success text-white">
    <div class="card-header text-white">کارت موفقیت</div>
    <div class="card-body">
        <p class="card-text">...</p>
    </div>
    <div class="card-footer">فوتر کارت</div>
</div>

<!-- Danger Card -->
<div class="card bg-danger text-white">
    <div class="card-header text-white">کارت خطر</div>
    <div class="card-body">
        <p class="card-text">...</p>
    </div>
    <div class="card-footer">فوتر کارت</div>
</div>

<!-- Warning Card -->
<div class="card bg-warning text-white">
    <div class="card-header text-white">فوتر اخطار</div>
    <div class="card-body">
        <p class="card-text">...</p>
    </div>
    <div class="card-footer">فوتر کارت</div>
</div>

<!-- Light Card -->
<div class="card bg-light">
    <div class="card-header text-dark">کارت روشن</div>
    <div class="card-body">
        <p class="card-text">...</p>
    </div>
    <div class="card-footer">فوتر کارت</div>
</div>

<!-- Dark Card -->
<div class="card bg-dark text-white">
    <div class="card-header text-white">کارت تیره</div>
    <div class="card-body">
        <p class="card-text">...</p>
    </div>
    <div class="card-footer">فوتر کارت</div>
</div>

//- Primary Card
.card.bg-primary.text-white
    .card-header.text-white کارت اولیه
    .card-body
        p.card-text ...
    .card-footer فوتر کارت

//- Secondary Card
.card.bg-secondary.text-white
    .card-header.text-white کارت ثانویه
    .card-body
        p.card-text ...
    .card-footer فوتر کارت

//- Success Card
.card.bg-success.text-white
    .card-header.text-white کارت موفقیت
    .card-body
        p.card-text ...
    .card-footer فوتر کارت

//- Danger Card
.card.bg-danger.text-white
    .card-header.text-white کارت خطر
    .card-body
        p.card-text ...
    .card-footer فوتر کارت

//- Warning Card
.card.bg-warning.text-white
    .card-header.text-white کارت اخطار
    .card-body
        p.card-text ...
    .card-footer فوتر کارت

//- Light Card
.card.bg-light
    .card-header.text-dark کارت روشن
    .card-body
        p.card-text ...
    .card-footer فوتر کارت

//- Dark Card
.card.bg-dark.text-white
    .card-header.text-white کارت تیره
    .card-body
        p.card-text ...
    .card-footer فوتر کارت

کارت های بالا از یگ .bg-* استفاده می کنند کلاس ابزار پس زمینه، همراه با کلاس ابزار رنگ متن در صورت لزوم. تمام مثال های بالا، به جز کارت رنگی پس زمینه روشن، از آن استفاده کنید .text-white ابزار به همراه یک ابزار پس زمینه.

رنگ بندی کارت توسعه داده شده:

کارت قرمز

لورم ایپسوم متن ساختگی با تولید سادگی.

فوتر کارت

کارت نارنجی

لورم ایپسوم متن ساختگی با تولید سادگی.

فوتر کارت

کارت زرد

لورم ایپسوم متن ساختگی با تولید سادگی.

فوتر کارت

کارت سبز

لورم ایپسوم متن ساختگی با تولید سادگی.

فوتر کارت

کارت سبز یشمی

لورم ایپسوم متن ساختگی با تولید سادگی.

فوتر کارت

کارت فیروزه ای

لورم ایپسوم متن ساختگی با تولید سادگی.

فوتر کارت

کارت آبی

لورم ایپسوم متن ساختگی با تولید سادگی.

فوتر کارت

کارت نیلی آبی

لورم ایپسوم متن ساختگی با تولید سادگی.

فوتر کارت

کارت بنفش

لورم ایپسوم متن ساختگی با تولید سادگی.

فوتر کارت

کارت صورتی

لورم ایپسوم متن ساختگی با تولید سادگی.

فوتر کارت

HTML
PUG

<!-- Red Card -->
<div class="card bg-red text-white">
    <div class="card-header text-white">کارت قرمز</div>
    <div class="card-body">
        <p class="card-text">...</p>
    </div>
    <div class="card-footer">فوتر کارت</div>
</div>

<!-- Orange Card -->
<div class="card bg-orange text-white">
    <div class="card-header text-white">کارت نارنچی</div>
    <div class="card-body">
        <p class="card-text">...</p>
    </div>
    <div class="card-footer">فوتر کارت</div>
</div>

<!-- Yellow Card -->
<div class="card bg-yellow text-white">
    <div class="card-header text-white">کارت زرد</div>
    <div class="card-body">
        <p class="card-text">...</p>
    </div>
    <div class="card-footer">فوتر کارت</div>
</div>

<!-- Green Card -->
<div class="card bg-green text-white">
    <div class="card-header text-white">کارت سبز</div>
    <div class="card-body">
        <p class="card-text">...</p>
    </div>
    <div class="card-footer">فوتر کارت</div>
</div>

<!-- Teal Card -->
<div class="card bg-teal text-white">
    <div class="card-header text-white">کارت سبز روشن</div>
    <div class="card-body">
        <p class="card-text">...</p>
    </div>
    <div class="card-footer">فوتر کارت</div>
</div>

<!-- Cyan Card -->
<div class="card bg-cyan text-white">
    <div class="card-header text-white">کارت فیروزه ای</div>
    <div class="card-body">
        <p class="card-text">...</p>
    </div>
    <div class="card-footer">فوتر کارت</div>
</div>

<!-- Blue Card -->
<div class="card bg-blue text-white">
    <div class="card-header text-white">کارت آبی</div>
    <div class="card-body">
        <p class="card-text">...</p>
    </div>
    <div class="card-footer">فوتر کارت</div>
</div>

<!-- Indigo Card -->
<div class="card bg-indigo text-white">
    <div class="card-header text-white">کارت نیلی آبی</div>
    <div class="card-body">
        <p class="card-text">...</p>
    </div>
    <div class="card-footer">فوتر کارت</div>
</div>

<!-- Purple Card -->
<div class="card bg-purple text-white">
    <div class="card-header text-white">کارت بنفش</div>
    <div class="card-body">
        <p class="card-text">...</p>
    </div>
    <div class="card-footer">فوتر کارت</div>
</div>

<!-- Pink Card -->
<div class="card bg-pink text-white">
    <div class="card-header text-white">کارت صورتی</div>
    <div class="card-body">
        <p class="card-text">...</p>
    </div>
    <div class="card-footer">فوتر کارت</div>
</div>

//- Red Card
.card.bg-red.text-white
    .card-header.text-white کارت قرمز
    .card-body
        p.card-text ...
    .card-footer فوتر کارت

//- Orange Card
.card.bg-orange.text-white
    .card-header.text-white کارت نارنجی
    .card-body
        p.card-text ...
    .card-footer فوتر کارت

//- Yellow Card
.card.bg-yellow.text-white
    .card-header.text-white کارت زرد
    .card-body
        p.card-text ...
    .card-footer فوتر کارت

//- Green Card
.card.bg-green.text-white
    .card-header.text-white کارت سبز
    .card-body
        p.card-text ...
    .card-footer فوتر کارت

//- Teal Card
.card.bg-teal.text-white
    .card-header.text-white کارت سبز روشن
    .card-body
        p.card-text ...
    .card-footer فوتر کارت

//- Cyan Card
.card.bg-cyan.text-white
    .card-header.text-white کارت فیروزه ای
    .card-body
        p.card-text ...
    .card-footer فوتر کارت

//- Blue Card
.card.bg-blue.text-white
    .card-header.text-white کارت آبی
    .card-body
        p.card-text ...
    .card-footer فوتر کارت

//- Indigo Card
.card.bg-indigo.text-white
    .card-header.text-white کارت نیلی آبی
    .card-body
        p.card-text ...
    .card-footer فوتر کارت

//- Purple Card
.card.bg-purple.text-white
    .card-header.text-white کارت بنفش
    .card-body
        p.card-text ...
    .card-footer فوتر کارت

//- Pink Card
.card.bg-pink.text-white
    .card-header.text-white کارت صورتی
    .card-body
        p.card-text ...
    .card-footer فوتر کارت

همچنین می‌توانید از سیستم رنگی توسعه‌یافته غیر متنی برای افزودن رنگ به کارت‌های خود استفاده کنید. وقتی یک کارت باید رنگ خاصی داشته باشد و نیازی به رنگ آمیزی متنی یا استایل خاص حالتی نداشته باشد، از ابزارهای زیر برای استایل دادن به کارت های خود استفاده کنید.

مستندات بوت استرپ موجود است

کارت‌ها یک جزء پیش‌فرض هستند که در فریمورک Bootstrap گنجانده شده است. برای اطلاعات بیشتر در مورد پیاده سازی، اصلاح و گسترش استفاده از کارت ها در پروژه خود، به صفحه مستندات کارت بوت استرپ رسمی مراجعه کنید.

از Bootstrap Card Docs دیدن کنید

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