دليل أساسي Bootstrap4

نافذة الإعلام في Bootstrap4 الشريط العرضي في Bootstrap4

نافذة التشغيل في Bootstrap4

Modal هي نافذة حوار أو نافذة تنقل، تستخدم لتقديم معلومات هامة أو إعلام المستخدمين بأخذ إجراءات ضرورية قبل المتابعة. يتم استخدام النمط بشكل واسع لتحذير المستخدمين من انتهاء مدة الجلسة، أو لاستقبال تأكيدهم النهائي قبل تنفيذ أي عملية رئيسية (مثل حفظ أو حذف بيانات مهمة).

يمكنك إنشاء نافذة مودال ذكية ومتعددة الاستخدامات باستخدام وحدة التكامل المودال لـ Bootstrap.

نافذة المودال (Modal) هي نافذة فرعية تغطي نافذة الأب. عادةً، الهدف هو عرض محتوى يأتي من مصدر منفصل، يمكن أن يكون هناك تفاعل دون مغادرة نافذة الأب. يمكن للنافذة الفرعية تقديم معلومات وتفاعل.

كيفية إنشاء نافذة مودال

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

مثال

<!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>
　　<!--　按钮：用于打开模态框　-->
　　<button　type="button"　class="btn　btn-primary"　data-toggle="modal"　data-target="#myModal">
　　　　فتح نافذة الحوار
　　</button>
　　　
　　<!--　模态框　-->
　　<div　class="modal　fade"　id="myModal">
　　　　<div　class="modal-dialog">
　　　　　　<div class="modal-content">
　　　
　　　　　　　　<!-- رأس نافذة المودال -->
　　　　　　　　<div class="modal-header">
　　　　　　　　　　<h4 class="modal-title">عنوان نافذة المودال</h4>
　　　　　　　　　　<button type="button" class="close" data-dismiss="modal">×</button>
　　　　　　　　</div>
　　　
　　　　　　　　<!-- جسم نافذة المودال -->
　　　　　　　　<div class="modal-body">
　　　　　　　　　　محتوى نافذة المودال..
　　　　　　　　</div>
　　　
　　　　　　　　<!-- قاعدة نافذة المودال -->
　　　　　　　　<div class="modal-footer">
　　　　　　　　　　<button type="button" class="btn btn-secondary" data-dismiss="modal">إغلاق</button>
　　　　　　　　</div>
　　　
　　　　　　</div>
　　　　</div>
　　</div>
　　
</div>
</body>
</html>

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

نتيجة التشغيل كما يلي:

حجم نافذة الحوار

يمكننا إضافة .modal-sm استخدام الفئات لإنشاء نافذة حوار صغيرة، .modal-lg فئة يمكن إنشاء نافذة حوار كبيرة.

فئة الحجم تضيف بعد <div> عنصر .modal-dialog فئة :

مثال - نافذة حوار صغيرة

<!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>
　　<!--　按钮：用于打开模态框　-->
　　<button　type="button"　class="btn　btn-primary"　data-toggle="modal"　data-target="#myModal">
　　　　فتح نافذة الحوار
　　</button>
　　　
　　<!--　模态框　-->
　　<div　class="modal　fade"　id="myModal">
　　　　<div　class="modal-dialog　modal-sm">
　　　　　　<div class="modal-content">
　　　
　　　　　　　　<!-- رأس نافذة المودال -->
　　　　　　　　<div class="modal-header">
　　　　　　　　　　<h4 class="modal-title">عنوان نافذة المودال</h4>
　　　　　　　　　　<button type="button" class="close" data-dismiss="modal">×</button>
　　　　　　　　</div>
　　　
　　　　　　　　<!-- جسم نافذة المودال -->
　　　　　　　　<div class="modal-body">
　　　　　　　　　　محتوى نافذة المودال..
　　　　　　　　</div>
　　　
　　　　　　　　<!-- قاعدة نافذة المودال -->
　　　　　　　　<div class="modal-footer">
　　　　　　　　　　<button type="button" class="btn btn-secondary" data-dismiss="modal">إغلاق</button>
　　　　　　　　</div>
　　　
　　　　　　</div>
　　　　</div>
　　</div>
　　
</div>
</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>
　　<!--　按钮：用于打开模态框　-->
　　<button　type="button"　class="btn　btn-primary"　data-toggle="modal"　data-target="#myModal">
　　　　فتح نافذة الحوار
　　</button>
　　　
　　<!--　模态框　-->
　　<div　class="modal　fade"　id="myModal">
　　　　<div　class="modal-dialog　modal-lg">
　　　　　　<div class="modal-content">
　　　
　　　　　　　　<!-- رأس نافذة المودال -->
　　　　　　　　<div class="modal-header">
　　　　　　　　　　<h4 class="modal-title">عنوان نافذة المودال</h4>
　　　　　　　　　　<button type="button" class="close" data-dismiss="modal">×</button>
　　　　　　　　</div>
　　　
　　　　　　　　<!-- جسم نافذة المودال -->
　　　　　　　　<div class="modal-body">
　　　　　　　　　　محتوى نافذة المودال..
　　　　　　　　</div>
　　　
　　　　　　　　<!-- قاعدة نافذة المودال -->
　　　　　　　　<div class="modal-footer">
　　　　　　　　　　<button type="button" class="btn btn-secondary" data-dismiss="modal">إغلاق</button>
　　　　　　　　</div>
　　　
　　　　　　</div>
　　　　</div>
　　</div>
　　
</div>
</body>
</html>

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

نتيجة التشغيل كما يلي:

نافذة الإعلام في Bootstrap4 الشريط العرضي في Bootstrap4