دليل الأساسيات لـ Bootstrap

مكتبات Bootstrap

ملحق أزرار Bootstrap ملحق النافذة المنبثقة لـ Bootstrap

مكتبة تحذير النافذة (Alert) لـ Bootstrap

تحذير النافذة (Alert) رسائل غالباً تستخدم لعرض معلومات مثل تحذيرات أو رسائل تأكيد على المستخدمين النهائيين. باستخدام مكتبة تحذير النافذة (Alert)، يمكنك إضافة ميزة إلغاء الإلغاء (dismiss) إلى جميع رسائل تحذير النافذة.

الاستخدام

يمكنك تمكين ميزة إلغاء الحذف (dismissal) للنافذات التنبيهية عبر إحدى الطرق التالية:

من خلال خاصية dataإضافة ميزة إلغاء الحذف عبر API البيانات (Data API)، فقط أضف إلى زر الإغلاق data-dismiss="alert"، سيتم إضافة ميزة إلغاء الحذف تلقائيًا إلى النافذة التنبيهية.
```
<a data-dismiss="alert" href="#" aria-hidden="true">
　　　　×
</a>
```
من خلال JavaScriptإضافة ميزة إلغاء الحذف عبر JavaScript:
```
$(".alert").alert()
```

مثال على الخط

السطر التالي يوضح استخدام قالب (Alert) تنبيهات عبر خاصية data.

مثال على الخط

مثال

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>مثال Bootstrap - قالب (Alert) تنبيهات</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="alert alert-warning">
	<a href="#" class="close" data-dismiss="alert">
		×
	</a>
	<strong>تحذير!</strong> اتصال الشبكة الخاص بك معيب.
</div>
</body>
</html>

اختبار لرؤية ‹/›

النتيجة كما ترونها:

خيارات

لا توجد خيارات.

الطريقة

إليك بعض الطرق المفيدة لـ قالب (Alert) تنبيهات

الطريقة	وصف	مثال
.alert()	هذه الطريقة تجعل جميع النافذات التنبيهية تحتوي على ميزة الإغلاق.	($('#identifier').alert());
طريقة الإغلاق .alert('close')	إغلاق جميع النافذات التنبيهية.	($('#identifier').alert('close'));

لتمكين تأثير الرسوم المتحركة عند إغلاق النافذة، تأكد من إضافة .fade و .in الصفة.

مثال على الخط

السطر التالي يوضح .alert() استخدام الطريقة:

مثال على الخط

مثال

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
	<title>مثال Bootstrap - قالب (Alert) تنبيهات طريقة alert()</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>قالب (Alert) تنبيهات طريقة alert()</h2>
<div　id="myAlert"　class="alert　alert-success">
　　　　<a　href="#"　class="close"　data-dismiss="alert">×</a>
　　　　<strong>نجاح!</strong> النتيجة ناجحة.
</div>
<div id="myAlert2" class="alert alert-warning">
　　　　<a　href="#"　class="close"　data-dismiss="alert">×</a>
　　　　<strong>تحذير!</strong> اتصال الشبكة الخاص بك معيب.
</div>
　
<script>
$(function() {
　　　　$(".close").click(function(){
　　　　　　　　$("#myAlert").alert();
　　　　　　　　$("#myAlert2").alert();
　　　　});
});
</script>
</body>
</html>

اختبار لرؤية ‹/›

السطر التالي يوضح .alert('close') استخدام الطريقة:

مثال على الخط

مثال

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
	<title>مثال Bootstrap - قالب (Alert) تنبيهات طريقة alert('close')</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>قالب (Alert) تنبيهات alert('close') طريقة</h2>
<div　id="myAlert"　class="alert　alert-success">
　　　　<a　href="#"　class="close"　data-dismiss="alert">×</a>
　　　　<strong>نجاح!</strong> النتيجة ناجحة.
</div>
<div id="myAlert2" class="alert alert-warning">
　　　　<a　href="#"　class="close"　data-dismiss="alert">×</a>
　　　　<strong>تحذير!</strong> اتصال الشبكة الخاص بك معيب.
</div>
　
<script>
$(function() {
　　　　$(".close").click(function(){
　　　　　　　　$("#myAlert").alert('close');
　　　　　　　　$("#myAlert2").alert('close');
　　　　});
});
</script>
</body>
</html>

اختبار لرؤية ‹/›

يمكنك رؤية أن جميع نافذات التنبيه (Alert) تطبق ميزة الإغلاق، أي إغلاق أي نافذة تنبيه، فإن النافذات المتبقية أيضًا سيتم إغلاقها.

حدث

في الجدول أدناه، تم عرض أحداث أداة التنبيه (Alert) التي سيتم استخدامها. يمكن استخدام هذه الأحداث كمحاور في الدوال.

حدث	وصف	مثال
close.bs.alert	عند close تُنطلق هذه الحدث عند إطلاق الحدث فورًا.	$('#myalert').bind('close.bs.alert',　function　()　{ 　　//　ت�行 بعض الأفعال... }
closed.bs.alert	تُنطلق هذه الحدث عند إغلاق نافذة التنبيه (Alert) (سيتم انتظار اكتمال تأثير التدرج CSS).	$('#myalert').bind('closed.bs.alert',　function　()　{ 　　　　//　ت�行 بعض الأفعال... }

مثال على الخط

في هذا المثال، يتم عرض أحداث أداة التنبيه (Alert) البرمجية:

مثال على الخط

مثال

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>مثال Bootstrap - أداة تنبيه (Alert) أحداث البرمجة</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　id="myAlert"　class="alert　alert-success">
	<a　href="#"　class="close"　data-dismiss="alert">×</a>
	<strong>نجاح!</strong> النتيجة ناجحة.
</div>
<script type="text/javascript">
$(function() {
	$("#myAlert").bind('closed.bs.alert', function () {
		alert("تم إغلاق نافذة التحذير.");
	});
});
</script>　　
</body>
</html>

اختبار لرؤية ‹/›

النتيجة كما ترونها:

ملحق أزرار Bootstrap ملحق النافذة المنبثقة لـ Bootstrap