Bootstrap4 基础教程

نافذة الإعلام في Bootstrap4 نافذة الحوار في Bootstrap4

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

提示框是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。

如何创建提示框

通过向元素添加 data-toggle="tooltip" 来来创建提示框。

title 属性的内容为提示框显示的内容：

<a href="#" data-toggle="tooltip" title="أنا نص التوضيح!">ضع فأصبعك هنا</a>

النصيحة: يجب كتابة نافذة التوضيح في كود التشغيل الأولي لـ jQuery: ثم يمكن استدعاء دالة tooltip() على العنصر المحدد.

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

مثال

<!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="#" data-toggle="tooltip" title="أنا نص التوضيح!">ضع فأصبعك هنا</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</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>
　　<a href="#" data-toggle="tooltip" data-placement="top" title="أنا نص التوضيح!">ضع فأصبعك هنا</a>
　　<a href="#" data-toggle="tooltip" data-placement="bottom" title="أنا نص التوضيح!">ضع فأصبعك هنا</a>
　　<a href="#" data-toggle="tooltip" data-placement="left" title="أنا نص التوضيح!">ضع فأصبعك هنا</a>
　　<a href="#" data-toggle="tooltip" data-placement="right" title="أنا نص التوضيح!">ضع فأصبعك هنا</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</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">
	<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="مقترح على الأعلى">
	　　مقترح على الأعلى
	</button>
	<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="مقترح على اليمين">
	　　مقترح على اليمين
	</button>
	<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="مقترح على الأسفل">
	　　النصائح في الأسفل
	</button>
	<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="النصائح على اليسار">
	　　النصائح على اليسار
	</button>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

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

النتيجة بعد التشغيل كالتالي:

إضافة علامات التبويب HTML، قم بتعيين data-html="true"، وضع المحتوى داخل علامة title:

مثال

<!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">
　　<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>النصائح</em> <u>مع</u> <b>HTML</b>">
　　النصائح مع HTML
</button>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</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">
	<span　class="d-inline-block"　tabindex="0"　data-toggle="tooltip"　title="نافذة الإعلام المعطل">
	　　<button　class="btn　btn-primary"　style="pointer-events:　none;"　type="button"　disabled>زر معطل</button>
	</span>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

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

النتيجة بعد التشغيل كالتالي:

نافذة الإعلام في Bootstrap4 نافذة الحوار في Bootstrap4