آموزش هشدارها یا alerts در Bootstrap 3

علیرضا حاتمی نیا 1056

bootstrap 3 alerts

سلام. با قسمت جدید آموزش بوت استرپ 3 در خدمت شما هستم. در جلسه قبل با آموزش Well در بوت استرپ 3 آشنا شدید. در این جلسه به آموزش هشدارها در بوت استرپ 3 می پردازیم. پس با ما همراه باشید.

پیام های هشدار یا alerts در بوت استرپ 3

در روند طراحی وب گاهی لازم است تا پیام هایی از طرف سیستم به کاربران نمایش داده شود. مثلا هنگام ارسال اطلاعات یک فرم اگر اشکالی در ارسال آن به وجود آمد یک پیام خطا با رنگ قرمز به نشانه هشدار به کاربر نمایش داده می شود تا کاربر متوجه بروز خطا شود. و یا اگر ثبت نام کابر در وبسایت انجام شود یک پیام با رنگ سبز به نشانه موفقیت آمیز بودن روند ثبت نام به کاربر نمایش داده می شود. 
Bootstrap این گونه پیام های هشدار را به خوبی طراحی و در اختیار شما قرار داده است و می توانید به راحتی از آنها استفاده و یا آنها را مدیریت کنید.
یک پیام هشدار یا Alert در بوت استرپ با کلاس alert ساخته می شود

ساختار ظاهری این کلاس با یکی از 4 کلاس زیر استایل دهی می شود:

  • .alert-success : این کلاس یک پیام هشدار موفقیت آمیز یا مثبت تولید می کند. (رنگ سبز)
  • .alert-info : این کلاس یک پیام هشدار حاوی اطلاعات خاص را تولید می کند. (رنگ آبی)
  • . alert-warning : این کلاس یک پیام هشدار اخطار را تولید می کند. (رنگ زرد)
  • . alert-danger : این کلاس یک پیام هشدار خطر برای رویداد های حساس را تولید می کند. (رنگ قرمز)

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

<div class="alert alert-success">
  <strong>موفقیت آمیز بود!</strong> این کلاس یک پیام هشدار موفقیت آمیز یا مثبت تولید می کند.
</div>

<div class="alert alert-info">
  <strong>اطلاعات!</strong> این کلاس یک پیام هشدار حاوی اطلاعات خاص را تولید می کند. 
</div>

<div class="alert alert-warning">
  <strong>اخطار!</strong> این کلاس یک پیام هشدار اخطار را تولید می کند. 
</div>

<div class="alert alert-danger">
  <strong>خطر!</strong> این کلاس یک پیام هشدار خطر برای رویداد های حساس را تولید می کند. 
</div>
خروجی کدهای بالا به شکلزیر می شود:
 
درج لینک در پیام های هشدار
جهت درج هر گونه لینک در کادر هشدار می توانید از کلاس alert-link استفاده کنید. این کلاس رنگ هر لینک را مطابق با کلاس مورد نظر تطبیق می دهد.
<div class="alert alert-success">
  <strong>موفقیت آمیز بود!</strong> پیام هشدار نمایش داده میشود. <a href="#" class="alert-link">این یک لینک است</a>
</div>

<div class="alert alert-info">
  <strong>اطلاعات!</strong> پیام هشدار نمایش داده میشود. <a href="#" class="alert-link">این یک لینک است</a>
</div>

<div class="alert alert-warning">
  <strong>اخطار!</strong>پیام هشدار نمایش داده میشود. <a href="#" class="alert-link">این یک لینک است</a>
</div>

<div class="alert alert-danger">
  <strong>خطر!</strong> پیام هشدار نمایش داده میشود. <a href="#" class="alert-link">این یک لینک است</a>
</div>

alerts in bootstrap 3

درج لینک در پیام های هشدار

جهت درج هر گونه لینک در کادر هشدار می توانید از کلاس alert-link استفاده کنید. این کلاس رنگ هر لینک را مطابق با کلاس مورد نظر تطبیق می دهد.

<div class="alert alert-success">
  <strong>موفقیت آمیز بود!</strong> پیام هشدار نمایش داده میشود. <a href="#" class="alert-link">این یک لینک است</a>
</div>

<div class="alert alert-info">
  <strong>اطلاعات!</strong> پیام هشدار نمایش داده میشود. <a href="#" class="alert-link">این یک لینک است</a>
</div>

<div class="alert alert-warning">
  <strong>اخطار!</strong>پیام هشدار نمایش داده میشود. <a href="#" class="alert-link">این یک لینک است</a>
</div>

<div class="alert alert-danger">
  <strong>خطر!</strong> پیام هشدار نمایش داده میشود. <a href="#" class="alert-link">این یک لینک است</a>
</div>

بستن کادر هشدار در Bootstrap 3

برای نمایش یک آیکن ضربدر (x) در گوشه کادر هشدار جهت بستن کادر هشدار توسط کاربر بایستی ابتدا کلاس alert-dismissable را در ادامه کلاس alert اضافه کنید و سپس کلاس close و data-dismiss="alert" را به لینک آیکن ضربدر اضافه کنید. برای نمایش ضربدر (x) کافیست متن لینک را &times; قرار دهید. توجه داشته باشید برای دسترسی راحت تر کاربرانی که از screen reader ها استفاده می کنند از data-dismiss="alert" استفاده می کنیم.

<div class="alert alert-danger">
 <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>خطر!</strong> پیام هشدار نمایش داده میشود. <a href="#" class="alert-link">این یک لینک است</a>
</div>

alerts in with close button-bootstrap 3

 بستن کادر هشدار به صورت محو شونده یا fade

جهت بستن کادر هشدار به صورت محو شونده کافیست در ادامه کلاس alert و کلاس استایل دهنده آن از کلاس های fade  و in استفاده کنید.

<div class="alert alert-success fade in">

 

لینک های مرتبط

طراحی سایت اصفهان
علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت