مكون الإضافي bootstrap
1. مكون الإضافات الانتقالية
يوفر البرنامج المساعد الانتقالي تأثيرات انتقالية بسيطة. إذا كنت ترغب في الرجوع إلى وظيفة المكون الإضافي بشكل فردي ، فستحتاج أيضًا إلى الرجوع إلى Transition.js بالإضافة إلى ملفات JS الأخرى. أو ، كما هو مذكور في الفصل الإضافي في Bootstrap ، يمكنك الرجوع إلى bootstrap.js أو إصدارات مضغوطة من bootstrap.min.js.
Transition.js هي فئة المساعد الأساسية لحدث TransitionEnd ومحاكاة تأثير الانتقال CSS. يتم استخدامه بواسطة المكونات الإضافية الأخرى للتحقق من دعم تأثير الانتقال CSS والحصول على تأثير الانتقال.
استخدام الحالات
حالات استخدام المكونات الإضافية الانتقالية:
(1) مربع الحوار الوسيط مع شريحة أو تأثير يتلاشى. للحصول على أمثلة محددة ، راجع المكون الإضافي في مربع Bootstrap Modal (Modal).
(2) صفحة العلامة مع تأثير التلاشي. للحصول على أمثلة محددة ، راجع المكون الإضافي لعلامة تبويب Bootstrap (علامة التبويب).
(3) مربع تحذير مع تأثير يتلاشى. للحصول على أمثلة محددة ، راجع المكون الإضافي في صندوق تحذير Bootstrap (ALERT).
(4) لوحة carousel مع تأثير الشريحة. للحصول على أمثلة محددة ، راجع مكون Bootstrap carousel.
2. مكون مربع مشروط bootstrap (Modal)
مربع مشروط (وسيط) هو شكل طفل مغطى على النموذج الأصل. عادةً ما يكون الغرض هو عرض المحتوى من مصدر منفصل ، والذي يمكن أن يكون له بعض التفاعل دون ترك نموذج الأصل. يمكن للنموذج الفرعي توفير المعلومات ، والتفاعل ، إلخ.
إذا كنت ترغب في الرجوع إلى وظيفة المكون الإضافي بشكل منفصل ، فأنت بحاجة إلى الرجوع إلى modal.js. أو ، كما هو مذكور في الفصل الإضافي في Bootstrap ، يمكنك الرجوع إلى bootstrap.js أو إصدارات مضغوطة من bootstrap.min.js.
(1) الاستخدام
يمكنك تبديل المحتويات المخفية للمكون الإضافي مربع Modal Box (Modal):
A. من خلال سمة البيانات: قم بتعيين السمة Data-Toggle = "Modal" على عنصر وحدة التحكم (مثل زر أو ارتباط) ، وقم بتعيين Target = "#Identifier" أو HREF = "#Identifier" لتحديد مربع مشروط محدد للتبديل (مع ID = "ID =" IDIFIER ").
ب. من خلال JavaScript: باستخدام هذه التقنية ، يمكنك استدعاء مربع مشروط مع ID = "Identifier" من خلال خط بسيط من JavaScript:
$ ('#Identifier'). Modal (خيارات)
<h2> إنشاء مربع مشروط (مشروط) </h2> <!-زر يؤدي إلى مربع مشروط-> <button data-toggle = "modal" data-arget = "#mymodal"> ابدأ في إظهار مربع مشروط </button> <! aria-hidden = "true"> <viv> <viv> <viv> <button type = "button" data-dismiss = "modal" aria-hidden = "true" <button type = "button"> إرسال التغييرات </button> </div> </viv> </viv> <!-/.
شرح الرمز:
أ. باستخدام النوافذ المشروطة ، يجب أن يكون لديك نوع من الزناد. يمكنك استخدام الأزرار أو الروابط. هنا نستخدم الأزرار.
ب. إذا نظرت إلى الكود أعلاه بعناية ، فستجد أنه في علامة <NUNTY> ، TORGET = "#mymodal" هو هدف مربع الوسيط الذي تريد تحميله على الصفحة. يمكنك إنشاء مربعات مشروطة متعددة على الصفحة ثم إنشاء مشغلات مختلفة لكل مربع مشروط. الآن ، من الواضح أنه لا يمكنك تحميل وحدات متعددة في نفس الوقت ، ولكن يمكنك إنشاء متعددة على الصفحة لتحميلها في أوقات مختلفة.
ج.
الأول هو .modal ، والذي يستخدم للتعرف على محتوى <viv> كمربع مشروط.
والثاني هو .fade فئة. عندما يتم تبديل المربع المشروط ، فإنه يتسبب في تلاشي المحتوى.
د.
E. يتم استخدام الخاصية Aria-Hidden = "True" للحفاظ على النافذة المشروطة غير مرئية حتى يتم تشغيل الزناد (مثل النقر على الزر ذي الصلة).
F ، <viv> ، Header هو فئة تحدد أنماط رأس نافذة مشروطة.
G ، class = "Close" ، Close هو فئة CSS التي يتم استخدامها لتصميم زر إغلاق نافذة مشروط.
H ، Data-Dismiss = "Modal" ، هي سمة بيانات HTML5 مخصصة. هنا يتم استخدامه لإغلاق النافذة المشروطة.
i ، class = "modal-body" ، هي فئة CSS من CSS Bootstrap ، وتستخدم لتصميم جسم نافذة مشروطة.
J ، Class = "Modal-Footer" ، هي فئة CSS من CSS Bootstrap ، وتستخدم لتنظيم أسفل النافذة المشروطة.
K ، Data-Toggle = "Modal" ، HTML5 Custom Data Settribute Toggle تستخدم لفتح نافذة مشروطة.
(2) الخيارات
هناك خيارات لتخصيص مظهر ومظهر نافذة مشروطة ، والتي يتم تمريرها من خلال خصائص البيانات أو JavaScript. يسرد الجدول التالي هذه الخيارات:
(3) الطريقة
فيما يلي بعض الطرق المفيدة التي يمكن استخدامها مع Modal ().
(4) الحدث
يسرد الجدول التالي الأحداث المراد استخدامها في المربع الوسيط. يمكن استخدام هذه الأحداث كخطافات في الوظائف.
3. القائمة المنسدلة Bootstrap (منسدلة)
يشرح الفصل القائمة المنسدلة Bootstrap القائمة المنسدلة ، ولكنه لا يتضمن جزء التفاعل. سيشرح هذا الفصل تفاعل القائمة المنسدلة بالتفصيل. باستخدام المكون الإضافي المنسدلة ، يمكنك إضافة قوائم منسدلة إلى أي مكون (مثل قضبان التنقل ، وعلامات التبويب ، وقوائم التنقل ، والأزرار ، إلخ).
إذا كنت ترغب في الرجوع إلى وظيفة المكون الإضافي بشكل منفصل ، فأنت بحاجة إلى الرجوع إلى REPDOWN.JS. أو ، كما هو مذكور في الفصل الإضافي في Bootstrap ، يمكنك الرجوع إلى bootstrap.js أو إصدارات مضغوطة من bootstrap.min.js.
(1) الاستخدام
يمكنك تبديل المحتوى المخفي لقائمة القائمة المنسدلة (المنسدلة):
قم بتبديل القائمة المنسدلة عبر سمة البيانات: أضف البيانات toggle = "المنسدلة" إلى الرابط أو الزر.
أ. استخدم سمة البيانات: أضف البيانات toggle = "المنسدلة" إلى الرابط أو الزر لتبديل القائمة المنسدلة ، كما هو موضح أدناه:
<viv> <a data-toggle = "sropdown" href = "#"> trigger trigger </a> <ul roly = "menu" aria-labelledby = "dlabel"> </ul> </viv>
ب. إذا كنت بحاجة إلى الحفاظ على الرابط سليمًا (مفيد عندما لا يمكّن المتصفح javaScript) ، فاستخدم خاصية تهدف البيانات بدلاً من HREF = "#":
<viv> <a id = "dlabel" rob = "button" data-toggle = "sropdown" data-arget = "#" href = "/page.html
C. من خلال JavaScript: اتصل بالقائمة المنسدلة عبر JavaScript ، يرجى استخدام الطريقة التالية: $ ('.
(2) الطريقة
هناك طريقة سهلة لإظهار أو إخفاء القائمة المنسدلة. $ (). المنسدلة ('تبديل')
4. بوتستراب scrollspy المكون الإضافي
سيتم تحديث المكون الإضافي لمراقبة التمرير (ScrollSpy) ، أي التحديث التلقائي لمكون التنقل ، تلقائيًا إلى تحديث هدف التنقل المقابل وفقًا لموقف شريط التمرير. يتمثل تطبيقه الأساسي في إضافة فئة نشطة إلى شريط التنقل استنادًا إلى موضع شريط التمرير أثناء التمرير.
(1) الاستخدام
يمكنك إضافة سلوك الاستماع للتمرير إلى أعلى التنقل:
A. من خلال سمة البيانات: أضف بيانات spy = "التمرير" إلى العنصر الذي تريد الاستماع إليه (عادةً ما يكون الجسم). ثم أضف هدف بيانات السمة مع معرف العنصر الأصل لمكون bootstrap .NAV أو خاصية الفئة. لكي تعمل بشكل صحيح ، يجب عليك التأكد من وجود عناصر في جسم الصفحة التي تتطابق مع معرف الرابط الذي تريد الاستماع إليه.
<body data-spy = "scroll" target = ". navbar-example"> ... <iv> <ul> ... </ul> </viv> ... </body>
من خلال JavaScript: يمكنك استدعاء مراقبة التمرير من خلال JavaScript ، وتحديد العنصر المراد الاستماع إليه ، ثم استدعاء وظيفة .scrollspy ():
$ ('body'). scrollspy ({target: '.navbar-example'})
(2) الخيارات
مرت من خلال سمات البيانات أو javaScript. يسرد الجدول التالي هذه الخيارات:
(3) الطريقة
.scrollspy ('Refresh'): عند استدعاء طريقة scrollspy من خلال JavaScript ، تحتاج إلى استدعاء طريقة .refresh لتحديث DOM. يكون هذا مفيدًا عند تغيير أي عنصر من عناصر DOM (أي إضافة أو إزالة بعض العناصر). هنا بناء الجملة لاستخدام هذه الطريقة.
$ ('[data-spy = "scroll"]'). كل (function () {var $ spy = $ (this) .scrollspy ('Refresh')})(4) الحدث
يسرد الجدول التالي الأحداث المراد استخدامها في التمرير. يمكن استخدام هذه الأحداث كخطافات في الوظائف.
5. مكون علامة تبويب Bootstrap (علامة التبويب)
يتم تقديم علامات التبويب (علامة التبويب) في الفصل العناصر الملاحة Bootstrap. من خلال الجمع بين بعض خصائص البيانات ، يمكنك بسهولة إنشاء واجهة علامة تبويب. باستخدام هذا البرنامج المساعد ، يمكنك وضع المحتوى في صفحة تبويب أو صفحة علامة تبويب الكبسولة أو حتى صفحة علامة تبويب القائمة المنسدلة.
(1) الاستخدام
يمكنك تمكين صفحات علامة التبويب بطريقتين:
أ. من خلال سمة البيانات: تحتاج إلى إضافة بيانات toggle = "علامة التبويب" أو بيانات البيانات = "حبوب منع الحمل" إلى رابط نص المرساة. ستطبق إضافة فصول NAV و NAV-TABS إلى UL نمط علامة bootstrap ، وإضافة فصول NAV و NAV-PILLS إلى UL ، ستطبق نمط كبسولة bootstrap.
<ul>
<li> <a href = "#identifier" data-toggle = "tab"> home </a> </li>
...
</ul>
ب. من خلال JavaScript: يمكنك استخدام JavaScript لتمكين صفحات علامات التبويب ، كما هو موضح أدناه:
$ ('#mytab a'). انقر فوق (دالة (e) {e.preventDefault () $ (this) .tab ('show')})يوضح المثال التالي تفعيل علامات التبويب الفردية بطرق مختلفة:
// حدد صفحة علامة التبويب $ ('#mytab a [href = "#profile"]'). علامة التبويب ('show') // حدد صفحة علامة التبويب الأولى $ ('#mytab a: first'). علامة التبويب ("show") A '). علامة التبويب (' show ')(2) تأثير التلاشي
إذا كنت بحاجة إلى تعيين تأثير يتلاشى في علامة التبويب ، أضف .fade إلى كل. TAB-Pane. يجب إضافة علامة التبويب الأولى باستخدام فئة. في لتتلاشى لعرض المحتوى الأولي ، كما هو موضح في المثال التالي:
<viv> <div id = "home"> ... </div> <div id = "svn"> ... </div> </viv>
(3) الطريقة
. $ (). علامة التبويب: تنشط هذه الطريقة عناصر علامات التبويب وحاويات المحتوى. تحتاج صفحة TAB إلى استخدام مستهدف للبيانات أو HREF يشير إلى عقدة الحاوية في DOM.
<ul id = "mytab"> <li> <a href = "#identifier" data-toggle = "tab"> home </a> </li> ..... </ul> <viv> <div id = "hom
(4) الحدث
يسرد الجدول التالي الأحداث المراد استخدامها في البرنامج المساعد (TAB). يمكن استخدام هذه الأحداث كخطافات في الوظائف.
6. مكون أداة مطالبة Bootstrap (Tooltip)
تعد تلميح الأدوات مفيدة جدًا عندما تريد وصف الرابط. المكون الإضافي لسلطة الأدوات مستوحاة من jQuery.tipsy التي كتبها Jason Frame. قام المكون الإضافي لسلطة الأدوات بإجراء العديد من التحسينات ، مثل عدم الاعتماد على الصور ، ولكن بدلاً من ذلك باستخدام CSS لتحقيق تأثيرات الرسوم المتحركة واستخدام سمات البيانات لتخزين معلومات العنوان.
(1) الاستخدام
يقوم المكون الإضافي لتوصيل Tooltip بإنشاء المحتوى والعلامات بناءً على الاحتياجات. بشكل افتراضي ، يتم وضع تلميح الأدوات خلف عناصر الزناد الخاصة بهم. هناك طريقتان يمكنك إضافة أداة سريعة (Tooltip):
أ. من خلال سمة البيانات: إذا كنت بحاجة إلى إضافة أداة مطالبة (Tooltip) ، فقط أضف toggle = "Tooltip" إلى علامة مرساة. عنوان المرساة هو نص أداة المطالبة (Tooltip). بشكل افتراضي ، يقوم المكون الإضافي بتعيين تلميح الأدوات في الأعلى.
<a href = "#" data-toggle = "tooltip" title = "example tooltip"> يرجى التحول فوق </a>
A. من خلال JavaScript: توجيه أداة المطالبة (Tooltip) من خلال JavaScript: $ ('#Identifier'). Tooltip (خيارات)
لا يشبه المكون الإضافي لقطعة الأدوات القوائم المنسدلة والمكونات الإضافية الأخرى التي تمت مناقشتها مسبقًا ، فهي ليست مكونًا مكونًا من CSS خالصًا. لاستخدام المكون الإضافي ، يجب عليك تنشيطه باستخدام jQuery (اقرأ JavaScript). استخدم البرنامج النصي التالي لتمكين جميع أدوات المطالبة (تلميحات الأدوات) في الصفحة:
$ (function () {$ ("[data-toggle = 'tooltip']"). tooltip () ؛}) ؛
<a href = "#" data-toggle = "tooltip" data-placement = "left"> tooltip على اليسار </a>. <a href = "#" data-toggle = "tooltip" data-placement = "top"> tooltip في الجزء العلوي </a>. <button type = "button" data-toggle = "tooltip" data-placement = "Bottom" title = "tooltip"
(2) الخيارات
هناك بعض الخيارات التي يتم إضافتها من خلال API لبيانات BootStrap (API BootStrap) أو استدعاء من خلال JavaScript. يسرد الجدول التالي هذه الخيارات:
(3) الطريقة
فيما يلي بعض الطرق المفيدة في المكونات الإضافية لتلميذ الأدوات:
(4) الحدث
يسرد الجدول التالي الأحداث المراد استخدامها في المكون الإضافي لسلطة الأدوات. يمكن استخدام هذه الأحداث كخطافات في الوظائف.
7. بوتستراب بوبوفر المكون الإضافي
يشبه Popover تلميح الأدوات ، مما يوفر طريقة عرض ممتدة. لتفعيل مربع المنبثقة ، يحتاج المستخدم فقط إلى التحوم على العنصر. يمكن ملء محتويات مربع المنبثقة بالكامل باستخدام واجهة برمجة تطبيقات بيانات bootstrap (API Bootstrap Data). تعتمد هذه الطريقة على تلميحات الأدوات. إذا كنت ترغب في الرجوع إلى وظيفة المكون الإضافي بشكل منفصل ، فأنت بحاجة إلى الرجوع إلى popover.js ، والتي تعتمد على البرنامج المساعد لقطعة الأدوات.
(1) الاستخدام
يولد المكون الإضافي Popover المحتوى والعلامات بناءً على الاحتياجات. بشكل افتراضي ، يتم وضع popovers خلف عناصر الزناد. يمكنك إضافة البوبوف بطريقتين:
A. من خلال سمة البيانات: إذا كنت ترغب في إضافة popover ، فقط إضافة البيانات toggle = "popover" إلى ملصق مرساة/زر. عنوان المرساة هو نص البوبوفر. بشكل افتراضي ، يقوم المكون الإضافي بتعيين Popover في الأعلى.
<a href = "#" data-toggle = "popover" title = "example popover">
من فضلك تحوم فوقي
</a>
ب. من خلال JavaScript: تمكين Popover (Popover) من خلال JavaScript: $ ('#Identifier'). popover (خيارات)
لا يشبه المكون الإضافي Popover القوائم المنسدلة والمكونات الإضافية الأخرى التي تمت مناقشتها مسبقًا ، فهي ليست مكونًا مكونًا من CSS خالص. لاستخدام المكون الإضافي ، يجب عليك تنشيطه باستخدام jQuery (اقرأ JavaScript). استخدم البرنامج النصي التالي لتمكين جميع البوبوف في الصفحة:
$ (function () {$ ("[data-toggle = 'popover']"). popover () ؛}) ؛
<button type = "button"
data-container = "body" data-toggle = "popover" data-placement = "left"-data-content = "بعض المحتوى في popover على اليسار" > popover على اليسار
</button>
(2) الخيارات
هناك بعض الخيارات التي يتم إضافتها من خلال API لبيانات BootStrap (API BootStrap) أو استدعاء من خلال JavaScript. يسرد الجدول التالي هذه الخيارات:
(3) الطريقة
فيما يلي بعض الطرق المفيدة في المكونات الإضافية:
(4) الحدث
يسرد الجدول التالي الأحداث المراد استخدامها في المكون الإضافي المنبثق (popover). يمكن استخدام هذه الأحداث كخطافات في الوظائف.
8. صندوق تحذير bootstrap (تنبيه)
يتم استخدام رسائل التنبيه في الغالب لأريدة من المستخدم النهائي لعرض معلومات مثل رسائل التحذير أو التأكيد. باستخدام المكون الإضافي للتنبيه ، يمكنك إضافة ميزة قابلة للإلغاء إلى جميع رسائل مربع التحذير.
(1) الاستخدام
يمكنك تمكين وظيفة الفصل لصندوق التحذير بالطريقتين التاليتين:
أ. من خلال سمات البيانات: أضف وظيفة قابلة للإلغاء من خلال واجهة برمجة تطبيقات البيانات (API للبيانات). ما عليك سوى إضافة بيانات dismiss = "تنبيه" إلى الزر الإغلاق ، وسيتم إضافة وظيفة الإغلاق تلقائيًا إلى مربع التحذير.
<a dismiss = "Alert" href = "#" aria-hidden = "true">
×
</a>
من خلال JavaScript: إضافة وظائف ملغاة من خلال JavaScript: $ (". Alert"). ALERT ()
<viv> <a href = "#" data-dismiss = "Alert"> × </a> <strong> تحذير! </strong> توصيل الشبكة الخاص بك لديه مشكلة. </div>
(2) الطريقة
فيما يلي بعض الطرق المفيدة في البرنامج المساعد التنبيه:
(3) الحدث
يسرد الجدول التالي الأحداث المراد استخدامها في مكون التنبيه. يمكن استخدام هذه الأحداث كخطافات في الوظائف.
9. البرنامج المساعد الزر bootstrap
باستخدام المكون الإضافي للزر ، يمكنك إضافة بعض التفاعلات ، مثل التحكم في حالة الزر ، أو إنشاء مجموعات الأزرار لمكونات أخرى مثل أشرطة الأدوات.
(1) حالة التحميل
لإضافة حالة التحميل إلى الزر ، ما عليك سوى إضافة Text-Text = "Loading ..." إلى عنصر الزر كسماره.
<button id = "fat-btn" data-load-text = "loading ..." type = "button"> loading status </utton> <script> $ (function () {$ (". btn"). click (function () </script>(2) مفتاح واحد
لتنشيط مفتاح زر واحد (على سبيل المثال ، لتغيير الحالة العادية للزر إلى الحالة الصحفية ، والعكس بالعكس) ، فقط أضف البيانات toggle = "زر" إلى عنصر الزر كسممة.
<button type = "button" data-toggle = "button"> مفتاح واحد </button>
(3) مربع الاختيار
يمكنك إنشاء مجموعة مربع الاختيار وإضافة تبديل إلى مجموعة مربع الاختيار عن طريق إضافة بيانات بيانات البيانات toggle = "الأزرار" إلى مجموعة BTN-Group.
<divdata-toggle = "buttons"> <label> <input type = "checkbox"> الخيار 1 </label> <label> <input type = "checkbox"
(4) زر الراديو (راديو)
وبالمثل ، يمكنك إنشاء مجموعة زر الراديو وإضافة تبديل لمجموعة زر الراديو عن طريق إضافة بيانات بيانات البيانات toggle = "الأزرار" إلى مجموعة BTN-Group.
(5) الطريقة
فيما يلي بعض الطرق المفيدة في ملحقات الأزرار:
10. مكون الإضافات
يجعل المكون الإضافي للانهيار من السهل طي منطقة الصفحة. سواء كنت تستخدمه لإنشاء تنقل منهار أو لوحة محتوى ، فإنه يسمح بالكثير من خيارات المحتوى.
(1) قم بإنشاء لوحة قابلة للطي أو لوحة قابلة للطي ، كما هو موضح أدناه:
<div id = "orcordion"> <viv> <viv> <h4> <a data-toggle = "collapse" data-parent = "#orcordion" href = "#collapseOne"> انقر على التوسيع ، انقر لي للانهيار مرة أخرى. الجزء 1 </a> </h4> </viv> <div id = "collapseone"> <viv> nihil anim keffiyeh helvetica ، حرف البيرة الحرفية Wes Anderson cred Nesciunt sapiente ea proident. إعلان نباتي باستثناء جزار نائب لومو. </viv> </viv> </viv> </viv>
A. Data-Toggle = "Collapse" أضف إلى رابط المكون الذي تريد توسيعه أو الانهيار.
تتم إضافة خاصية B أو HREF أو استهدف البيانات إلى المكون الأصل ، وقيمتها هي معرف المكون الطفل.
C. تضيف الخاصية الوالدة من البيانات معرف اللوحة المطوية إلى رابط المكون المراد توسيعه أو انهياره.
(2) قم بإنشاء مكون بسيط قابل للطي دون علامة الأكورديون ، كما هو موضح أدناه:
<button type = "button" data-toggle = "collapse" data-target = "#demo"> مكون بسيط قابل للطي </button> <div id = "demo"> nihil keffiyeh helvetica ، حرف البيرة الحرف wes rederson nesciunt sapiente ea proident. إعلان نباتي باستثناء نائب جزار لومو. </div>
(3) الاستخدام
يسرد الجدول التالي المكون الإضافي للانهيار للتعامل مع التحجيم الثقيل:
يمكنك استخدام المكون الإضافي للانهيار بطريقتين:
A. من خلال سمة البيانات: أضف البيانات toggle = "الانهيار" واستهداف البيانات للعنصر لتعيين عناصر التحكم تلقائيًا إلى عناصر قابلة للطي. تقبل خاصية استهداف البيانات محدد CSS وتطبق تأثير الانهيار عليه. تأكد من إضافة فئة. collapse إلى العنصر القابل للطي. إذا كنت تريد أن تكون بشكل افتراضي ، فأضف فئة إضافية. في.
لإضافة إدارة تجميع تشبه اللوحة المطوية إلى عنصر التحكم القابل للطي ، أضف بيانات خصائص البيانات-"#"#Selector ".
من خلال JavaScript: يمكن تنشيط طريقة الانهيار من خلال JavaScript ، كما هو موضح أدناه: $ ('.
11. البرنامج المساعد Carousel Bootstrap
يعد المكون الإضافي Carousel Bootstrap وسيلة مرنة وسريعة الاستجابة لإضافة Sliders إلى موقع ما. إلى جانب ذلك ، يكون المحتوى مرنًا بما يكفي ليكون صورة أو إطارًا مضمنًا أو مقطع فيديو أو أي نوع آخر من المحتوى الذي تريد وضعه.
<div id = "mycarousel"> <!-مؤشر carousel-> <ol> <li target = "#mycarousel" data-slide-to = "0"> </li> <li data-target = "#mycarousel" data-slide-to = "1" <!-مشروع carousel-> <viv> <img src = "/wp-content/uploads/2014/07/slide1.png"> <viv> العنوان 1 </viv> </viv> <viv> <img src = "/wp-content/uploads/2014/07/slide2. src = "/wp-content/uploads/2014/07/slide3.png"> <viv> العنوان 3 </viv> </viv> </viv> <!
(1) الاستخدام
أ. من خلال سمة البيانات: باستخدام سمات البيانات ، من السهل التحكم في موضع الكاروسيل.
يقبل Swide بيانات الخاصية الكلمة الرئيسية السابقة أو بجانب تغيير موضع الشريحة بالنسبة للموضع الحالي.
استخدم انقطاع البيانات إلى فهرس انزلاق خام إلى أسفل سرير carousel. سوف تنقل البيانات إلى = "2" المنزلق إلى فهرس معين ، ويتم تعداد الفهرس من 0.
يتم استخدام خاصية Data Ride = "carousel" لتمييز carousel التي تبدأ تشغيل الرسوم المتحركة عند تحميل الصفحة.
ب. من خلال JavaScript: يمكن استدعاء Carousel يدويًا من خلال JavaScript ، كما هو موضح أدناه: $ ('. carousel'). carousel ()
(2) الخيارات
هناك بعض الخيارات التي يتم تمريرها من خلال خصائص البيانات أو JavaScript. يسرد الجدول التالي هذه الخيارات:
(3) الطريقة
فيما يلي بعض الطرق المفيدة في المكونات الإضافية:
(4) الحدث
يسرد الجدول التالي الأحداث المراد استخدامها في المكون الإضافي Carousel. يمكن استخدام هذه الأحداث كخطافات في الوظائف.
12. Bootstrap الإضافات الإضافية (Affix)
يتيح المكون الإضافي للملاحة (Affix) الإضافية تثبيت <Div> في مكان ما على الصفحة. يمكنك أيضًا التبديل بين التشغيل أو إيقاف تشغيله باستخدام البرنامج المساعد. مثال شائع هو الرموز الاجتماعية. سيبدأون في مكان ما ، ولكن عندما تنقر الصفحة على علامة ، ستنقل <Div> في مكان ما ولن يتم التمرير مع بقية الصفحة.
(1) الاستخدام
يمكنك استخدام المكون الإضافي المرفق (Affix) عبر خصائص البيانات أو عبر JavaScript.
من خلال سمات البيانات: إذا كنت بحاجة إلى إضافة سلوك إضافي للتنقل (Affix) إلى العنصر ، فأنت بحاجة فقط إلى إضافة Data-Spy = "Affix" إلى العنصر الذي تحتاجه إلى الاستماع إليه. استخدم الإزاحة لتحديد وقت قفل العناصر والحركة.
(2) من خلال JavaScript: يمكنك إضافة التنقل الإضافي (Affix) يدويًا إلى عنصر من خلال JavaScript ، كما هو موضح أدناه:
$ ('#myaffix'). Affix ({Offset: {top: 100 ، bottom: function () {return (this.bottom = $ ('.(3) تحديد المواقع من خلال CSS
في كلتا الطريقتين المذكورة أعلاه لاستخدام المكون الإضافي لـ Affix ، يجب عليك تحديد موقع المحتوى عبر CSS. يتم تبديل المكونات الإضافية الإضافية للتنقل (Affix) بين ثلاث فئات ، كل منها يقدم حالة محددة: .affix و .affix-top و .affix-bottom. يرجى اتباع الخطوات أدناه لإعداد CSS الخاص بك لهذه الحالات الثلاث (لا تعتمد على هذا البرنامج المساعد).
A. في البداية ، يضيف المكون الإضافي .fix-top للإشارة إلى العنصر في وضعه الأعلى. لا يلزم تحديد موقع CSS في هذا الوقت.
ب. عند التمرير من خلال العنصر الذي يضيف التنقل الإضافي (اللصوص) ، يجب تشغيل. في هذا الوقت ، سوف يحل .affix محل. (المقدمة بواسطة رمز CSS في Bootstrap).
إذا تم تعريف الإزاحة السفلية ، عندما يصل التمرير إلى هذا الموضع ، استبدل .affix باستخدام .affix-bottom. نظرًا لأن الإزاحة اختيارية ، إذا تم تعيين الإزاحة ، فيجب تعيين CSS المناسب في نفس الوقت. في هذه الحالة ، أضف الموقف: مطلق ؛ إذا لزم الأمر.
(4) الخيارات
هناك بعض الخيارات التي يتم تمريرها من خلال خصائص البيانات أو JavaScript. يسرد الجدول التالي هذه الخيارات:
تم تجميع هذه المقالة في "تعليمي استخدام المكون الإضافي Bootstrap" ، وكل شخص مرحب به للتعلم والقراءة.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.