هشدار‌ها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکن‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع

هشدارهای بوت استرپ ۴

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


هشدارها به استفاده از کلاس .alert به همراه یکی از کلاس‌های متنی .alert-success ,.alert-info ,.alert-warning ,.alert-danger ,.alert-primary, .alert-secondary ,.alert-light یا .alert-dark ایجاد می‌شوند:

مثال

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


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


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

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


مثال

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


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


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

بر روی دکمه “x” در سمت راست لیک کنید تا من را ببندید.

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

مثال

1 <div class="alert alert-success alert-dismissible">
2   <button type="button" class="close" data-dismiss="alert">&times;</button>
3   <strong>Success!</strong> Indicates a successful or positive action.
4 </div>


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


نکته: &times; (×) یک موجودیت HTML است که بجای حرف “x” بعنوان آیکون برای کلیدهای بستن در نظر گرفته می‌شود.

برای مشاهدهٔ لیست همهٔ موجودیت‌ها به مرجع موجودیت‌های HTML ما را مراجعه کنید.

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

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

مثال

<div class="alert alert-danger alert-dismissible fade show">


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


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

برای دسترسی به مرجع کامل همه امکانات هشدار، متدها و رویدادها (به انگلیسی: Events)، به مرجع هشدار JS بوت استرپ ۴ ما مراجعه کنید.


منابع آموزشی