هشدارها


رنگ بندی

می توانید از یکی از 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