هشدارها


مثال ها

می توانید از یکی از 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-warning py-2 m-0 bg-primary border-0 rounded-0 alert-dismissible fade show text-center overflow-hidden" role="alert">
	<!-- SVG shape START -->
	<figure class="position-absolute top-50 start-50 translate-middle">
		<svg width="1848" height="481" viewBox="0 0 1848.9 481.8" xmlns="http://www.w3.org/2000/svg">
			<path class="fill-success" d="m779.4 251c-10.3-11.5-19.9-23.8-29.4-36.1-9-11.6-18.4-22.8-27.1-34.7-15.3-21.2-30.2-45.8-54.8-53.3-10.5-3.2-21.6-3.2-30.6 2.5-7.6 4.8-13 12.6-17.3 20.9-10.8 20.6-16.1 44.7-24.6 66.7-7.9 20.2-19.4 38.6-33.8 54.3-14.7 16.2-31.7 30-50.4 41-15.9 9.4-33.4 17.2-52 19.3-18.4 2-38-2.5-56.5-6.2-22.4-4.4-45.1-9.7-67.6-10.9-9.8-0.5-19.8-0.3-29.1 2.3-9.8 2.8-18.7 8.6-26.6 15.2-17.3 14.5-30.2 34.4-43.7 52.9-12.9 17.6-26.8 34.9-45.4 45.4-19.5 11-42.6 12.1-65 6.6-52.3-13.1-93.8-56.5-127.9-101.5-8.8-11.6-17.3-23.4-25.6-35.4-0.6-0.9-1.1-1.8-1.6-2.7-1.1-2.4-0.9-2.6 0.6-1.2 1 0.9 1.9 1.9 2.7 3 35.3 47.4 71.5 98.5 123.2 123.9 22.8 11.2 48.2 17.2 71.7 12.2 23-5 40.6-21.2 55.3-39.7 24.5-30.7 46.5-75.6 87.1-83 19.5-3.5 40.7 0.1 60.6 3.7 21.2 3.9 42.3 9.1 63.6 11.7 17.8 2.3 35.8-0.1 52.2-7 20-8.1 38.4-20.2 54.8-34.6 16.2-14.1 31-30.7 41.8-50.4 11.1-20.2 17-43.7 24.9-65.7 6.1-16.9 13.8-36.2 29.3-44.5 16.1-8.6 37.3-1.9 52.3 10.6 18.7 15.6 31.2 39.2 46.7 58.2"/>
			<path class="fill-warning" d="m1157.9 344.9c9.8 7.6 18.9 15.8 28.1 24 8.6 7.7 17.6 15.2 26 23.2 14.8 14.2 29.5 30.9 51.2 34.7 9.3 1.6 18.8 0.9 26.1-3.8 6.1-3.9 10.2-9.9 13.2-16.2 7.6-15.6 10.3-33.2 15.8-49.6 5.2-15.1 13.6-29 24.7-41.3 11.4-12.6 24.8-23.6 40-32.8 12.9-7.8 27.3-14.6 43.1-17.3 15.6-2.6 32.8-0.7 49 0.7 19.6 1.7 39.4 4 58.8 3.4 8.4-0.3 17-1.1 24.8-3.6 8.2-2.7 15.4-7.4 21.6-12.7 13.7-11.6 23.1-26.7 33.3-40.9 9.6-13.5 20.2-26.9 35.3-35.6 15.8-9.2 35.6-11.6 55.2-9.1 45.7 5.8 84.8 34.3 117.6 64.4 8.7 8 17.2 16.2 25.6 24.6 2.5 3.2 1.9 3-1.2 1-34.3-32-69.7-66.9-116.5-81.9-20.5-6.5-42.7-9.2-62.4-4-19.3 5.1-33.1 17.9-44.3 32.2-18.5 23.7-33.9 57.5-68.1 65.5-16.5 3.8-34.9 2.6-52.3 1.3-18.5-1.4-37-3.7-55.4-4.2-15.5-0.5-30.7 2.5-44.2 8.5-16.5 7.2-31.3 17.1-44.3 28.5-12.8 11.2-24.1 24.1-31.9 39-7.9 15.3-11.1 32.5-16.2 48.9-3.9 12.6-9 26.9-21.6 33.9-13.1 7.3-31.9 3.8-45.7-4.1-17.2-10-29.9-26.1-44.6-38.8"/>
			<path class="fill-warning" d="m1840.8 379c-8.8 40.3-167.8 79.9-300.2 45.3-42.5-11.1-91.4-32-138.7-11.6-38.7 16.7-55 66-90.8 67.4-25.1 1-48.6-20.3-58.1-39.8-31-63.3 50.7-179.9 155.7-208.1 50.4-13.5 97.3-3.2 116.1 1.6 36.3 9.3 328.6 87.4 316 145.2z"/>
			<path class="fill-success" d="M368.3,247.3C265.6,257.2,134,226,110.9,141.5C85,47.2,272.5-9.4,355.5-30.7s182.6-31.1,240.8-18.6    C677.6-31.8,671.5,53.9,627,102C582.6,150.2,470.9,237.5,368.3,247.3z"/>
		</svg>
	</figure>
	<!-- SVG shape END -->
  <div class="position-relative">
  	<p class="text-white m-0">دریافت مبلغ ویزیت از طریق تلفن کلینیک <a href="#" class="btn btn-sm btn-light-soft me-3 mb-0">ورود به سایت</a></p>
  </div>
  <!-- Close button -->
  <button type="button" class="btn-close btn-close-white opacity-9 p-3" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

کسب اطلاعات بیشتر در سایت رسمی Bootstrap