آموزش بوت استرپ
راهنمای جامع و آموزش گام به گام طراحی قالب وبسایت با bootstrap

مثال ها 

هشدارها برای هر طول متن در دسترس هستند و همچنین یک دکمه اختیاری است. برای یک ظاهر مناسب، از یکی از هشت طبقه کلاس متنی مورد نیاز استفاده کنید (به عنوان مثال، alert-success.). برای اخراج درون خطی، از پلاگین جی کوئری هشدار استفاده کنید.

 

 

 <div class="alert alert-primary" role="alert"> This is a primary alert—check it out! </div> <div class="alert alert-secondary" role="alert"> This is a secondary alert—check it out! </div> <div class="alert alert-success" role="alert"> This is a success alert—check it out! </div> <div class="alert alert-danger" role="alert"> This is a danger alert—check it out! </div> <div class="alert alert-warning" role="alert"> This is a warning alert—check it out! </div> <div class="alert alert-info" role="alert"> This is a info alert—check it out! </div> <div class="alert alert-light" role="alert"> This is a light alert—check it out! </div> <div class="alert alert-dark" role="alert"> This is a dark alert—check it out! </div>

 

رنگ لینک ها

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

 

 

 <div class="alert alert-primary" role="alert"> This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-secondary" role="alert"> This is a secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-success" role="alert"> This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-danger" role="alert"> This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-warning" role="alert"> This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-info" role="alert"> This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-light" role="alert"> This is a light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-dark" role="alert"> This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div>

 

محتوای اضافی

هشدارها همچنین می توانند شامل عناصر HTML اضافی مانند عنوان ها، پاراگراف ها و تقسیم کننده ها باشند.

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.


Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

 

 <div class="alert alert-success" role="alert"> <h4 class="alert-heading">Well done!</h4> <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div>

 

رد کردن

با استفاده از افزونه جاوااسکریپت هشدار، هر هشدار خطی را رد میکند. در اینجا این است که چگونه:

1-مطمئن شوید که افزونه هشدار را بارگیری کرده اید یا بوستراپ جاوا اسکریپت کامپایل شده را بارگیری کرده اید.

2-اگر جاوا اسکریپت خود را از منبع ایجاد می کنید، به util.js نیاز دارد.

3-یک دکمه رد کردن و کلاس غیر مجاز را اضافه کنید، که افزونه اضافی را به سمت راست هشدار اضافه می کند و دکمه close را قرار می دهد.

4-در دکمه رد کردن، ویژگی "data-dismiss = "alert را اضافه کنید که عملکرد جاوا اسکریپت را فعال می کند. حتما از عنصر <button> با آن برای رفتار مناسب در همه دستگاه ها استفاده کنید.

5-برای تحریک کردن هشدارها هنگام رد کردن آنها، مطمئن شوید کلاسهای fade. و show. را اضافه کردید.

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

Holy guacamole! You should check in on some of those fields below.

 <div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong>Holy guacamole!</strong> You should check in on some of those fields below. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div>

 

راه اندازی

اخراج هشدار از طریق جاوا اسکریپت فعال کنید.

 

 $('.alert').alert()

 

یا با ویژگی های داده ها بر روی یک دکمه در هشدار، همانطور که در بالا نشان داده شد:

 

 <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>

توجه داشته باشید که بسته شدن هشدار آن را از DOM حذف می کند.

 

متد ها 

Method Description
$().alert() Makes an alert listen for click events on descendant elements which have the data-dismiss="alert" attribute. (Not necessary when using the data-api’s auto-initialization.)
$().alert('close') Closes an alert by removing it from the DOM. If the .fade and .show classes are present on the element, the alert will fade out before it is removed.
$().alert('dispose') Destroys an element’s alert.

 

 $(".alert").alert('close')

 

مناسبت ها

پلاگین هشدار بوت استرپ چند رویداد را برای اتصال به قابلیت هشدار ارائه می دهد.
 
Event Description
close.bs.alert This event fires immediately when the close instance method is called.
closed.bs.alert This event is fired when the alert has been closed (will wait for CSS transitions to complete).

 

 $('#myAlert').on('closed.bs.alert', function () { // do something… })