هشدارها

اجزای هشدار برای افزودن تاکید ویژه به محتوا
هشدارهای پایه بوت استرپ
<div class="alert alert-primary" role="alert">
    این یک هشدار اولیه است - بررسی کنید!
</div>
<div class="alert alert-secondary" role="alert">
    این یک هشدار ثانویه است - بررسی کنید!
</div>
<div class="alert alert-success" role="alert">
    این یک هشدار موفقیت است - بررسی کنید!
</div>
<div class="alert alert-danger" role="alert">
    این یک هشدار خطر است - بررسی کنید!
</div>
<div class="alert alert-warning" role="alert">
    این یک هشدار اخطار است - بررسی کنید!
</div>
<div class="alert alert-info" role="alert">
    این یک هشدار اطلاعات است - بررسی کنید!
</div>
<div class="alert alert-light" role="alert">
    این یک هشدار روشن است - بررسی کنید!
</div>
<div class="alert alert-dark" role="alert">
    این یک هشدار تیره است - بررسی کنید!
</div>
.alert.alert-primary(role='alert')
    | این یک هشدار اولیه است - بررسی کنید!
.alert.alert-secondary(role='alert')
    | این یک هشدار ثانویه است - بررسی کنید!
.alert.alert-success(role='alert')
    | این یک هشدار موفقیت است - بررسی کنید!
.alert.alert-danger(role='alert')
    | این یک هشدار خطر است - بررسی کنید!
.alert.alert-warning(role='alert')
    | این یک هشدار اخطار است - بررسی کنید!
.alert.alert-info(role='alert')
    | این یک هشدار اطلاعات است - بررسی کنید!
.alert.alert-light(role='alert')
    | این یک هشدار روشن است - بررسی کنید!
.alert.alert-dark(role='alert')
    | این یک هشدار تیره است - بررسی کنید!
سبک‌های هشدار پیش‌فرض Bootstrap به گونه‌ای طراحی شده‌اند که با موضوع SB Admin Pro مطابقت داشته باشد.
ظاهر محتوای هشدار
<div class="alert alert-primary alert-dismissible fade show" role="alert">
    <h5 class="alert-heading">سرتیتر هشدار</h5>
    این یک هشدار با محتوای متنی دارای سرتیتر و قابل رد شدن است. <a class="alert-link" href="#!">نمونه نشانی اینترنتی</a>
    <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
.alert.alert-primary.alert-dismissible.fade.show(role='alert')
    h5.alert-heading سرتیتر هشدار
    | این یک هشدار با محتوای متنی دارای سرتیتر و قابل رد شدن است.
    a.alert-link(href='#!') نمونه نشانی اینترنتی
    button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')

به طور پیش فرض، محتوا در هشدارها بوت استرپ استفاده میشود. با استفاده از کلاس .alert-heading میتوانید به هشدارها سرتیتر دهید و با استفاده از .alert-link میتوایند در هشدارها از نشانی اینترنتی استفاده کنید و برای رد کردن هشدار میتوانید به تگ آیکن بستن ویژگی زیر را اضافه کنید data-bs-dismiss='alert'

در مورد رد کردن هشدارهای Bootstrap بیشتر بدانید مستندات مؤلفه هشدارهای بوت استرپ .

هشدارهای سفارشی آیکن دار
<div class="alert alert-primary alert-icon" role="alert">
    <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
    <div class="alert-icon-aside">
        <i class="far fa-flag"></i>
    </div>
    <div class="alert-icon-content">
        <h6 class="alert-heading">اولیه</h6>
        این یک هشدار اولیه قابل رد کردن است - بررسی کنید!
    </div>
</div>
<div class="alert alert-secondary alert-icon" role="alert">
    <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
    <div class="alert-icon-aside">
        <i data-feather="feather"></i>
    </div>
    <div class="alert-icon-content">
        <h6 class="alert-heading">اخطار</h6>
        این یک هشدار اخطار قابل رد کردن است - بررسی کنید!
    </div>
</div>
.alert.alert-primary.alert-icon(role='alert')
    button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
    .alert-icon-aside
        i.far.fa-flag
    .alert-icon-content
        h6.alert-heading اولیه
        | این یک هشدار اولیه قابل رد کردن است - بررسی کنید!
.alert.alert-secondary.alert-icon(role='alert')
    button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
    .alert-icon-aside
        i(data-feather='feather')
    .alert-icon-content
        h6.alert-heading اخطار
        | این یک هشدار اخطار قابل رد کردن است - بررسی کنید!
گزینه هشدار آیکون سفارشی به شما امکان می دهد از نمادهای درون هشدارها برای زمینه اضافی استفاده کنید. از نمادهای Font Awesome یا Feather Icons استفاده کنید!
هشدارهای سفارشی پررنگ
<div class="alert alert-primary alert-solid" role="alert">این یک هشدار پررنگ اولیه است - بررسی کنید!</div>
<div class="alert alert-secondary alert-solid" role="alert">این یک هشدار پررنگ ثانویه است - بررسی کنید!</div>
<div class="alert alert-success alert-solid" role="alert">این یک هشدار پررنگ موفقیت است - بررسی کنید!</div>
<div class="alert alert-danger alert-solid" role="alert">این یک هشدار پررنگ خطر است - بررسی کنید!</div>
<div class="alert alert-warning alert-solid" role="alert">این یک هشدار پررنگ اخطار است - بررسی کنید!</div>
<div class="alert alert-info alert-solid" role="alert">این یک هشدار پررنگ اطلاعات است - بررسی کنید!</div>
<div class="alert alert-light alert-solid" role="alert">این یک هشدار پررنگ روشن است - بررسی کنید!</div>
<div class="alert alert-dark alert-solid" role="alert">این یک هشدار پررنگ تیره است - بررسی کنید!</div>
.alert.alert-primary.alert-solid(role='alert')
    | این یک هشدار پررنگ اولیه است - بررسی کنید!
