ومشروط المساعد
البرنامج المساعد مشروط هو مربع الحوار نافذة منبثقة / الذي يتم عرضه على رأس الصفحة الحالية:
نصيحة: الإضافات يمكن تضمينها بشكل فردي (باستخدام التمهيد للفرد "modal.js" ملف)، أو في كل مرة (باستخدام "bootstrap.js" أو "bootstrap.min.js" ).
كيفية إنشاء مشروط
يوضح المثال التالي كيفية إنشاء مشروط الأساسي:
مثال
<!-- Trigger the modal with a button -->
<button type="button" class="btn
btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open
Modal</button>
<!-- Modal -->
<div id="myModal"
class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal
content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
انها محاولة لنفسك » وأوضح مثال
و "Trigger" جزء:
لتحريك إطار مشروط، تحتاج إلى استخدام زر أو ارتباط.
ثم تشمل اثنين data-* سمات:
-
data-toggle="modal"يفتح إطار مشروط -
data-target="#myModal"يشير إلى معرف مشروط
و "Modal" جزء:
الوالد <div> يجب أن يكون للمشروط معرف وهذا هو نفس قيمة السمة الهدف البيانات المستخدمة لتحريك مشروط ("myModal") .
و .modal تحدد الدرجة محتوى <div> كما مشروط ويجلب التركيز إليه.
و .fade الطبقة تضيف تأثير انتقال الذي يتلاشى مشروط في الداخل والخارج. إزالة هذه الطبقة إذا كنت لا تريد هذا التأثير.
السمة role="dialog" يحسن الوصول للأشخاص الذين يستخدمون قارئات الشاشة.
و .modal-dialog الطبقة يحدد العرض الصحيح وهامش مشروط.
"المحتوى مشروط" جزء:
و <div> مع class="modal-content " أساليب مشروط (الحدود، لون الخلفية، الخ). داخل هذا <div> ، إضافة مشروط في الرأس، الجسم، وتذييل الصفحة.
و .modal-header يستخدم فئة لتحديد نمط للرأس مشروط. و <button> داخل الرأس يحتوي على data-dismiss="modal" السمة التي تغلق مشروط إذا قمت بالنقر فوق على ذلك. و .close أنماط الطبقة زر الإغلاق، و .modal-title أنماط الطبقة الرأس مع خط الطول المناسب.
و .modal-body يستخدم فئة لتحديد نمط للجسم مشروط. إضافة أي ترميز HTML هنا. الفقرات والصور وأشرطة الفيديو، الخ
و .modal-footer يستخدم فئة لتحديد نمط للتذييل مشروط. لاحظ أن هذا المجال هو الانحياز الحق افتراضيا.
مشروط الحجم
تغيير حجم مشروط بإضافة .modal-sm فئة شرطية صغيرة أو .modal-lg فئة شرطية كبيرة.
إضافة فئة حجم ل <div> العنصر مع الطبقة .modal-dialog :
 | افتراضيا، شرطية متوسطة الحجم. |
|---|
استكمال التمهيد مشروط المرجعي
للإشارة كاملة لجميع خيارات الوسائط والأساليب والأحداث، انتقل إلى لدينا التمهيد شبيبة مشروط المرجعي .