031- 344 500 60

طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی , شرکت طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی

صفحه نخست » بلاگ » bootstrap » هشدارها در بوت استرپ – آموزش bootstrap

هشدارها در بوت استرپ – آموزش bootstrap

۲۹ام شهریور ۱۳۹۶
مرضیه خیرخواه
82

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

در این مقاله آموزش بوت استرپ را با مبحث هشدارها در بوت استرپ ادامه می دهیم. در این آموزش شما با انواع هشدارها در بوت استرپ، بستن هشدارها در بوت استرپ و کلاس alert-link آشنا خواهید شد.
هشدارها در بوت استرپ برای نمایش اعلان به کاربر استفاده می شوند. در واقع هر کدام از هشدارها یک باکس رنگی متفاوت را ایجاد می کنند که با مضمون پیام همخوانی دارد. در ادامه با انواع هشدارها در بوت استرپ آشنا خواهید شد.

 

انواع هشدارها در بوت استرپ

برای ایجاد هشدارها در بوت استرپ از کلاس alert در تگ div استفاده می شود. این هشدارها می توانند مشخص کننده ی یک عملیات موفقیت آمیز، یک عمل خنثی، اطلاعات هشداردهنده و یا عملیات خطرناک باشند که با نوشتن کلاس های زیر در ادامه ی کلاس alert می توانید نوع هشدار را برای کاربر مشخص کنید.

alert-success: این هشدار نشان دهنده ی یک عمل مثبت یا موفقیت آمیز است.
alert-info: این هشدار یک سری اطلاعات مفید را در اختیار کاربران قرار می دهد.
alert-warning: این جعبه ی هشدار، یک هشدار به کاربر می دهد.
alert-danger: این هشدار مشخص کننده ی یک اطلاعات منفی یا خطرناک است.

در کد زیر می توانید نحوه ی استفاده از این کلاس ها را مشاهده کنید.

<div class="container">
<div class="alert alert-success">
 This alert box could indicate a successful or positive action. 
</div>
<div class="alert alert-info">
 This alert box could indicate a neutral informative change or action
</div>
<div class="alert alert-warning">
 This alert box could indicate a warning that might need attention. 
</div>
<div class="alert alert-danger">
 This alert box could indicate a dangerous or potentially negative action. 
</div>
</div>

خروجی این کد در تصویر زیر نمایش داده شده است.

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

بستن هشدارها در بوت استرپ

برای بستن هشدارها در بوت استرپ کافی است یک لینک یا دکمه به هشدار اضافه کنید. سپس کلاس close و عبارت  “data-dismiss=”alert را به دکمه یا لینکی که ایجاد کرده اید، اضافه نمایید.
کد زیر برای بستن هشدارها در بوت استرپ نوشته شده است.

<div class="container">
<div class="alert alert-success">
   <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
   success alert
</div>
<div class="alert alert-danger alert-dismissable fade in">
   <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
   danger alert
</div>
</div>

در کد بالا خصوصیت “aria-label = “close بهتر است، به دکمه ی بستن اضافه شود. زیرا موجب دسترسی کسانی می شود که از صفحه خوان ها استفاده می کنند. دستور times& که در کد بالا استفاده شده، برای ایجاد علامت بستن (X) است.
لازم به ذکر است که می توان هنگام بستن هشدار به آن انیمیشن افزود. استفاده از کلاس fade in  افکت محو شدن را هنگام بستن هشدار به آن اضافه می کند.

خروجی کد بالا به صورت زیر است. همانطور که مشاهده می کنید علامت بستن به هشدار اضافه شده است.

بستن هشدارها در بوت استرپ

کلاس alert-link

اگر قصد دارید در پیغام هشدار، لینک قرار دهید از کلاس alert-link استفاده کنید. استفاده از این کلاس در لینک باعث می شود تا لینکی که در باکس هشدار قرار می دهید با باکس هشدار تطابق رنگی داشته باشد.
با دقت به کد زیر می توانید با نحوه ی استفاده از این کلاس آشنا شوید.

<div class="container">
<div class="alert alert-success">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  this is a success alert.<a href="#" class="alert-link">read this massage</a>
</div>
<div class="alert alert-info">
   <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
   this is a info alert.<a href="#" class="alert-link">read this massage</a>
</div>
</div>

خروجی کد بالا در تصویر زیر نشان داده شده است.

کلاس alert-link

 

خب دوستان، آموزش هشدارها در بوت استرپ به پایان رسید. اکنون شما با انواع هشدارها در بوت استرپ، بستن هشدارها در بوت استرپ و کلاس alert-link آشنا شدید. اگر به یادگیری بوت استرپ علاقمند هستید می توانید آموزش های استایل دهی به متن در بوت استرپ ، جدول در بوت استرپ  و تصاویر در بوت استرپ را هم مطالعه بفرمایید.

هشدارها در بوت استرپ – آموزش bootstrap
تعداد ستاره های خود را از این مطلب از چپ به راست انتخاب نمایید
درباره نویسنده :
مرضیه خیرخواه

مطالب مرتبط

modal ها در بوت استرپ

modal ها در بوت استرپ

مدال در بوت استرپ مدال یک پنجره  محاوره ای است که به صورت پاپ آپ است و در بالای صفحه فعلی نمایش داده می شود.  برای ساخت modal نیاز به کدهای html  ، css وjava script  دارید. ساخت مدال از صفر، کار بسیار سخت و پیچیده ای است ولی بوت استرپ (bootstrap) این کار را […]

آموزش تابع callback در جی کوئری

تابع callback در jquery

تابع callback همان طور که می دانید jquery یک کتابخانه جاوا اسکریپت است. کدهای جاوا اسکریپت خط به خط اجرا می شوند، اما از آن جایی که کدهای جی کوئری طول می کشد تا اعمال شوند ممکن است خط بعدی اجرا شود در حالی که کد قبلی هنوز در حال اجراست. برای جلوگیری از این […]

دکمه های گروهی در bootstrap

دکمه ها در بوت استرپ – قسمت دوم

دکمه های گروهی در بوت استرپ – آموزش بوت استرپ تیم طراحی سایت وب یار در این مقاله به آموزش دکمه ها در بوت استرپ می پردازد. در این آموزش شما با دکمه های گروهی در بوت استرپ، تنظیم سایز دکمه های گروهی، ایجاد دکمه های گروهی عمودی، Justified Button Groups ، ایجاد منوی کشویی […]

آموزش دکمه ها در بوت استرپ

دکمه ها در بوت استرپ – قسمت اول

دکمه ها در بوت استرپ – آموزش بوت استرپ در این مقاله تیم طراحی سایت وب یار آموزش دکمه ها در بوت استرپ را برای شما عزیزان در نظر گرفته است. در این آموزش شما با دکمه ها در بوت استرپ، روش های مختلف ایجاد دکمه، سایز دکمه ها در بوت استرپ، ایجاد دکمه با […]

ارسال دیدگاه

*    

*    

ارتباط با تیم پشتیبانی وب یار

تمام پشتیبان ها در حال پاسخ به مشتریان هستند. لطفا درخواست خود را کاملا واضح به همراه اطلاعات تماس ارسال نمایید تا در کوتاه ترین زمان ممکن با شما تماس بگیریم.

چه کمکی از تیم وب یار بر می آید ، با ما کاملا واضح در میان بگذارید

برای گفتگو کلید ENTER را بفشارید