چکیده این مطلب :

احتمالا شما تابحال با انواع سایت ها در زمینه های مختلف سر و کار داشته اید. زمانی که شما در هر وب سایت عملیاتی را از جمله عضویت، ورود و یا ارسال پیام انجام می دهید، با یک پیغام مواجه می شوید. این پیغام ممکن است یک پیام تشکر، پیام اخطار و یا حتی پیام اطلاع رسانی به شما باشد. اما شما چگونه در وب سایت خود با کاربران ارتباط برقرار می کنید ؟ بوت استرپ این امکان را فراهم نموده تا با استفاده از کلاس های از پیش تعریف شده، انواع هشدار ها را ایجاد کرده و به کاربر نمایش دهید.

آموزش کار با هشدار های بوت استرپ 4

هشدار ها نیز مانند دکمه ها در بوت استرپ 4 از جمله اجزاء غیر قابل انکار هستند. به هر حال شما باید برای تعامل با بازدید کنندگان وب سایت خود، در هنگام عملیات های مختلف، پیام ها و هشدارهایی را به آن ها نمایش دهید.

آموزش رایگان کار با دکمه بوت استرپ4

پکیج فایل های بوت استرپ 4 راست چین شده Bootstrap4-rtl

بعنوان مثال فرض کنید یک کاربر در وب سایت شما عضویت خود را تکمیل کرده است. لازم است که کاربر با یک پیام تشکر از طرف وب سایت، متوجه عضویت موفقیت آمیز خود شود. در عین حال ممکن است کاربر اطلاعات خود را بصورت اشتباه وارد کرده باشد. در این صورت باید با استفاده از هشدارها، خطای کاربر را به او نمایش دهیم.

این تنها یک مثال از کاربرد پیام ها و هشدار ها در وب سایت می باشد. شاید در یک سایت ده ها پیام یا هشدار در عملیات های مختلف به کاربر نمایش داده شود.

شروع کار با هشدار ها در بوت استرپ 4

کار با هشدار ها نیز به سادگی کار با دکمه ها در بوت استرپ است. یعنی کافیست تنها کلاس های مربوط به هشدار ها را یاد بگیرید و آن ها را با خود مرور کنید. با دانستن کلاس ها شما می توانید آن ها را در خاصیت class تگ های مناسب بکار بگیرید و به سادگی هشدار ها را در حالت های مختلف ایجاد کنید. بد نیست بدانید برای ایجاد هشدار ها لازم است شما کلاس alert را به تگ مورد نظر اعمال کنید و سپس کلاس مربوط به نوع هشدار را تایپ نمایید.

در زیر به معرفی کلاس های تعریف شده در بوت استرپ 4 میپردازیم :


  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary"
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info">
  A simple info alert—check it out!
</div>
<div class="alert alert-light">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark">
  A simple dark alert—check it out!
</div>
ایجاد لینک در هشدار ها

در هر یک هشدار های ذکر شده می توان به راحتی لینک ها را ایجاد کرد. برای ایجاد لینک ها در هشدار کافیست پس از ایجاد لینک با استفاده از تگ a، کلاس alert-link را به آن اختصاص دهید.

 <div class="alert alert-primary">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

ایجاد هشدارهای سفارشی

هشدارهای سفارشی معمولا بیشتر از یک خط هستند و شامل تیتر، لینک ها و خط های جدا کننده می باشند. برای ایجاد هشدارهای سفارشی لازم نیست کار خاصی انجام دهید. کافیست از تگ هایی که تابحال یاد گرفته  استفاده کنید.

 <div class="alert alert-success">
  <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>

فایل های مربوط به تمرین این آموزش را می توانید از طریق لینک زیر دریافت کنید.

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

نظر خود را ارسال کنید

پیشنهاد می دهیم این آموزش ها را نیز ببینید
بستن logo

ورود به ناحیه کاربری

هنوز در سایت عضو نشده ام!