هشدارها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو


بوت استرپ برای ایجاد پیام‌های هشدار از پیش تعیین شده راه آسانی را فراهم کرده‌است:[۱]


هشدارها با استفاده از کلاس .alert ایجاد می‌شوند که به همراه آن یکی از چهار کلاس متنی .alert-success،.alert-info،.alert-warning یا .alert-danger می‌آیند:

مثال

<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

<div class="alert alert-info">
  <strong>Info!</strong> Indicates a neutral informative change or action.
</div>

<div class="alert alert-warning">
  <strong>Warning!</strong> Indicates a warning that might need attention.
</div>

<div class="alert alert-danger">
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>


مشاهدهٔ نتیجه

لینک های هشدار

برای ایجاد «لینک‌های همرنگ» کلاس alert-link را به هر یک از لینک‌های درون کادر هشدار اضافه کنید:

مثال

<div class="alert alert-success">
  <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>


مشاهدهٔ نتیجه


هشدارهای بسته شونده (Closing)

برای بستن پیام هشدار، یک کلاس .alert-dismissible به ظرف هشدار اضافه کنید. سپس class="close" و data-dismiss="alert" را به یک لینک یا عنصر دکمه اضافه کنید (زمانی‌که روی این کلیک کنید کادر هشدار ناپدید می‌شود).

مثال

<div class="alert alert-success alert-dismissible">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>


مشاهدهٔ نتیجه


توضیح ویژگی aria-* و &times;

بمنظور کمک به بهبود دسترسی برای افرادی که از صفحه خوان‌ها (screen readers) استفاده می‌کنند، باید هنگلم ایجاد یک دکمه بستن، ویژگی aria-label="close" را اضافه کنید.

&times;(x) یک موجودیت HTML است که به جای حرف "x" بعنوان آیکون برای کلیدهای بستن ترجیح داده می‌شود.
برای لیستی از همهٔ موجودیت‌های HTML, مرجع موجودیت‌های HTML ما را مشاهده کنید.

هشدارهای متحرک

کلاس‌های .fade و .in نوعی حالت محو شوندگی در هنگام بسته شدن پیام هشدار به آن اضافه می‌کنند:

مثال

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


مشاهدهٔ نتیجه


تمرینات بوت استرپ

مرجع کامل هشدار بوت استرپ

برای دسترسی به مرجع کامل همه امکانات هشدار، متدها و رویدادها، به مرجع هشدار جاوا اسکریپت بوت استرپ ما مراجعه کنید.

منابع آموزشی