جافا سكريبت
اجعل مكونات Bootstrap تنبض بالحياة مع أكثر من عشرة مكونات jQuery مخصصة. يمكنك تضمينها جميعًا بسهولة ، أو واحدة تلو الأخرى.
اجعل مكونات Bootstrap تنبض بالحياة مع أكثر من عشرة مكونات jQuery مخصصة. يمكنك تضمينها جميعًا بسهولة ، أو واحدة تلو الأخرى.
يمكن تضمين الإضافات بشكل فردي (باستخدام *.js
ملفات Bootstrap الفردية) ، أو كلها مرة واحدة (باستخدام bootstrap.js
أو مصغرة bootstrap.min.js
).
كلاهما bootstrap.js
ويحتوي bootstrap.min.js
على جميع المكونات الإضافية في ملف واحد. تشمل واحدة فقط.
تعتمد بعض المكونات الإضافية ومكونات CSS على المكونات الإضافية الأخرى. إذا قمت بتضمين المكونات الإضافية بشكل فردي ، فتأكد من التحقق من هذه التبعيات في المستندات. لاحظ أيضًا أن جميع الملحقات تعتمد على jQuery (وهذا يعني أنه يجب تضمين jQuery قبل ملفات البرنامج المساعد). استشرناbower.json
لمعرفة إصدارات jQuery المدعومة.
يمكنك استخدام جميع ملحقات Bootstrap فقط من خلال واجهة برمجة تطبيقات العلامات دون كتابة سطر واحد من JavaScript. هذه هي واجهة برمجة تطبيقات Bootstrap من الدرجة الأولى ويجب أن تكون الاعتبار الأول عند استخدام مكون إضافي.
ومع ذلك ، قد يكون من المرغوب في بعض المواقف إيقاف تشغيل هذه الوظيفة. لذلك ، نوفر أيضًا القدرة على تعطيل واجهة برمجة تطبيقات سمة البيانات عن طريق إلغاء ربط جميع الأحداث الموجودة على مساحة اسم المستند data-api
. هذا يشبه هذا:
بدلاً من ذلك ، لاستهداف مكون إضافي معين ، ما عليك سوى تضمين اسم المكون الإضافي كمساحة اسم مع مساحة اسم data-api مثل هذا:
لا تستخدم سمات البيانات من عدة مكونات إضافية على نفس العنصر. على سبيل المثال ، لا يمكن أن يحتوي الزر على تلميح أداة وتبديل مشروط. لتحقيق ذلك ، استخدم عنصر التفاف.
نعتقد أيضًا أنه يجب أن تكون قادرًا على استخدام جميع ملحقات Bootstrap فقط من خلال JavaScript API. جميع واجهات برمجة التطبيقات العامة هي طرق مفردة وقابلة للتسلسل ، وتعيد المجموعة التي تم التصرف بناءً عليها.
يجب أن تقبل جميع التوابع كائن خيارات اختياري ، أو سلسلة تستهدف طريقة معينة ، أو لا شيء (الذي يبدأ مكونًا إضافيًا بسلوك افتراضي):
يعرض كل مكون إضافي أيضًا المُنشئ الخام الخاص به على Constructor
خاصية $.fn.popover.Constructor
:. إذا كنت ترغب في الحصول على مثيل مكون إضافي معين ، فاسترجعه مباشرةً من عنصر $('[rel="popover"]').data('popover')
:.
يمكنك تغيير الإعدادات الافتراضية للمكون الإضافي عن طريق تعديل Constructor.DEFAULTS
كائن المكون الإضافي:
في بعض الأحيان يكون من الضروري استخدام ملحقات Bootstrap مع أطر عمل أخرى لواجهة المستخدم. في هذه الحالات ، يمكن أن تحدث تضاربات مساحة الاسم أحيانًا. إذا حدث هذا ، فيمكنك الاتصال .noConflict
على المكون الإضافي الذي ترغب في إرجاع قيمته.
يوفر Bootstrap أحداثًا مخصصة لمعظم الإجراءات الفريدة للمكونات الإضافية. بشكل عام ، تأتي هذه في صيغة المصدر والماضي - حيث يتم تشغيل المصدر (على سبيل المثال show
) في بداية الحدث ، ويتم تشغيل شكل الفاعل الماضي ( shown
على سبيل المثال) عند الانتهاء من إجراء ما.
اعتبارًا من 3.0.0 ، تكون جميع أحداث Bootstrap ذات مساحة اسم.
توفر جميع أحداث المصدر preventDefault
وظائف. يوفر هذا القدرة على إيقاف تنفيذ الإجراء قبل أن يبدأ.
يمكن الوصول إلى إصدار كل من ملحقات jQuery في Bootstrap عبر VERSION
خاصية مُنشئ المكون الإضافي. على سبيل المثال ، بالنسبة لمكوِّن تلميح الأدوات الإضافي:
لا تتراجع مكونات Bootstrap الإضافية برشاقة خاصة عند تعطيل JavaScript. إذا كنت مهتمًا بتجربة المستخدم في هذه الحالة ، <noscript>
فاستخدمها لشرح الموقف (وكيفية إعادة تمكين JavaScript) للمستخدمين ، و / أو إضافة احتياطياتك المخصصة.
لا يدعم Bootstrap رسميًا مكتبات JavaScript التابعة لجهات خارجية مثل Prototype أو jQuery UI. على الرغم .noConflict
من الأحداث التي تقع ضمن نطاق الأسماء ، فقد تكون هناك مشكلات في التوافق تحتاج إلى إصلاحها بنفسك.
للحصول على تأثيرات انتقال بسيطة ، قم بتضمينها transition.js
مرة واحدة إلى جانب ملفات JS الأخرى. إذا كنت تستخدم المترجم (أو المصغر) bootstrap.js
، فلا داعي لتضمين هذا - فهو موجود بالفعل.
Transition.js هو مساعد أساسي transitionEnd
للأحداث بالإضافة إلى محاكي انتقال CSS. يتم استخدامه بواسطة المكونات الإضافية الأخرى للتحقق من دعم انتقال CSS وللتقاط الانتقالات المعلقة.
يمكن تعطيل الانتقالات بشكل عام باستخدام مقتطف JavaScript التالي ، والذي يجب أن يأتي بعد transition.js
( bootstrap.js
أو bootstrap.min.js
، حسب الحالة) التحميل:
الوسائط هي مطالبات حوار مبسطة ومرنة مع الحد الأدنى من الوظائف المطلوبة والافتراضيات الذكية.
تأكد من عدم فتح مشروط بينما لا يزال الآخر مرئيًا. يتطلب عرض أكثر من نموذج في وقت واحد رمزًا مخصصًا.
حاول دائمًا وضع كود HTML الخاص بالمشروط في موضع المستوى الأعلى في المستند الخاص بك لتجنب المكونات الأخرى التي تؤثر على مظهر و / أو وظائف الوسائط.
هناك بعض المحاذير بخصوص استخدام الوسائط على الأجهزة المحمولة. راجع مستندات دعم المتصفح للحصول على التفاصيل.
نظرًا للكيفية التي تحدد بها HTML5 دلالاتها ، فإن autofocus
سمة HTML ليس لها أي تأثير في أشكال Bootstrap. لتحقيق نفس التأثير ، استخدم بعض JavaScript المخصص:
نموذج تم تقديمه مع رأس ونص ومجموعة من الإجراءات في التذييل.
تبديل مشروط عبر JavaScript بالنقر فوق الزر أدناه. سوف ينزلق لأسفل ويتلاشى للداخل من أعلى الصفحة.
تأكد من إضافة role="dialog"
والإشارة aria-labelledby="..."
إلى العنوان الشرطي ، إلى وإلى .modal
نفسه .role="document"
.modal-dialog
بالإضافة إلى ذلك ، يمكنك تقديم وصف لمربع الحوار الخاص بك aria-describedby
باستخدام .modal
.
يتطلب تضمين مقاطع فيديو YouTube في النماذج وجود JavaScript إضافي غير موجود في Bootstrap لإيقاف التشغيل تلقائيًا والمزيد. راجع منشور Stack Overflow المفيد هذا للحصول على مزيد من المعلومات.
النماذج لها حجمان اختياريان ، متاحان عبر فئات التعديل ليتم وضعها في ملف .modal-dialog
.
بالنسبة للشروط التي تظهر ببساطة بدلاً من أن تتلاشى للعرض ، قم بإزالة .fade
الفئة من ترميزك الشرطي.
للاستفادة من نظام شبكة Bootstrap داخل نموذج ما ، ما عليك سوى التداخل .row
داخل .modal-body
فئات نظام الشبكة العادية ثم استخدام فئات نظام الشبكة العادية.
هل لديك مجموعة من الأزرار التي تؤدي جميعها إلى نفس الوضع ، فقط بمحتويات مختلفة قليلاً؟ استخدم سمات HTMLevent.relatedTarget
( ربما عبر jQuery ) لتغيير محتويات النموذج بناءً على الزر الذي تم النقر عليه. راجع مستندات Modal Events للحصول على تفاصيل حول ،data-*
relatedTarget
يقوم المكوِّن الإضافي المشروط بتبديل المحتوى المخفي عند الطلب ، عبر سمات البيانات أو JavaScript. كما أنه يضيف .modal-open
إلى <body>
تجاوز سلوك التمرير الافتراضي وينشئ .modal-backdrop
منطقة نقرة لرفض النماذج المعروضة عند النقر خارج النموذج.
تنشيط مشروط دون كتابة JavaScript. قم بتعيين data-toggle="modal"
عنصر تحكم ، مثل زر ، مع data-target="#foo"
أو href="#foo"
لاستهداف نمط محدد للتبديل.
استدعاء مشروط مع معرف myModal
بسطر واحد من JavaScript:
يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-
، كما في data-backdrop=""
.
اسم | يكتب | إفتراضي | وصف |
---|---|---|---|
خلفية | منطقي أو السلسلة'static' |
حقيقي | يتضمن عنصر خلفية مشروط. بدلاً من ذلك ، حدد static خلفية لا تغلق النموذج عند النقر. |
لوحة المفاتيح | قيمة منطقية | حقيقي | يغلق المشروط عند الضغط على مفتاح الهروب |
تبين | قيمة منطقية | حقيقي | يظهر الشكل عند التهيئة. |
التحكم عن بعد | طريق | خاطئة | تم إهمال هذا الخيار منذ الإصدار 3.3.0 وتمت إزالته في الإصدار 4.0. نوصي بدلاً من ذلك باستخدام قوالب من جانب العميل أو إطار عمل لربط البيانات ، أو استدعاء jQuery.load نفسك. إذا تم توفير عنوان URL بعيد ، فسيتم تحميل المحتوى مرة واحدة عبر طريقة jQuery |
.modal(options)
ينشط المحتوى الخاص بك كمشروط. يقبل الخيارات الاختيارية object
.
.modal('toggle')
يبدل مشروط يدويًا. يعود إلى المتصل قبل أن يتم إظهار أو إخفاء الوسائط (أي قبل وقوع الحدث shown.bs.modal
أو ).hidden.bs.modal
.modal('show')
يفتح مشروط يدويا. يعود إلى المتصل قبل أن يتم عرض الشرط بالفعل (أي قبل shown.bs.modal
وقوع الحدث).
.modal('hide')
يدويا يخفي مشروط. يعود إلى المتصل قبل أن يتم إخفاء الوسائط (أي قبل hidden.bs.modal
وقوع الحدث).
.modal('handleUpdate')
يعيد ضبط موضع الشرط لمواجهة شريط التمرير في حالة ظهوره ، مما يجعل القفز الشرطي إلى اليسار.
مطلوب فقط عندما يتغير ارتفاع الوسائط عندما يكون مفتوحًا.
تكشف فئة مشروط Bootstrap عن بعض الأحداث للتثبيت في وظائف مشروطة.
يتم إطلاق جميع الأحداث المشروطة على الوسائط نفسها (أي في <div class="modal">
).
نوع الحدث | وصف |
---|---|
show.bs.modal | يتم تشغيل هذا الحدث فورًا عند show استدعاء أسلوب المثيل. إذا كانت النتيجة نقرة ، فإن العنصر الذي تم النقر عليه يكون متاحًا relatedTarget كخاصية للحدث. |
معروض .bs.modal | يتم تشغيل هذا الحدث عندما يكون النموذج مرئيًا للمستخدم (سينتظر حتى تكتمل انتقالات CSS). إذا كانت النتيجة نقرة ، فإن العنصر الذي تم النقر عليه يكون متاحًا relatedTarget كخاصية للحدث. |
نموذج اخفاء | يتم تشغيل هذا الحدث فورًا عند hide استدعاء أسلوب المثيل. |
نموذج مخفي | يتم تشغيل هذا الحدث عند انتهاء إخفاء النموذج عن المستخدم (سينتظر حتى تكتمل انتقالات CSS). |
تحميل .bs.modal | يتم تشغيل هذا الحدث عندما يقوم الوسيط بتحميل المحتوى باستخدام remote الخيار. |
أضف قوائم منسدلة إلى أي شيء تقريبًا باستخدام هذا المكون الإضافي البسيط ، بما في ذلك شريط التنقل وعلامات التبويب والحبوب.
عبر سمات البيانات أو JavaScript ، يقوم المكون الإضافي المنسدل بتبديل المحتوى المخفي (القوائم المنسدلة) عن طريق تبديل .open
الفصل في عنصر القائمة الرئيسي.
على الأجهزة المحمولة ، يؤدي فتح قائمة منسدلة إلى إضافة .dropdown-backdrop
منطقة نقر لإغلاق القوائم المنسدلة عند النقر خارج القائمة ، وهو مطلب لدعم iOS المناسب. هذا يعني أن التبديل من قائمة منسدلة مفتوحة إلى قائمة منسدلة مختلفة يتطلب نقرة إضافية على الهاتف المحمول.
ملاحظة: data-toggle="dropdown"
يتم الاعتماد على السمة لإغلاق القوائم المنسدلة على مستوى التطبيق ، لذلك من الجيد استخدامها دائمًا.
أضف data-toggle="dropdown"
إلى ارتباط أو زر لتبديل القائمة المنسدلة.
للحفاظ على عناوين URL سليمة مع أزرار الارتباط ، استخدم data-target
السمة بدلاً من href="#"
.
استدعاء القوائم المنسدلة عبر JavaScript:
data-toggle="dropdown"
لا يزال مطلوبًابغض النظر عما إذا كنت تتصل بالقائمة المنسدلة عبر JavaScript أو تستخدم واجهة برمجة تطبيقات البيانات بدلاً من ذلك ، data-toggle="dropdown"
يلزم دائمًا أن تكون موجودًا في عنصر تشغيل القائمة المنسدلة.
لا أحد
$().dropdown('toggle')
لتبديل القائمة المنسدلة لشريط تنقل محدد أو التنقل المبوب.
يتم تشغيل جميع أحداث القائمة المنسدلة على .dropdown-menu
العنصر الرئيسي لـ.
تحتوي جميع أحداث القائمة المنسدلة على relatedTarget
خاصية تكون قيمتها عنصر ربط التبديل.
نوع الحدث | وصف |
---|---|
show.bs. الإنزال | يتم تشغيل هذا الحدث فورًا عند استدعاء طريقة إظهار المثيل. |
معروض. bs. | يتم تشغيل هذا الحدث عندما تصبح القائمة المنسدلة مرئية للمستخدم (سينتظر حتى تكتمل انتقالات CSS). |
إخفاء | يتم تشغيل هذا الحدث فورًا عند استدعاء طريقة إخفاء المثيل. |
المخفية | يتم تشغيل هذا الحدث عندما تنتهي القائمة المنسدلة من إخفاء المستخدم (سينتظر حتى تكتمل انتقالات CSS). |
المكون الإضافي ScrollSpy مخصص لتحديث أهداف التنقل تلقائيًا بناءً على موضع التمرير. قم بالتمرير في المنطقة أسفل شريط التنقل وشاهد تغيير الفصل النشط. سيتم أيضًا تمييز العناصر الفرعية المنسدلة.
طماق إعلانية ، Keytar ، brunch id art party dolor labore. Pitchfork yr enim lo-fi قبل بيعها بالكامل. حقوق دراجة Tumblr من المزرعة إلى المائدة مهما كانت. كارديغان كوفية كارليس برسمة أنيم. كشك تصوير فيليت سيتان مكسويني 3 وولف مون إيرور. سترة كوسبي lomo jean shorts ، williamsburg hoodie minim qui ربما لم تسمع بها على الأرجح وصندوق الائتمان كارديجان culpa biodiesel wes anderson Aesthetic. نهيل موشوم الاتهام ، الفضل السخرية وقود الديزل الحيوي كوفية حرفي أولامكو يترتب على ذلك.
لوح تزلج Veniam Marfa شارب ، Adipisising Fugiat Velit Pitchfork Beard. فريجان بيرد أليكوا كيوبيداتات مكسويني فييرو. Cupidatat four loko nisi، ea helvetica nulla carles. شاحنة طعام سترة كوسبي موشومة ، فينيل ماكسيني غير حر. Lo-fi wes anderson +1 sartorial. تمارين كارليس غير الجمالية هي من الترميم. بروكلين أديبيسيسينج كرافت بيرة نائب مفتاح ديسيرونت.
Occaecat Goodso aliqua delectus. فاب كرافت بيرة deserunt لوح تزلج عصام. حقوق Lomo للدراجات adipisicing banh mi ، velit ea sunt المستوى التالي من قهوة أحادية المنشأ في ماغنا فينيام. High life id vinyl، echo park socat quis aliquip banh mi مذراة. Vero VHS هو adipisicing. Consectetur nisi DIY حقيبة ساعي صغيرة. Cred ex in ، مستدام delectus consectetur fanny pack iphone.
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
مدونة Keytar Twee ، حقيبة رسول culpa marfa مهما كانت شاحنة الطعام delectus. افتراضات معرف موالفة Sapiente. Locavore sed helvetica cliche المفارقة ، القطط الرعدية التي ربما لم تسمع بها من المحتمل أن تكون ذات قلنسوة خالية من الغلوتين Lo-fi fap aliquip. لابور إيليت بلاس قبل بيعها بالكامل ، تيري ريتشاردسون برويدنت برانش نيسكون كويس كنزة كوسبي بارياتور كوفية أوت هيلفيتيكا حرفي. كارديجان كرافت بيرة seitan جاهز فيليت. VHS chambray labouris tempor veniam. الرسوم المتحركة mollit minim Goods ullamco thundercats.
يجب أن تحتوي روابط Navbar على أهداف معرف قابلة للحل. على سبيل المثال ، <a href="#home">home</a>
يجب أن يتوافق a مع شيء ما في DOM مثل <div id="home"></div>
.
:visible
المستهدفةسيتم تجاهل العناصر المستهدفة التي لا تتوافق مع :visible
jQuery ولن يتم إبراز عناصر التنقل المقابلة لها.
بغض النظر عن طريقة التنفيذ ، يتطلب scrollspy استخدامه position: relative;
على العنصر الذي تتجسس عليه. في معظم الحالات هذا هو <body>
. عند التمرير للتجسس على عناصر أخرى غير الـ <body>
، تأكد من وجود height
مجموعة overflow-y: scroll;
وتطبيقها.
لإضافة سلوك التمرير بسهولة إلى شريط التنقل العلوي ، أضف data-spy="scroll"
إلى العنصر الذي تريد التجسس عليه (عادةً ما يكون هذا هو <body>
). ثم أضف data-target
السمة بمعرف أو فئة العنصر الأصل لأي .nav
مكون Bootstrap.
بعد الإضافة position: relative;
في CSS الخاص بك ، قم باستدعاء scrollspy عبر JavaScript:
.scrollspy('refresh')
عند استخدام scrollspy مع إضافة عناصر أو إزالتها من DOM ، ستحتاج إلى استدعاء طريقة التحديث كما يلي:
يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-
، كما في data-offset=""
.
اسم | يكتب | إفتراضي | وصف |
---|---|---|---|
عوض | رقم | 10 | بكسل للإزاحة من الأعلى عند حساب موضع التمرير. |
نوع الحدث | وصف |
---|---|
activ.bs.scrollspy | يتم تشغيل هذا الحدث عندما يتم تنشيط عنصر جديد بواسطة scrollspy. |
أضف وظائف علامات تبويب ديناميكية وسريعة للانتقال عبر أجزاء المحتوى المحلي ، حتى عبر القوائم المنسدلة. علامات التبويب المتداخلة غير مدعومة.
الدنيم الخام ربما لم تسمع به من سراويل الجينز أوستن. Nesciunt tofu stumptown aliqua ، تطهير ريترو سينث ماستر. شارب مبتذل مؤقت ، ويليامسبورغ كارليس نباتي هيلفيتيكا. Reprehenderit جزار الكوفية الرجعية موالفة زاك. Cosby sweater eu banh mi، qui irure terry richardson ex squid. أليكويب بلاسيت سالفيا سيلوم آيفون. سترة من Seitan Aliquip Quis الأمريكية ، الجزار Voluptate Nisi Qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
يوسع هذا المكون الإضافي مكون التنقل المبوب لإضافة مناطق قابلة للجدولة.
تمكين علامات التبويب القابلة للجدولة عبر JavaScript (يجب تنشيط كل علامة تبويب على حدة):
يمكنك تنشيط علامات التبويب الفردية بعدة طرق:
يمكنك تنشيط علامة تبويب أو التنقل على الأقراص دون كتابة أي JavaScript بمجرد تحديد عنصر data-toggle="tab"
أو data-toggle="pill"
على أحد العناصر. ستؤدي إضافة الفئات nav
و إلى علامة التبويب إلى تطبيق نمط علامة تبويب Bootstrap ، بينما ستؤدي إضافة الفئات و Class إلى تطبيق تصميم حبوب منع الحمل .nav-tabs
ul
nav
nav-pills
لجعل علامات التبويب تتلاشى ، أضف .fade
إلى كل منها .tab-pane
. يجب .in
أن يجعل جزء علامة التبويب الأول المحتوى الأولي مرئيًا.
$().tab
ينشط عنصر علامة تبويب وحاوية محتوى. يجب أن تحتوي علامة التبويب على عقدة حاوية data-target
أو تستهدفها في DOM. href
في الأمثلة أعلاه ، علامات التبويب هي <a>
s ذات data-toggle="tab"
السمات.
.tab('show')
يحدد علامة التبويب المحددة ويظهر المحتوى المرتبط بها. تصبح أي علامة تبويب أخرى تم تحديدها مسبقًا غير محددة ويتم إخفاء المحتوى المرتبط بها. يعود إلى المتصل قبل أن يتم عرض جزء علامة التبويب بالفعل (أي قبل shown.bs.tab
وقوع الحدث).
عند إظهار علامة تبويب جديدة ، يتم تشغيل الأحداث بالترتيب التالي:
hide.bs.tab
(في علامة التبويب النشطة الحالية)show.bs.tab
(في علامة التبويب التي سيتم عرضها)hidden.bs.tab
(في علامة التبويب النشطة السابقة ، نفس علامة التبويب الخاصة hide.bs.tab
بالحدث)shown.bs.tab
(في علامة التبويب النشطة حديثًا المعروضة للتو ، نفس علامة التبويب الخاصة show.bs.tab
بالحدث)إذا لم تكن هناك علامة تبويب نشطة بالفعل ، فلن يتم تشغيل الأحداث hide.bs.tab
و .hidden.bs.tab
نوع الحدث | وصف |
---|---|
show.bs.tab | يتم تشغيل هذا الحدث في علامة التبويب ، ولكن قبل ظهور علامة التبويب الجديدة. استخدم event.target و event.relatedTarget لاستهداف علامة التبويب النشطة وعلامة التبويب النشطة السابقة (إذا كانت متوفرة) على التوالي. |
يظهر. bs.tab | يتم تشغيل هذا الحدث في علامة التبويب بعد عرض علامة التبويب. استخدم event.target و event.relatedTarget لاستهداف علامة التبويب النشطة وعلامة التبويب النشطة السابقة (إذا كانت متوفرة) على التوالي. |
علامة التبويب إخفاء | يتم تشغيل هذا الحدث عند عرض علامة تبويب جديدة (وبالتالي يتم إخفاء علامة التبويب النشطة السابقة). استخدم event.target و event.relatedTarget لاستهداف علامة التبويب النشطة الحالية وعلامة التبويب الجديدة التي ستصبح نشطة ، على التوالي. |
علامة التبويب المخفية | يتم تشغيل هذا الحدث بعد عرض علامة تبويب جديدة (وبالتالي يتم إخفاء علامة التبويب النشطة السابقة). استخدم event.target و event.relatedTarget لاستهداف علامة التبويب النشطة السابقة وعلامة التبويب النشطة الجديدة ، على التوالي. |
مستوحى من البرنامج المساعد jQuery.tipsy الممتاز الذي كتبه Jason Frame ؛ تلميحات الأدوات هي نسخة محدثة لا تعتمد على الصور وتستخدم CSS3 للرسوم المتحركة وسمات البيانات لتخزين العنوان المحلي.
لا يتم أبدًا عرض تلميحات الأدوات ذات العناوين ذات الطول الصفري.
مرر مؤشر الماوس فوق الروابط أدناه لمشاهدة تلميحات الأدوات:
بنطلون ضيق من المستوى التالي ربما لم تسمع به من قبل. كشك تصوير لحية الدنيم الخام Letterpress حقيبة ساعي نباتية stumptown. سيتان من المزرعة إلى المائدة ، ملابس الكينوا الأمريكية ذات الثماني بتات من ماكسيني ، تحتوي على شامبراي من الفينيل تيري ريتشاردسون. Beard stumptown ، بالأزرار بانه مي لومو thundercats. التوفو وقود الديزل الحيوي ويليامسبورغ مارفا ، أربعة شامبراي نباتي مطهر من لوكو مكسويني. حرفي مثير للسخرية حقًا أيا كان keytar ، البنوك من المزرعة إلى المائدة ، أوستن تويتر ، تتعامل مع القهوة ذات الأصل الفردي الخالي من الدنيم.
تتوفر أربعة خيارات: محاذاة لأعلى ولليمين ولأسفل ولليسار.
لأسباب تتعلق بالأداء ، فإن واجهات برمجة تطبيقات Tooltip و Popover data-apis اختيارية ، مما يعني أنه يجب عليك تهيئتهما بنفسك .
تتمثل إحدى طرق تهيئة جميع تلميحات الأدوات على الصفحة في تحديدها حسب data-toggle
السمة الخاصة بها:
ينشئ المكون الإضافي لتلميحات الأدوات محتوى وترميزًا عند الطلب ، ويضع بشكل افتراضي تلميحات الأدوات بعد عنصر المشغل الخاص بهم.
تشغيل تلميح الأداة عبر JavaScript:
الترميز المطلوب لتلميح الأداة هو data
سمة فقط وعلى title
عنصر HTML الذي ترغب في الحصول على تلميح أداة. الترميز الذي تم إنشاؤه لتلميح الأداة بسيط نوعًا ما ، على الرغم من أنه يتطلب موضعًا (افتراضيًا ، يتم تعيينه top
بواسطة المكون الإضافي).
في بعض الأحيان تريد إضافة تلميح أداة إلى ارتباط تشعبي يلتف عدة أسطر. يتمثل السلوك الافتراضي للمكوِّن الإضافي تلميح الأدوات في توسيطه أفقيًا ورأسيًا. أضف white-space: nowrap;
إلى المراسي الخاصة بك لتجنب ذلك.
عند استخدام تلميحات الأدوات على العناصر داخل a .btn-group
أو a .input-group
، أو على العناصر المرتبطة بالجدول ( <td>
، <th>
، <tr>
، <thead>
، <tbody>
، <tfoot>
) ، سيتعين عليك تحديد الخيار container: 'body'
(الموثق أدناه) لتجنب الآثار الجانبية غير المرغوب فيها (مثل زيادة العنصر و / أو تفقد زواياها الدائرية عند تشغيل التلميح).
بالنسبة للمستخدمين الذين يتنقلون باستخدام لوحة المفاتيح ، وخاصة مستخدمي التقنيات المساعدة ، يجب عليك فقط إضافة تلميحات الأدوات إلى العناصر القابلة للتركيز على لوحة المفاتيح مثل الروابط أو عناصر التحكم في النموذج أو أي عنصر عشوائي له tabindex="0"
سمة.
لإضافة تلميح أداة إلى عنصر disabled
أو .disabled
عنصر ، ضع العنصر داخل a <div>
وقم بتطبيق تلميح الأداة عليه <div>
بدلاً من ذلك.
يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-
، كما في data-animation=""
.
اسم | يكتب | تقصير | وصف |
---|---|---|---|
الرسوم المتحركة | قيمة منطقية | حقيقي | تطبيق انتقال الخبو في CSS إلى تلميح الأداة |
وعاء | سلسلة | خاطئة | خاطئة | لإلحاق تلميح الأداة بعنصر معين. مثال |
تأخير | رقم | هدف | 0 | التأخير في إظهار تلميح الأداة وإخفائه (بالمللي ثانية) - لا ينطبق على نوع المشغل اليدوي إذا تم توفير رقم ، فسيتم تطبيق التأخير على كل من الإخفاء / العرض هيكل الكائن هو: |
لغة البرمجة | قيمة منطقية | خاطئة | أدخل HTML في تلميح الأداة. text إذا كانت القيمة false ، فسيتم استخدام طريقة jQuery لإدراج المحتوى في DOM. استخدم النص إذا كنت قلقًا بشأن هجمات XSS. |
تحديد مستوى | سلسلة | وظيفة | 'أعلى' | كيفية وضع تلميح - أعلى | أسفل | غادر | حق | تلقاءي. عندما يتم استخدام دالة لتحديد الموضع ، يتم استدعاؤها باستخدام عقدة DOM تلميح كأول وسيطة لها وعقدة DOM المشغلة كعقدة ثانية لها. يتم |
محدد | سلسلة | خاطئة | إذا تم توفير محدد ، فسيتم تفويض كائنات تلميح الأدوات إلى الأهداف المحددة. في الممارسة العملية ، يتم استخدام هذا لتمكين محتوى HTML الديناميكي لإضافة تلميحات الأدوات. انظر إلى هذا ومثال إعلامي . |
قالب | سلسلة | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
قاعدة HTML لاستخدامها عند إنشاء التلميح.
يجب أن يحتوي عنصر الغلاف الخارجي على |
لقب | سلسلة | وظيفة | " | قيمة العنوان الافتراضية إذا إذا تم توفير وظيفة ، فسيتم استدعاؤها |
اثار | سلسلة | "تحوم التركيز" | كيف يتم تشغيل التلميح - انقر فوق | تحوم | التركيز | كتيب. يمكنك تمرير عدة مشغلات ؛ افصلهم بمسافة. manual لا يمكن دمجها مع أي مشغل آخر. |
منفذ العرض | سلسلة | كائن | وظيفة | {المحدد: "الجسم" ، المساحة المتروكة: 0} | يحافظ على التلميح داخل حدود هذا العنصر. مثال: إذا تم تقديم وظيفة ، فسيتم استدعاؤها باستخدام عقدة DOM للعنصر المشغل كوسيطة وحيدة لها. يتم |
يمكن بدلاً من ذلك تحديد خيارات تلميحات الأدوات الفردية من خلال استخدام سمات البيانات ، كما هو موضح أعلاه.
$().tooltip(options)
يرفق معالج تلميح بمجموعة عنصر.
.tooltip('show')
يكشف عن تلميح أداة عنصر. يعود إلى المتصل قبل عرض التلميح بالفعل (أي قبل shown.bs.tooltip
وقوع الحدث). يعتبر هذا بمثابة تشغيل "يدوي" للتلميح. لا يتم أبدًا عرض تلميحات الأدوات ذات العناوين ذات الطول الصفري.
.tooltip('hide')
يخفي تلميح أداة عنصر. يعود إلى المتصل قبل إخفاء التلميح (أي قبل hidden.bs.tooltip
وقوع الحدث). يعتبر هذا بمثابة تشغيل "يدوي" للتلميح.
.tooltip('toggle')
يبدل تلميح أداة عنصر. يعود إلى المتصل قبل إظهار التلميح أو إخفاؤه بالفعل (أي قبل وقوع الحدث shown.bs.tooltip
أو ). hidden.bs.tooltip
يعتبر هذا بمثابة تشغيل "يدوي" للتلميح.
.tooltip('destroy')
يخفي تلميح عنصر ويتلفه. لا يمكن إتلاف تلميحات الأدوات التي تستخدم التفويض (والتي يتم إنشاؤها باستخدام الخيار ) بشكل فردي في عناصر المشغل التابعة.selector
نوع الحدث | وصف |
---|---|
show.bs.tooltip | يتم تشغيل هذا الحدث فورًا عند show استدعاء أسلوب المثيل. |
معروض .bs.tooltip | يتم تشغيل هذا الحدث عندما يصبح التلميح مرئيًا للمستخدم (سينتظر حتى تكتمل انتقالات CSS). |
hide.bs.tooltip | يتم تشغيل هذا الحدث فورًا عند hide استدعاء أسلوب المثيل. |
hidden.bs.tooltip | يتم تشغيل هذا الحدث عند انتهاء إخفاء التلميح عن المستخدم (سينتظر حتى تكتمل انتقالات CSS). |
المدرجة. bs.tooltip | يتم تشغيل هذا الحدث بعد show.bs.tooltip الحدث عند إضافة قالب تلميح الأدوات إلى DOM. |
أضف تراكبات صغيرة من المحتوى ، مثل تلك الموجودة على iPad ، إلى أي عنصر يحتوي على معلومات ثانوية.
لا يتم أبدًا عرض العناصر المنبثقة التي يكون عنوانها ومحتواها صفريًا.
تتطلب العناصر المنبثقة تضمين ملحق تلميح الأدوات في إصدار Bootstrap الخاص بك.
لأسباب تتعلق بالأداء ، فإن واجهات برمجة تطبيقات Tooltip و Popover data-apis اختيارية ، مما يعني أنه يجب عليك تهيئتهما بنفسك .
تتمثل إحدى طرق تهيئة جميع العناصر المنبثقة على الصفحة في تحديدها حسب data-toggle
السمة الخاصة بها:
عند استخدام العناصر المنبثقة على العناصر داخل a .btn-group
أو a .input-group
، أو على العناصر المرتبطة بالجدول ( <td>
، <th>
، <tr>
، <thead>
، <tbody>
، <tfoot>
) ، سيتعين عليك تحديد الخيار container: 'body'
(الموثق أدناه) لتجنب الآثار الجانبية غير المرغوب فيها (مثل زيادة العنصر بشكل أوسع و / أو تفقد أركانها الدائرية عند تشغيل المنبثقة).
لإضافة عنصر منبثق إلى عنصر disabled
أو .disabled
عنصر ، ضع العنصر داخل a <div>
وقم بتطبيق العنصر المنبثق عليه <div>
بدلاً من ذلك.
في بعض الأحيان تريد إضافة نافذة منبثقة إلى ارتباط تشعبي يلتف بعدة أسطر. يتمثل السلوك الافتراضي للمكوِّن الإضافي المنبثق في توسيطه أفقيًا ورأسيًا. أضف white-space: nowrap;
إلى المراسي الخاصة بك لتجنب ذلك.
تتوفر أربعة خيارات: محاذاة لأعلى ولليمين ولأسفل ولليسار.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
استخدم focus
المشغل لرفض العناصر المنبثقة عند النقرة التالية التي يقوم بها المستخدم.
للحصول على سلوك مناسب عبر المستعرضات وعبر الأنظمة الأساسية ، يجب عليك استخدام <a>
العلامة ، وليس العلامة <button>
، كما يجب تضمين السمات role="button"
و .tabindex
تمكين العناصر المنبثقة عبر JavaScript:
يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-
، كما في data-animation=""
.
اسم | يكتب | تقصير | وصف |
---|---|---|---|
الرسوم المتحركة | قيمة منطقية | حقيقي | تطبيق انتقال تلاشي CSS إلى العنصر المنبثق |
وعاء | سلسلة | خاطئة | خاطئة | لإلحاق العنصر المنبثق بعنصر معين. مثال |
المحتوى | سلسلة | وظيفة | " | قيمة المحتوى الافتراضية إذا إذا تم توفير وظيفة ، فسيتم استدعاؤها مع |
تأخير | رقم | هدف | 0 | التأخير في إظهار وإخفاء النافذة المنبثقة (بالمللي ثانية) - لا ينطبق على نوع المشغل اليدوي إذا تم توفير رقم ، فسيتم تطبيق التأخير على كل من الإخفاء / العرض هيكل الكائن هو: |
لغة البرمجة | قيمة منطقية | خاطئة | أدخل HTML في النافذة المنبثقة. text إذا كانت القيمة false ، فسيتم استخدام طريقة jQuery لإدراج المحتوى في DOM. استخدم النص إذا كنت قلقًا بشأن هجمات XSS. |
تحديد مستوى | سلسلة | وظيفة | 'حقا' | كيفية وضع popover - top | أسفل | غادر | حق | تلقاءي. عندما يتم استخدام دالة لتحديد الموضع ، يتم استدعاؤها باستخدام عقدة DOM المنبثقة باعتبارها الوسيطة الأولى لها وعقدة DOM المشغلة كعقدة ثانية لها. يتم |
محدد | سلسلة | خاطئة | إذا تم توفير محدد ، فسيتم تفويض الكائنات المنبثقة إلى الأهداف المحددة. في الممارسة العملية ، يتم استخدام هذا لتمكين محتوى HTML الديناميكي لإضافة العناصر المنبثقة. انظر إلى هذا ومثال إعلامي . |
قالب | سلسلة | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
قاعدة HTML لاستخدامها عند إنشاء العنصر المنبثق.
يجب أن يحتوي عنصر الغلاف الخارجي على |
لقب | سلسلة | وظيفة | " | قيمة العنوان الافتراضية إذا إذا تم توفير وظيفة ، فسيتم استدعاؤها مع |
اثار | سلسلة | 'انقر' | كيف يتم تشغيل المنبثقة - انقر فوق | تحوم | التركيز | كتيب. يمكنك تمرير عدة مشغلات ؛ افصلهم بمسافة. manual لا يمكن دمجها مع أي مشغل آخر. |
منفذ العرض | سلسلة | كائن | وظيفة | {المحدد: "الجسم" ، المساحة المتروكة: 0} | يحافظ على العنصر المنبثق داخل حدود هذا العنصر. مثال: إذا تم تقديم وظيفة ، فسيتم استدعاؤها باستخدام عقدة DOM للعنصر المشغل كوسيطة وحيدة لها. يتم |
يمكن بدلاً من ذلك تحديد خيارات العناصر المنبثقة الفردية من خلال استخدام سمات البيانات ، كما هو موضح أعلاه.
$().popover(options)
يقوم بتهيئة العناصر المنبثقة لمجموعة عنصر.
.popover('show')
يكشف عن العنصر المنبثق. يعود إلى المتصل قبل أن يتم عرض العنصر المنبثق بالفعل (أي قبل shown.bs.popover
وقوع الحدث). يعتبر هذا بمثابة تشغيل "يدوي" للقافزة المنبثقة. لا يتم أبدًا عرض العناصر المنبثقة التي يكون عنوانها ومحتواها صفريًا.
.popover('hide')
يخفي العنصر المنبثق. يعود إلى المتصل قبل إخفاء العنصر المنبثق بالفعل (أي قبل hidden.bs.popover
وقوع الحدث). يعتبر هذا بمثابة تشغيل "يدوي" للقافزة المنبثقة.
.popover('toggle')
يبدل العنصر المنبثق. يعود إلى المتصل قبل إظهار أو إخفاء العنصر المنبثق بالفعل (أي قبل وقوع الحدث shown.bs.popover
أو ). hidden.bs.popover
يعتبر هذا بمثابة تشغيل "يدوي" للقافزة المنبثقة.
.popover('destroy')
يخفي العنصر المنبثق ويدمره. العناصر المنبثقة التي تستخدم التفويض (التي تم إنشاؤها باستخدام الخيارselector
) لا يمكن إتلافها بشكل فردي على عناصر المشغل التابعة .
نوع الحدث | وصف |
---|---|
show.bs.popover | يتم تشغيل هذا الحدث فورًا عند show استدعاء أسلوب المثيل. |
معروض. bs.popover | يتم تشغيل هذا الحدث عندما يصبح العنصر المنبثق مرئيًا للمستخدم (سينتظر حتى تكتمل انتقالات CSS). |
إخفاء. bs.popover | يتم تشغيل هذا الحدث فورًا عند hide استدعاء أسلوب المثيل. |
مخفي. bs.popover | يتم تشغيل هذا الحدث عند انتهاء إخفاء العنصر المنبثق عن المستخدم (سينتظر حتى تكتمل انتقالات CSS). |
المدرجة. bs.popover | يتم تشغيل هذا الحدث بعد show.bs.popover الحدث عند إضافة القالب المنبثق إلى DOM. |
أضف وظيفة الرفض إلى جميع رسائل التنبيه باستخدام هذا البرنامج المساعد.
عند استخدام أحد .close
الأزرار ، يجب أن يكون هو العنصر الفرعي الأول .alert-dismissible
في العلامة ، ولا يجوز أن يسبقه أي محتوى نصي في الترميز.
غير هذا وذاك وحاول مرة أخرى. Duis mollis، est noncommo luctus، nisi erat porttitor ligula، eget lacinia odio sem nec elit. Cras mattis consectetur Purus الجلوس amet fermentum.
ما عليك سوى الإضافة data-dismiss="alert"
إلى زر الإغلاق لإعطاء وظيفة تنبيه قريبة تلقائيًا. إغلاق تنبيه يزيله من DOM.
لجعل تنبيهاتك تستخدم الرسوم المتحركة عند الإغلاق ، تأكد من أنها تحتوي على الفئات .fade
والفئات .in
مطبقة عليها بالفعل.
$().alert()
يجعل التنبيه يستمع إلى أحداث النقر على العناصر الفرعية التي لها data-dismiss="alert"
السمة. (ليس ضروريًا عند استخدام التهيئة التلقائية لـ data-api.)
$().alert('close')
يغلق تنبيهًا بإزالته من DOM. في حالة وجود الفئات .fade
و .in
على العنصر ، سيتلاشى التنبيه قبل إزالته.
يكشف المكون الإضافي للتنبيه في Bootstrap عن بعض الأحداث للتثبيت في وظائف التنبيه.
نوع الحدث | وصف |
---|---|
قريب | يتم تشغيل هذا الحدث فورًا عند close استدعاء أسلوب المثيل. |
مغلق bs.alert | يتم تشغيل هذا الحدث عند إغلاق التنبيه (سينتظر اكتمال انتقالات CSS). |
أنجز المزيد باستخدام الأزرار. حالات زر التحكم أو إنشاء مجموعات من الأزرار لمزيد من المكونات مثل أشرطة الأدوات.
يستمر Firefox في حالات التحكم في النموذج (التعطيل والفحص) عبر عمليات تحميل الصفحة . الحل لهذا هو استخدام autocomplete="off"
. راجع خطأ Mozilla # 654072 .
إضافة data-loading-text="Loading..."
لاستخدام حالة التحميل على زر.
تم إهمال هذه الميزة منذ الإصدار 3.3.5 وتمت إزالتها في الإصدار 4.
من أجل هذا العرض التوضيحي ، نحن نستخدمه data-loading-text
، $().button('loading')
ولكن هذه ليست الحالة الوحيدة التي يمكنك استخدامها. انظر المزيد حول هذا أدناه في $().button(string)
الوثائق .
أضف data-toggle="button"
لتنشيط التبديل على زر واحد.
.active
ملفاتaria-pressed="true"
بالنسبة للأزرار التي تم تبديلها مسبقًا ، يجب إضافة .active
الفئة aria-pressed="true"
والسمة إلى button
نفسك.
أضف data-toggle="buttons"
إلى .btn-group
مربع الاختيار المحتوي أو مدخلات الراديو لتمكين التبديل في الأنماط الخاصة بكل منها.
.active
للخيارات المحددة مسبقًا ، يجب عليك إضافة .active
الفصل إلى المدخلات label
بنفسك.
إذا تم تحديث الحالة المحددة لزر مربع الاختيار دون إطلاق click
حدث على الزر (على سبيل المثال عبر <input type="reset">
أو عن طريق ضبط checked
خاصية الإدخال) ، فستحتاج إلى تبديل .active
الفصل على المدخلات label
بنفسك.
$().button('toggle')
يبدل حالة الدفع. يعطي الزر المظهر الذي تم تنشيطه.
$().button('reset')
إعادة تعيين حالة الزر - تبديل النص بالنص الأصلي. هذه الطريقة غير متزامنة وتعود قبل اكتمال إعادة التعيين بالفعل.
$().button(string)
مبادلة النص بأي حالة نصية معرّفة بالبيانات.
مكون إضافي مرن يستخدم عددًا قليلاً من الفئات لسهولة تبديل السلوك.
يتطلب Collapse تضمين المكوِّن الإضافي الانتقالات في إصدار Bootstrap الخاص بك.
انقر فوق الأزرار أدناه لإظهار عنصر آخر وإخفائه عبر تغييرات الفئة:
.collapse
يخفي المحتوى.collapsing
يتم تطبيقه أثناء الانتقالات.collapse.in
يظهر المحتوىيمكنك استخدام ارتباط مع href
السمة ، أو زر مع data-target
السمة. في كلتا الحالتين ، data-toggle="collapse"
مطلوب.
قم بتمديد سلوك الطي الافتراضي لإنشاء أكورديون مع مكون اللوحة.
من الممكن أيضًا استبدال .panel-body
s بـ .list-group
s.
تأكد من الإضافة aria-expanded
إلى عنصر التحكم. تحدد هذه السمة بوضوح الحالة الحالية للعنصر القابل للطي لقارئات الشاشة والتقنيات المساعدة المماثلة. إذا تم إغلاق العنصر القابل للطي افتراضيًا ، فيجب أن يكون له قيمة aria-expanded="false"
. إذا قمت بتعيين العنصر القابل للطي ليتم فتحه افتراضيًا باستخدام in
الفئة ، فقم بتعيين aria-expanded="true"
عنصر التحكم بدلاً من ذلك. سيقوم المكون الإضافي تلقائيًا بتبديل هذه السمة بناءً على ما إذا كان العنصر القابل للطي قد تم فتحه أم لا.
بالإضافة إلى ذلك ، إذا كان عنصر التحكم الخاص بك يستهدف عنصرًا واحدًا قابلًا للطي - أي data-target
تشير السمة إلى id
محدد - يمكنك إضافة aria-controls
سمة إضافية إلى عنصر التحكم ، تحتوي على id
العنصر القابل للطي. تستخدم برامج قراءة الشاشة الحديثة والتقنيات المساعدة المماثلة هذه السمة لتزويد المستخدمين باختصارات إضافية للانتقال مباشرة إلى العنصر القابل للطي نفسه.
يستخدم ملحق الطي بضع فئات للتعامل مع الرفع الثقيل:
.collapse
يخفي المحتوى.collapse.in
يظهر المحتوى.collapsing
تتم إضافته عند بدء الانتقال ، وإزالته عند الانتهاءيمكن العثور على هذه الفئات في component-animations.less
.
ما عليك سوى إضافة data-toggle="collapse"
و data-target
إلى العنصر لتعيين التحكم تلقائيًا في عنصر قابل للطي. تقبل السمة data-target
محدد CSS لتطبيق الطي عليه. تأكد من إضافة الفصل collapse
إلى العنصر القابل للطي. إذا كنت ترغب في فتحه افتراضيًا ، فأضف فئة إضافية in
.
لإضافة إدارة مجموعة تشبه الأكورديون إلى عنصر تحكم قابل للطي ، أضف سمة البيانات data-parent="#selector"
. الرجوع إلى العرض التوضيحي لرؤية هذا في العمل.
التمكين يدويًا باستخدام:
يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-
، كما في data-parent=""
.
اسم | يكتب | إفتراضي | وصف |
---|---|---|---|
الأبوين | محدد | خاطئة | إذا تم توفير محدد ، فسيتم إغلاق جميع العناصر القابلة للطي ضمن العنصر الرئيسي المحدد عند عرض هذا العنصر القابل للطي. (على غرار سلوك الأكورديون التقليدي - هذا يعتمد على panel الطبقة) |
تبديل | قيمة منطقية | حقيقي | تبديل العنصر القابل للطي عند الاستدعاء |
.collapse(options)
ينشط المحتوى الخاص بك كعنصر قابل للطي. يقبل الخيارات الاختيارية object
.
.collapse('toggle')
تبديل عنصر قابل للطي إلى معروض أو مخفي. يعود إلى المتصل قبل إظهار العنصر القابل للطي أو إخفاؤه (أي قبل وقوع الحدث shown.bs.collapse
أو ).hidden.bs.collapse
.collapse('show')
يظهر عنصرًا قابلًا للطي. يعود إلى المتصل قبل أن يظهر العنصر القابل للطي بالفعل (أي قبل shown.bs.collapse
وقوع الحدث).
.collapse('hide')
يخفي العنصر القابل للطي. يعود إلى المتصل قبل أن يتم إخفاء العنصر القابل للطي (أي قبل hidden.bs.collapse
وقوع الحدث).
تعرض فئة طي Bootstrap بعض الأحداث للتثبيت في وظيفة الانهيار.
نوع الحدث | وصف |
---|---|
show.bs.capse | يتم تشغيل هذا الحدث فورًا عند show استدعاء أسلوب المثيل. |
معروض. bs. الانهيار | يتم تشغيل هذا الحدث عندما يصبح عنصر الطي مرئيًا للمستخدم (سينتظر حتى تكتمل انتقالات CSS). |
إخفاء. b. الانهيار | يتم تشغيل هذا الحدث فورًا عند hide استدعاء الأسلوب. |
مخفي. BS. طي | يتم تشغيل هذا الحدث عند إخفاء عنصر تصغير عن المستخدم (سينتظر حتى تكتمل انتقالات CSS). |
أحد مكونات عرض الشرائح للتنقل بين العناصر ، مثل الرف الدائري. الدوارات المتداخلة غير مدعومة.
مكوّن الرف الدائري بشكل عام غير متوافق مع معايير إمكانية الوصول. إذا كنت تريد أن تكون متوافقًا ، فيرجى التفكير في الخيارات الأخرى لتقديم المحتوى الخاص بك.
يستخدم Bootstrap CSS3 حصريًا في الرسوم المتحركة الخاصة به ، لكن Internet Explorer 8 & 9 لا يدعم خصائص CSS الضرورية. وبالتالي ، لا توجد رسوم متحركة لانتقال الشرائح عند استخدام هذه المتصفحات. لقد قررنا عمدًا عدم تضمين العناصر الاحتياطية المستندة إلى jQuery للانتقالات.
يجب .active
إضافة الفصل إلى إحدى الشرائح. وبخلاف ذلك ، لن تكون الرف الدائري مرئيًا.
ليست هناك حاجة بالضرورة للفئات والفئات للضوابط .glyphicon .glyphicon-chevron-left
. .glyphicon .glyphicon-chevron-right
يوفر Bootstrap وكبدائل .icon-prev
يونيكود .icon-next
بسيطة.
أضف تسميات توضيحية إلى الشرائح بسهولة باستخدام .carousel-caption
العنصر الموجود داخل أي منها .item
. ضع أي HTML اختياري داخله ، وستتم محاذاته وتنسيقه تلقائيًا.
تتطلب الرف الدائري استخدام id
حاوية خارجية (the .carousel
) حتى تعمل عناصر التحكم في الرف الدائري بشكل صحيح. عند إضافة العديد من الدوارات ، أو عند تغيير الرف الدائري id
، تأكد من تحديث عناصر التحكم ذات الصلة.
استخدم سمات البيانات للتحكم بسهولة في موضع الرف الدائري. data-slide
يقبل الكلمات الأساسية prev
أو next
، مما يغير موضع الشريحة بالنسبة إلى موضعها الحالي. بدلاً من ذلك ، استخدم data-slide-to
لتمرير فهرس شريحة أولي إلى الرف الدائري data-slide-to="2"
، والذي يغير موضع الشريحة إلى فهرس معين يبدأ بـ 0
.
تُستخدم data-ride="carousel"
السمة لوضع علامة على الرف الدائري باعتباره متحركًا بدءًا من تحميل الصفحة. لا يمكن استخدامه مع (مكرر وغير ضروري) تهيئة JavaScript صريحة لنفس المكتبة.
الاتصال الدائري يدويًا باستخدام:
يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-
، كما في data-interval=""
.
اسم | يكتب | إفتراضي | وصف |
---|---|---|---|
فترة | رقم | 5000 | مقدار الوقت الذي يستغرقه التأخير بين تدوير عنصر تلقائيًا. إذا كانت القيمة خاطئة ، فلن تدور دائرة الرف الدائري تلقائيًا. |
وقفة | سلسلة | لا شيء | "يحوم" | في حالة الضبط على "hover" ، يتم إيقاف تشغيل دائرة العرض مؤقتًا واستئناف mouseenter تشغيلها mouseleave . إذا تم null التعيين على ، فلن يؤدي التمرير فوق الرف الدائري إلى إيقافه مؤقتًا. |
طَوّق | قيمة منطقية | حقيقي | ما إذا كان يجب أن يدور الرف الدائري بشكل مستمر أو يتوقف بشدة. |
لوحة المفاتيح | قيمة منطقية | حقيقي | ما إذا كان يجب أن يتفاعل الرف الدائري مع أحداث لوحة المفاتيح أم لا. |
.carousel(options)
يقوم بتهيئة الرف الدائري بخيارات اختيارية object
ويبدأ التنقل بين العناصر.
.carousel('cycle')
يتنقل عبر عناصر الدائرة من اليسار إلى اليمين.
.carousel('pause')
يوقف الدائرة من ركوب الدراجات بين العناصر.
.carousel(number)
يقوم بتدوير الرف الدائري إلى إطار معين (قائم على 0 ، على غرار المصفوفة).
.carousel('prev')
دورات إلى العنصر السابق.
.carousel('next')
دورات إلى العنصر التالي.
يعرض الفصل الدائري في Bootstrap حدثين للتثبيت في وظيفة الرف الدائري.
كلا الحدثين لهما الخصائص الإضافية التالية:
direction
: الاتجاه الذي تتحرك فيه دائرة الصور (إما "left"
أو "right"
).relatedTarget
: عنصر DOM الذي يتم وضعه في مكانه كعنصر نشط.يتم إطلاق جميع أحداث الرف الدائري على الرف الدائري نفسه (على سبيل المثال ، في <div class="carousel">
).
نوع الحدث | وصف |
---|---|
منزلق. bs. كاروسيل | يتم تشغيل هذا الحدث فورًا عند slide استدعاء طريقة المثيل. |
slid.bs. كاروسيل | يتم تشغيل هذا الحدث عندما يكمل العرض الدائري انتقال الشريحة الخاص به. |
position: fixed;
يتم التبديل بين تشغيل وإيقاف المكوِّن الإضافي ، مما يؤدي إلى محاكاة التأثير الموجود في position: sticky;
. يعد التنقل الفرعي الموجود على اليمين عرضًا توضيحيًا مباشرًا للملحق الإضافي.
استخدم الملحق الإضافي عبر سمات البيانات أو يدويًا باستخدام JavaScript الخاص بك. في كلتا الحالتين ، يجب عليك توفير CSS لتحديد موضع وعرض المحتوى الذي تم إلصاقه.
ملاحظة: لا تستخدم المكوِّن الإضافي الملحق على عنصر مضمن في عنصر تم وضعه نسبيًا ، مثل العمود المسحوب أو المدفوع ، بسبب خطأ في عرض Safari .
يبدل الملحق الإضافي بين ثلاث فئات ، يمثل كل منها حالة معينة: .affix
و .affix-top
و .affix-bottom
. يجب عليك توفير الأنماط ، باستثناء position: fixed;
on .affix
، لهذه الفئات بنفسك (مستقلة عن هذا المكون الإضافي) للتعامل مع المواضع الفعلية.
إليك كيفية عمل ملحق اللاحقة:
.affix-top
للإشارة إلى أن العنصر في أعلى موضع له. في هذه المرحلة ، لا يلزم تحديد موضع CSS..affix
يستبدله .affix-top
ويعين position: fixed;
(يتم توفيره بواسطة CSS الخاص بـ Bootstrap)..affix
الماضي .affix-bottom
. نظرًا لأن عمليات الإزاحة اختيارية ، فإن الإعداد يتطلب منك تعيين CSS المناسب. في هذه الحالة ، أضف position: absolute;
عند الضرورة. يستخدم المكون الإضافي سمة البيانات أو خيار JavaScript لتحديد مكان وضع العنصر من هناك.اتبع الخطوات المذكورة أعلاه لتعيين CSS لأي من خيارات الاستخدام أدناه.
لإضافة سلوك لصق لأي عنصر بسهولة ، ما عليك سوى إضافة data-spy="affix"
العنصر الذي تريد التجسس عليه. استخدم الإزاحات لتحديد وقت تبديل تثبيت عنصر.
استدعاء الملحق الإضافي عبر JavaScript:
يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-
، كما في data-offset-top="200"
.
اسم | يكتب | إفتراضي | وصف |
---|---|---|---|
عوض | رقم | وظيفة | هدف | 10 | بكسل للإزاحة من الشاشة عند حساب موضع التمرير. إذا تم توفير رقم واحد ، فسيتم تطبيق الإزاحة في كلا الاتجاهين العلوي والسفلي. لتوفير إزاحة فريدة وسفلية وأعلى ، ما عليك سوى توفير كائن offset: { top: 10 } أو offset: { top: 10, bottom: 5 } . استخدم دالة عندما تريد حساب الإزاحة ديناميكيًا. |
استهداف | المحدد | عقدة | عنصر jQuery | window الكائن _ |
يحدد العنصر المستهدف من اللاحقة. |
.affix(options)
ينشط المحتوى الخاص بك كمحتوى مثبت. يقبل الخيارات الاختيارية object
.
.affix('checkPosition')
يعيد حساب حالة اللصق بناءً على أبعاد العناصر ذات الصلة وموضعها وموضع التمرير. تتم إضافة .affix
، .affix-top
و ، .affix-bottom
والفئات إلى المحتوى الملصق أو إزالتها منه وفقًا للحالة الجديدة. يجب استدعاء هذه الطريقة كلما تم تغيير أبعاد المحتوى الملصق أو العنصر الهدف ، لضمان الوضع الصحيح للمحتوى الملصق.
يكشف ملحق Bootstrap الإضافي عن بعض الأحداث للتثبيت في وظيفة الملحقة.
نوع الحدث | وصف |
---|---|
الملحق باء | يتم تشغيل هذا الحدث مباشرة قبل لصق العنصر. |
الملصقة. bs.affix | يتم تشغيل هذا الحدث بعد لصق العنصر. |
أعلى الملصق bs.affix | يتم تشغيل هذا الحدث مباشرة قبل أن يتم لصق العنصر في الأعلى. |
الملصقة أعلى. bs.affix | يتم تشغيل هذا الحدث بعد تثبيت العنصر في الأعلى. |
الملحق السفلي | يتم تشغيل هذا الحدث مباشرة قبل أن يتم لصق العنصر في الأسفل. |
الملصقة أسفل. bs.affix | يتم تشغيل هذا الحدث بعد لصق العنصر في الأسفل. |