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

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

 

سلام. با قسمت جدید آموزش بوت استرپ 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>

هشدارها در bootstrap

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

جهت درج هر گونه لینک در کادر هشدار می توانید از کلاس 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>

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

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

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

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