ساخت هشداردهنده alert در بوت استرپ bootstrap
بررسی و آشنایی با نحوه ساخت ،ایجاد و کار با alerts در بوت استرپ bootstrap ، چگونه خط هشدار را با بوت استرپ ایجاد کنیم.
مقالات
هشدارها
بوت استرپ bootstrap یک راه آسان برای ایجاد پیام های هشداردهنده alerts از پیش تعریف شده می باشد:
هشدارها alertsبا کلاس .alert ایجاد می شوند و به دنبال آن یکی از چهار کلاس متنی هستند .alert-success، .alert-info، .alert-warning یا .alert-danger:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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 براحتی می توانید لینک های هشدار دهنده به رنگ های مختلف ایجاد کنید.
برای این کار کافی است کلاس alert-link را درون جعبه ای که می خواهید هشدار دهنده باشد قرار دهید.
|
1 2 3 |
<div class="alert alert-success"> <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>. </div> |
بسته شدن هشداردهنده
برای بستن پیام هشدار، یک کلاس .alert-dismissable را به ظرف هشدار اضافه کنید. سپس کلاس = “close” و “data-dismiss = “alert را به یک پیوند یا یک عنصر دکمه اضافه کنید (وقتی روی این کلیک میکنید کادر هشدار ناپدید می شود).
|
1 2 3 4 |
<div class="alert alert-success alert-dismissable"> <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> <strong>Success!</strong> Indicates a successful or positive action. </div> |
ویژگی aria * و & times؛ توضیح
برای کمک به ارتقاء قابلیت دسترسی برای افرادی که از screen reader ماننده تبلت و موبایل استفاده می کنند، باید هنگام ایجاد یک دکمه بستن، آرگومان “aria-label = “close را اضافه کنید.
&time؛ (×) عنصر HTML است که نماد مورد نظر برای دکمه های نزدیک است، به جای حرف “x”.
هشدارهای متحرک
Animated Alerts در بوت استرپ bootstrap
کلاس های fade و .in در هنگام بستن پیام هشدار یک اثر محو کننده می افزاید:
|
1 |
<div class="alert alert-danger fade in"> |
مطالب زیر را حتما مطالعه کنید
افزونه و کلاس Carousel در بوت استرپ bootstrap
کلاس collapse در بوت استرپ bootstrap
کلاس jumbotron در بوت استرپ
فیلترهای بوت استرپ
افزونه Affix بوت استرپ
دیدگاهتان را بنویسید