أضف تراكبًا صغيرًا إلى محتوى الصفحة ، تمامًا مثل التأثيرات على iPad ، وإضافة معلومات إضافية إلى عناصر الصفحة.
تبعيات البرنامج المساعد
يعتمد مربع المنبثقة على البرنامج المساعد لسلطة الأدوات ، لذلك يجب تحميل المكون الإضافي لسلطة الأدوات أولاً.
وظيفة إضافة انتقائية
لاعتبارات الأداء ، تتم إضافة واجهة برمجة تطبيقات سمة البيانات من تلميحات الأدوات والمكونات المنبثقة اختياريا ، مما يعني أنه يجب عليك تهيئتها بنفسك.
هناك حاجة إلى إعدادات إضافية عند استخدام المربعات المنبثقة في مجموعات الأزرار ومجموعات مربع الإدخال
عند استخدام مربع المطالبة بالاقتران مع .BTN-Group أو .input-Group ، تحتاج إلى تحديد خيار الحاوية: "Body" (انظر الوثائق أدناه) لتجنب الآثار الجانبية غير المرغوب فيها (على سبيل المثال ، عندما يظهر مربع المنبثقة ، قد تصبح عناصر الصفحة التي تتعاون معها أوسع أو مُعد).
عند استخدام مربعات منبثقة على عناصر الصفحات المحظورة ، تحتاج إلى إضافة عنصر إضافي للفه
من أجل إضافة مربع منبثقة إلى عنصر معطل أو .disabled ، قم بلف عنصر الصفحة الذي يجب إضافته إلى مربع المنبثقة في <viv> ، ثم قم بتطبيق مربع منبثقة على هذا العنصر <Div>.
1. الحالات الثابتة
4 خيارات اختيارية: الترتيب العلوي واليمين والأسفل واليسرى.
مقطع رمز
.Bs-example {border-color: #dd ؛ الحدود الحدودية: 4px 4px 0 0 ؛ عرض الحدود: 1 بكسل ؛ Box-shadow: لا شيء ؛ الهامش اليساري: 0 ؛ يمين الهامش: 0 ؛ على غرار الحدود: صلبة. } .bs-example-popover .popover {الموضع: النسبية ؛ العرض: كتلة ؛ تعويم: اليسار. العرض: 240 بكسل ؛ الهامش: 20 بكسل ؛ }<h1> 3. صندوق المنبثقة </h1> <viv> <viv> <viv> </viv> <h3> popover Top </h3> <viv> <p> sed posuere consectetur est في lobortis. AENEAN EU LEO QUAM. Pellentesque Ornare Sem lacinia quam venenatis الدهليز. </p> </viv> </viv> <viv> <viv> </viv> <h3> popover right </h3> <fiv> <p> sed posuere incectetur est at lobortis. AENEAN EU LEO QUAM. Pellentesque Ornare Sem lacinia quam venenatis. </p> </viv> <viv> <viv> </viv> <h3> popover right </h3> <viv> <p> sed posuere incectetur est at lobortis. AENEAN EU LEO QUAM. Pellentesque Ornare Sem lacinia quam venenatis Shildulum. </p> </viv> </viv> <viv> <viv> </viv> <h3> popover bottom </h3> <viv> <p> sed posuere consectetur est at lobortis. AENEAN EU LEO QUAM. Pellentesque Ornare Sem lacinia quam venenatis Sastibulum. </p> </viv> </viv> <viv> <viv> </viv> <h3> popover left </h3> <v> <p> sed posuere consectetur est at lobortis. AENEAN EU LEO QUAM. Pellentesque Ornare Sem lacinia quam venenatis.
معاينة تأثير
قصاصة الكود:
<a href = "javaScript: void (0)" id = "a_pop" placement-placement = "bottom"-"الرياح والمطر نحن نتفكك من العالم كله ، والرياح وتفتيح ثلج الثلج تهب شعرنا. لقد قلت ذات مرة إنه يجب ألا تنفصل وتكون معًا إلى الأبد ، والآن أريد أن أسأل عما إذا كنت مجرد قول طفولي ، لا يمكن أن تتحمل سنوات بريئة لخداع الشباب. سوف أرتقي لك. الثلج الكثيف من فضلك لا تمحو آثار كائننا معًا. الثلج الكثيف لا يمكن أن يمحو العلامات التي نعطيها بعضنا البعض. الليلة ، يتم فصل العشب وسترسل لك ليلة القمر المشرق آلاف الأميال لانتظار الرياح الخريف.
<strong> js التهيئة: </strong> <script type = "text/javaScript"> $ ("#a_pop"). popover () ؛ </script>تأثير المعاينة:
لاحظ أنه عند تحديد الموضع ، انتبه إلى مشكلات الاتجاه. نظرًا لأن المربع المنبثق يبدأ في الظهور بمركز عنصر حدث الزناد ، فمن المحتمل أن يتم الكتابة عليه ولا يمكن عرضه جميعًا.
يجب تحديد سمة علامة HREF في الكود على أنها JavaScript: void (0) لإزالة تأثير الارتباط.
أربعة اتجاهات:
شفرة
<a href = "javaScript: void (0)" id = "a_pop1" data-placement = "Left"-content = "The Wind and Rain مثل قضاء الوقت للحاق بالحصان الأبيض. هل ما زلت تمسك نومك في راحة اليد الصغيرة؟ <a href = "javaScript: void (0)" id = "a_pop2" data-placement = "top"-محتوى بيانات = "لقد قلنا أننا لا يجب أن نفصل ويجب أن نكون دائمًا معًا ، حتى لو كنا أعداء مع مرور الوقت ، حتى إذا كنا نغادر من العالم بأكمله ، فإن الرياح ورب أنقاب الثلج تهب الأبيض. data-original-title="Time to Boil Rain"> Upper</a> <a href="javascript:void(0)" id="a_pop3" data-placement="bottom" data-content= "The infinite wishes made in the midsummer that year, we held hands and took turns to cross the river of sadness. You once said that we should always be together without separation. Now I want to ask if you are just a كلمات الطفل. " البيانات الأبعاد الأصلية = "الوقت للغليان المطر"> أقل </a> <a href = "javaScript: void (0)" id = "a_pop4" data-placement = "right"-لا يمكن أن نتحلى بالثلوج الثلجية. الليلة ، يترك العشب القمر المشرق ويرسل لك آلاف الأميال للانتظار حتى ترتفع رياح الخريف في العام المقبل. $ ("#a_pop2"). popover () ؛ $ ("#a_pop3"). popover () ؛ $ ("#a_pop4"). popover () ؛ </script>تأثيرات المعاينة
2. الخيارات
يمكن تمرير الخيارات من خلال خصائص البيانات أو JavaScript. بالنسبة إلى سمة البيانات ، تحتاج إلى وضع اسم الخيار بعد البيانات ، على سبيل المثال-إعادة تشكيل البيانات = "".
تطبيق خصائص البيانات على مربع منبثق واحد
للحصول على مربع منبثقة واحدة ، يمكنك تحديد الخيارات بشكل منفصل من خلال خاصية البيانات ، كما هو موضح أعلاه.
3. الطريقة
$ (). popover (خيارات)
تهيئة مربع المنبثقة لمجموعة من العناصر.
.popover ('show')
يظهر مربع المنبثقة.
$ ('#element'). popover ('show')
.popover ('إخفاء')
إخفاء مربع المنبثقة.
$ ('#element'). popover ('Hide')
.popover ('Toggle')
إظهار أو إخفاء مربع المنبثقة.
$ ('#element'). popover ('Toggle')
.popover ('تدمير')
إخفاء وتدمير صندوق المنبثقة.
$ ('#element'). popover ('Destroy')
رابعا. الأحداث
$ ('#myPopover'). on ('Hidden.bs.popover' ، function () {// افعل شيئًا ...})إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وتوصيل 3 موضوعات مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل شيء عن هذا المقال. آمل أن يكون من المفيد للجميع أن يتعلموا وإتقان صندوق bootstrap المنبثق.