دليل أساسي لـ Bootstrap4

مراقبة التمرير Bootstrap4 نافذة الإعلام Bootstrap4

نافذة الإعلان Bootstrap4

يبدو عنصر النافذة المنبثقة مثل نافذة الإشعار، حيث يتم عرضه عند النقر على العنصر، ولكن يختلف عن نافذة الإشعار لأنه يمكنه عرض مزيد من المحتوى.

كيفية إنشاء النافذة المنبثقة

من خلال إضافة data-toggle="popover" إلى العنصر لنبدأ في إنشاء النافذة المنبثقة.

محتوى خاصية title هو عنوان النافذة المنبثقة، بينما يظهر محتوى خاصية data-content نص النافذة المنبثقة:

<a　href="#"　data-toggle="popover"　title="عنوان النافذة المنبثقة"　data-content="محتوى النافذة المنبثقة">انقر هنا مراراً</a>

ملاحظة: يجب كتابة النافذة المنبثقة في كود التمهيد لـ jQuery: ثم يتم استدعاء طريقة popover() على العنصر المحدد.

يمكن استخدام هذا المثال للنافذة المنبثقة في أي مكان في الوثيقة:

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap مثال</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>مثال على النافذة المنبثقة</h2>
　　<a　href="#"　data-toggle="popover"　title="عنوان النافذة المنبثقة"　data-content="محتوى النافذة المنبثقة">انقر هنا مراراً</a>
</div>
<script>
$('document').ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

اختبار النظر <‹/›

تحديد موقع النافذة المنبثقة

بالتقديم، يتم عرض النافذة المنبثقة على الجانب الأيمن للعنصر.

يمكن استخدام خاصية data-placement لتحديد اتجاه عرض النافذة المنبثقة: top, bottom, left أو right:

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap مثال</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>مثال على نافذة منبثقة</h2>　<br><br><br><br><br><br>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-placement="top"　data-content="Content">انقر هنا</a>
　　<a href="#" title="الرأس" data-toggle="popover" data-placement="bottom" data-content="المحتوى">انقر هنا</a>
　　<a href="#" title="الرأس" data-toggle="popover" data-placement="left" data-content="المحتوى">انقر هنا</a>
　　<a href="#" title="الرأس" data-toggle="popover" data-placement="right" data-content="المحتوى">انقر هنا</a>
</div>
<script>
$('document').ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

اختبار النظر <‹/›

يستخدم في الزر:

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap مثال</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>مثال على نافذة منبثقة</h2>　<br><br><br><br><br><br>
	<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="نحن">
	　　Popover على الاعلى
	</button>
	<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="نحن">
	　　Popover على اليمين
	</button>
	<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="نحن">
	sagittis lacus vel augue laoreet rutrum faucibus.</button>
	　　Popover على الأسفل
	</button>
	<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
	　　Popover على اليسار
	</button>
</div>
<script>
$('document').ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

اختبار النظر <‹/›

إغلاق نافذة الإشعار

بالتقديم، يغلق النافذة الإشعار عند النقر مرة أخرى على العنصر المحدد، يمكنك ضبط خاصية data-trigger إلى "focus" لضبط إغلاق النافذة عند النقر في منطقة خارج العنصر:

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap مثال</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>مثال على نافذة الإعلان</h2> <br>
　　<a href="#" title="إلغاء نافذة الإشعار" data-toggle="popover" data-trigger="focus" data-content="انقر على أي جزء آخر من الوثيقة لإغلاقني">انقر هنا</a>
</div>
<script>
$('document').ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

اختبار النظر <‹/›

إشارة:إذا كنت تريد تحقيق تأثير عرض النص عند تحريك الفأرة فوق العنصر وإزالته عند انسحاب الفأرة، يمكنك استخدام خاصية data-trigger وضبط قيمتها إلى "hover":

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap مثال</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>مثال على نافذة الإعلان</h2> <br>
　　<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="بعض المحتويات">تحرك الفأرة فوقي</a>
</div>
<script>
$('document').ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

اختبار النظر <‹/›

مراقبة التمرير Bootstrap4 نافذة الإعلام Bootstrap4