هشدارها
رنگ بندی
می توانید از یکی از 8 کلاس متنی مورد نیاز (به عنوان مثال، alert-success
) استفاده کنید.
این یک پیام تستی است!
این یک پیام تستی است!
این یک پیام تستی است!
این یک پیام تستی است!
این یک پیام تستی است!
این یک پیام تستی است!
این یک پیام تستی است!
<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-link
می توانید لینک های رنگی مطابق با هر alert ارائه دهید.
این یک پیام تست با یک لینک تست است. میتوانید روی آن کلیک کنید.
این یک پیام تست با یک لینک تست است. میتوانید روی آن کلیک کنید.
این یک پیام تست با یک لینک تست است. میتوانید روی آن کلیک کنید.
این یک پیام تست با یک لینک تست است. میتوانید روی آن کلیک کنید.
این یک پیام تست با یک لینک تست است. میتوانید روی آن کلیک کنید.
این یک پیام تست با یک لینک تست است. میتوانید روی آن کلیک کنید.
این یک پیام تست با یک لینک تست است. میتوانید روی آن کلیک کنید.
این یک پیام تست با یک لینک تست است. میتوانید روی آن کلیک کنید.
<div class="alert alert-primary" role="alert">
این یک پیام تست با <a href="#" class="alert-link">یک لینک تست</a>. .است. میتوانید روی آن کلیک کنید
</div>
<div class="alert alert-secondary" role="alert">
این یک پیام تست با <a href="#" class="alert-link">یک لینک تست</a>. .است. میتوانید روی آن کلیک کنید
</div>
<div class="alert alert-success" role="alert">
این یک پیام تست با <a href="#" class="alert-link">یک لینک تست</a>. .است. میتوانید روی آن کلیک کنید
</div>
<div class="alert alert-danger" role="alert">
این یک پیام تست با <a href="#" class="alert-link">یک لینک تست</a>. .است. میتوانید روی آن کلیک کنید
</div>
<div class="alert alert-warning" role="alert">
این یک پیام تست با <a href="#" class="alert-link">یک لینک تست</a>. .است. میتوانید روی آن کلیک کنید
</div>
<div class="alert alert-info" role="alert">
این یک پیام تست با <a href="#" class="alert-link">یک لینک تست</a>. .است. میتوانید روی آن کلیک کنید
</div>
<div class="alert alert-light" role="alert">
این یک پیام تست با <a href="#" class="alert-link">یک لینک تست</a>. .است. میتوانید روی آن کلیک کنید
</div>
<div class="alert alert-dark" role="alert">
این یک پیام تست با <a href="#" class="alert-link">یک لینک تست</a>. .است. میتوانید روی آن کلیک کنید
</div>
متنی
هشدارها همچنین می توانند حاوی عناصر اضافی HTML مانند عنوان، پاراگراف ها و تقسیم کننده ها باشند.
عنوان
روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">عنوان</h4>
<p>روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.</p>
<hr>
<p class="mb-0">حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
</div>
قابلیت close نسخه 1
سلام! با کلیک روی دکمه بستن در سمت راست ، این باکس را میتوانید ببندید.
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>سلام!</strong> با کلیک روی دکمه بستن در سمت راست ، این باکس را میتوانید ببندید.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
قابلیت close نسخه 2

<div class="alert alert-success alert-dismissible fade show mt-2 mb-0 rounded-3" role="alert">
<!-- Avatar -->
<div class="avatar avatar-xs ms-2">
<img class="avatar-img rounded-circle" src="assets/images/avatar/09.jpg" alt="avatar">
</div>
<!-- Info -->
کلاس رشد شخصیت از ساعت 14 شروع می شود، روی <a href="#" class="text-reset btn-link mb-0 fw-bold">ثبت نام</a>کلیک کنید.
<button type="button" class="btn-close mt-1" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
کسب اطلاعات بیشتر در سایت رسمی Bootstrap