.alert.alert-secondary.alert-solid(role='alert')
    | این یک هشدار پررنگ ثانویه است - بررسی کنید!
.alert.alert-success.alert-solid(role='alert')
    | این یک هشدار پررنگ موفقیت است - بررسی کنید!
.alert.alert-danger.alert-solid(role='alert')
    | این یک هشدار پررنگ خطر است - بررسی کنید!
.alert.alert-warning.alert-solid(role='alert')
    | این یک هشدار پررنگ اخطار است - بررسی کنید!
.alert.alert-info.alert-solid(role='alert')
    | این یک هشدار پررنگ اطلاعات است - بررسی کنید!
.alert.alert-light.alert-solid(role='alert')
    | این یک هشدار پررنگ روشن است - بررسی کنید!
.alert.alert-dark.alert-solid(role='alert')
    | این یک هشدار پررنگ تیره است - بررسی کنید!
کلاس .alert-solid را به هر هشداری اضافه کنید تا به جای رنگ کنتراست کم پیش‌فرض، یک رنگ حالت پررنگ سفارشی دریافت کنید. هر یک از گزینه‌های محتوای هشدار دیگر، از جمله هشدارهای نماد سفارشی، با سبک‌های هشدار پررنگ پشتیبانی می‌شوند.
هشدارهای توسعه داده شده
رنگ سفارشی به همراه هشدارهای پایه:
<div class="alert alert-red" role="alert">این یک هشدار قرمز است.</div>
<div class="alert alert-orange" role="alert">این یک هشدار نارنجی است.</div>
<div class="alert alert-yellow" role="alert">این یک هشدار زرد است.</div>
<div class="alert alert-green" role="alert">این یک هشدار سبز است.</div>
<div class="alert alert-teal" role="alert">این یک هشدار سبز روشن است.</div>
<div class="alert alert-cyan" role="alert">این یک هشدار فیروزه ای است.</div>
<div class="alert alert-blue" role="alert">این یک هشدار آبی است.</div>
<div class="alert alert-indigo" role="alert">این یک هشدار نیلی آبی است.</div>
<div class="alert alert-purple" role="alert">این یک هشدار بنفش است.</div>
<div class="alert alert-pink" role="alert">این یک هشدار صورتی است.</div>
.alert.alert-red(role='alert') این یک هشدار قرمز است.
.alert.alert-orange(role='alert') این یک هشدار نارنجی است.
.alert.alert-yellow(role='alert') این یک هشدار زرد است.
.alert.alert-green(role='alert') این یک هشدار سبز است.
.alert.alert-teal(role='alert') این یک هشدار سبز روشن است.
.alert.alert-cyan(role='alert') این یک هشدار فیروزه ای است.
.alert.alert-blue(role='alert') این یک هشدار آبی است.
.alert.alert-indigo(role='alert') این یک هشدار نیلی آبی است.
.alert.alert-purple(role='alert') این یک هشدار بنفش است.
.alert.alert-pink(role='alert') این یک هشدار صورتی است.
سیستم رنگی توسعه یافته SB Admin Pro به شما امکان می دهد از رنگ های غیر متنی مانند رنگ های Bootstrap استفاده کنید.
رنگ سفارشی پر رنگ به همراه هشدارهای پایه:<
<div class="alert alert-red alert-solid" role="alert">این یک هشدار پررنگ قرمز است.</div>
<div class="alert alert-orange alert-solid" role="alert">این یک هشدار پررنگ نارنجی است.</div>
<div class="alert alert-yellow alert-solid" role="alert">این یک هشدار پررنگ زرد است.</div>
<div class="alert alert-green alert-solid" role="alert">این یک هشدار پررنگ سبز است.</div>
<div class="alert alert-teal alert-solid" role="alert">این یک هشدار پررنگ سبز روشن است.</div>
<div class="alert alert-cyan alert-solid" role="alert">این یک هشدار پررنگ فیروزه ای است.</div>
<div class="alert alert-blue alert-solid" role="alert">این یک هشدار پررنگ آبی است.</div>
<div class="alert alert-indigo alert-solid" role="alert">این یک هشدار پررنگ نیلی آبی است.</div>
<div class="alert alert-purple alert-solid" role="alert">این یک هشدار پررنگ بنفش است.</div>
<div class="alert alert-pink alert-solid" role="alert">این یک هشدار پررنگ صورتی است.</div>
.alert.alert-red.alert-solid(role='alert') این یک هشدار پررنگ قرمز است.
.alert.alert-orange.alert-solid(role='alert') این یک هشدار پررنگ نارنجی است.
.alert.alert-yellow.alert-solid(role='alert') این یک هشدار پررنگ زرد است.
.alert.alert-green.alert-solid(role='alert') این یک هشدار پررنگ سبز است.
.alert.alert-teal.alert-solid(role='alert') این یک هشدار پررنگ سبز روشن است.
.alert.alert-cyan.alert-solid(role='alert') این یک هشدار پررنگ فیروزه ای است.
.alert.alert-blue.alert-solid(role='alert') این یک هشدار پررنگ آبی است.
.alert.alert-indigo.alert-solid(role='alert') این یک هشدار پررنگ نیلی آبی است.
.alert.alert-purple.alert-solid(role='alert') این یک هشدار پررنگ بنفش است.
.alert.alert-pink.alert-solid(role='alert') این یک هشدار پررنگ صورتی است.
کلاس .alert-solid به هشدارهای توسعه یافته اضافه کنید تا پررنگ نمایش داده شوند.
مستندات بوت استرپ موجود است

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

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