هشدار‌ها

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	شروع
۳	ظرف‌ها
۴	شبکه‌بندی پایه
۵	تایپوگرافی
۶	رنگ‌ها
۷	جدول‌ها
۸	تصاویر
۹	جامبوترون
۱۰	هشدارها
۱۱	کلیدها
۱۲	گروه‌های کلید
۱۳	نشان‌ها (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 ایجاد می‌شوند:

مثال

<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive 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)

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

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

مثال

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

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

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

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

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

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

مثال

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

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

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

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

صفحهٔ بعد »

« صفحهٔ قبل