Bootstrap 4 مشروط
Bootstrap 4 مشروط
المكون الشرطي هو مربع حوار / نافذة منبثقة يتم عرضها أعلى الصفحة الحالية:
كيفية إنشاء مشروط
يوضح المثال التالي كيفية إنشاء نموذج أساسي:
مثال
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary"
data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal
Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal
body..
</div>
<!-- Modal footer -->
<div
class="modal-footer">
<button
type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
أضف الرسوم المتحركة
استخدم .fadeالفصل لإضافة تأثير التلاشي عند فتح وإغلاق النموذج:
مثال
<!-- Fading modal -->
<div class="modal fade"></div>
<!--
Modal without animation -->
<div class="modal"></div>
حجم مشروط
قم بتغيير حجم النموذج عن طريق إضافة .modal-sm
فئة الوسائط الصغيرة أو .modal-lgفئة الوسائط الكبيرة أو .modal-xlالنماذج الكبيرة جدًا.
أضف فئة الحجم إلى <div>العنصر الذي يحتوي على فئة .modal-dialog:
مشروط صغير
<div class="modal-dialog modal-sm">
مشروط كبيرة
<div class="modal-dialog modal-lg">
مشروط كبير جدا
<div class="modal-dialog modal-xl">
بشكل افتراضي ، تكون الوسائط "متوسطة" في الحجم.
توسيط مشروط
توسيط النموذج عموديًا وأفقيًا داخل الصفحة ، مع .modal-dialog-centered
الفئة:
مثال
<div class="modal-dialog modal-dialog-centered">
مشروط التمرير
عندما يكون لديك الكثير من المحتوى داخل النموذج ، تتم إضافة شريط تمرير إلى الصفحة. انظر الأمثلة أدناه لفهمها:
مثال
<div class="modal-dialog">
ومع ذلك ، من الممكن فقط التمرير داخل النموذج ، بدلاً من الصفحة نفسها ، عن طريق الإضافة .modal-dialog-scrollableإلى .modal-dialog:
مثال
<div class="modal-dialog modal-dialog-scrollable">
إكمال مرجع مشروط Bootstrap
للحصول على مرجع كامل لجميع الخيارات والوسائل والأحداث المشروطة ، انتقل إلى مرجع مشروط Bootstrap JS الخاص بنا .