سبد (0)

تبلیغات

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

هشدارها(Alerts)

Wiki

با استفاده از بوت استرپ، به راحتی می تونیم هشدارهایی مثل زیر ایجاد کنیم:

alert

هشدارها به وسیله ی کلاس alert. که به دنبال آن یکی از کلاس های زیر آمده است، ایجاد می شوند:

  1. alert-success.
  2. alert-info.
  3. alert-warning.
  4. alert-danger.

مثال (هشدارها در بوت استرپ)

<div class="alert alert-success">
  <strong>Success!</strong> یک عمل موفقیت آمیز یا مثبت را مشخص می کند
</div>

<div class="alert alert-info">
  <strong>Info!</strong> یک عمل یا اطلاعات آموزنده را مشخص می کند
</div>

<div class="alert alert-warning">
  <strong>Warning!</strong> یک اخطار قابل توجه را مشخص می کند
</div>

<div class="alert alert-danger">
  <strong>Danger!</strong> یک عمل خطرناک یا منفی را مشخص می کند
</div>

امتحان کنید»

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

Wiki

برای بستن پیام های هشدار می توانید عبارت "class="close و عبارت "data-dismiss="alert را به یک لینک یا دکمه اضافه کنید:

مثال (هشدارها در بوت استرپ)

<div class="alert alert-success">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong> یک عمل موفقیت آمیز یا مثبت را مشخص می کند
</div>

امتحان کنید»
Note

توضیح خصوصیت *-aria :

هنگام ایجاد یک دکمه ی close، برای بهتر کردن دسترسی کسانی که از صفحه خوان ها استفاده می کنند، باید خصوصیت "aria-label="close  را اضافه کنید.


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

Wiki

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

مثال (هشدارها در بوت استرپ)

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

امتحان کنید »

با تمرین خودتان را محک بزنید!

تمرین 1 »  تمرین 2 »  تمرین 3 »


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

Wiki

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

دیدگاه‌ها  

0 # joojoo 1396-07-15 16:37
سلام
برای بستن جعبه هشدارها از تگ a با ویژگی زیر استفاده شده است:
aria-label="close"
لطفا در مورد ویژگی مذکور توضیح دهید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1396-07-15 16:53
سلام، ویژگی مذکور تنها برای افراد نابینا که از صفحه خوان استفاده می کنند کاربرد دارد. در واقع زمانی که فوکوس روی پنجره هشدار قرار می گیرد. با پخش صدای Close، نابینا متوجه می شود که می تواند پنجره را با فشردن دکمه ببندد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # salar5075 1395-12-26 12:04
سلام خسته نباشید
می خواستم بدونم برای باکس تبلیغات میشه از alert ها استفاده کرد و بهشون افکت داد؟امتحان کردم مشکلی نبود فقط گفتم شاید واسه تبلیغات تگ های دیگه ای وجود داشته باشه.
و سوال دیگه این که برای افکت بسته شدن از کجا میتونم اطلاعات بیشتری پیدا کنم؟
ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1395-12-27 10:17
سلام . ممنون از شما.
در این مورد خاص اطلاعات زیادی ندارم و باید از متخصصان سئو این سوال رو پرسید. همچنین برای افکت بسته شدن، می تونید از جی کوئری استفاده کنید. لینک زیر میتونه به شما کمک کنه:
api.jquery.com/hide/
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # salar5075 1395-12-27 18:43
ممنون که همیشه کمک کردید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # big amir 1395-12-24 17:56
سلام
آقا من با بستن هشدارها مشکل دارم.
وقتی در بخش خودتان امتحان کنید روی ضربدر میزنم بسته میشه اما زمانی که خودم مینویسم بسته نمیشه.
حتی کدها رو کپی پیست کردم بازم نشد.مطمئنم کد رو درست مینویسم.با همه مرورگرها هم امتحان کردم.
مشکل کجاست؟
مرسی
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1395-12-25 08:43
سلام، عملیات بسته شدن جبعه هشدارها توسط jQuery و فایلی که بصورت زیر به صفحه لینک کردیم، بسته می شود:
<script src="https://aj ax.googleapis.c om/ajax/libs/jq uery/3.1.1/jque ry.min.js"> </script>
همان طور که متوجه شدید از روش CDN برای لینک کردن jQuery استفاده شده است. بنابراین می توان نتیجه گرفت که بدلایلی عملیات لینک کردن jQuery بدرستی انجام نشده است.
برای اطمینان فایل jQuery را در کنار فایل مثال بالا قرار دهید و سپس آنرا بصورتی دستی لینک کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # Mohammad Farokhian 1395-09-14 15:54
سلام خسته نباشید
ببخشید من متوجه اون قسمتی که گفتید"کسانی که از صفحه خوان ها استفاده میکنند"نشدم.میش ه توضیح بدید؟ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1395-09-14 17:25
سلام ممنون.
صفحه خوان یا screen reader دستگاهی است که برای افراد نابینا، یا کم بینا، صفحات را می خواند.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # homid 1395-07-06 00:14
آموزش هشدارهای بوتسترپ عالی بود. ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # minampr 1394-08-19 19:58
سلام وقت بخیر
مرسی بابت آموزش های خیلی خوبتون
در قسمت بستن هشدار data-dismiss چی هست و چکاری انجام میده من خیلی سرچ کردم نتونستم تعریف واضحی ازش پیدا کنم ، دقیقا کارش چی هست ؟ کلا میخوام درباره اش بدونم و بعد اینکه اینجا دقیقا چ کاری انجام میده ؟
با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1394-08-19 20:30
با سلام و وقت بخیر.
دقت کنید یه سری از خصوصیات تعریف شده در bootstrap هست. بوت استرپ با استفاده از این خصوصیات اکشن و رویداد موردنظر رو می‌تونه انجام بده.

این خصوصیات و یه سری خصوصیات دیگه در بوت‌استرپ، در html نیست!!!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # محمدحسین واحدی 1394-07-07 13:01
با سلام
من می خواهم div هشدار 5 ثانیه نمایش داده شود و بعد محو شود ؟
لطفا راهنمایی کنید
با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1394-07-07 13:33
سلام
برای اینکه یک عنصر div را 5 ثانیه نمایش دهید و سپس محو کنید به صورت زیر عمل کنید:
codepen.io/sbaloot/pen/KdaPRy
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی Bootstrap

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

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