فردي أو مجمعة

يمكن تضمين المكونات الإضافية بشكل فردي (على الرغم من أن بعضها يتطلب تبعيات) ، أو كلها مرة واحدة. يحتوي كل من bootstrap.js و bootstrap.min.js على جميع المكونات الإضافية في ملف واحد.

سمات البيانات

يمكنك استخدام جميع ملحقات Bootstrap فقط من خلال واجهة برمجة تطبيقات العلامات دون كتابة سطر واحد من JavaScript. هذه هي واجهة برمجة التطبيقات من الدرجة الأولى من Bootstrap ويجب أن تكون الاعتبار الأول عند استخدام مكون إضافي.

ومع ذلك ، قد يكون من المرغوب في بعض المواقف إيقاف تشغيل هذه الوظيفة. لذلك ، نوفر أيضًا القدرة على تعطيل واجهة برمجة تطبيقات سمة البيانات عن طريق إلغاء ربط جميع الأحداث الموجودة على مساحة اسم الجسم بـ "" واجهة برمجة تطبيقات البيانات ". هذا يشبه هذا:

$ ( "جسم" ). إيقاف ( ".data-api" )

بدلاً من ذلك ، لاستهداف مكون إضافي معين ، ما عليك سوى تضمين اسم المكون الإضافي كمساحة اسم إلى جانب مساحة اسم data-api مثل هذا:

$ ( "جسم" ). متوقف ( ".alert.data-api" )

API برمجي

نعتقد أيضًا أنه يجب أن تكون قادرًا على استخدام جميع ملحقات Bootstrap فقط من خلال JavaScript API. جميع واجهات برمجة التطبيقات العامة هي طرق مفردة وقابلة للتسلسل ، وتعيد المجموعة التي تم التصرف بناءً عليها.

$ ( ".btn.danger" ). زر ( "تبديل" ). addClass ( "سمين" )

يجب أن تقبل جميع التوابع كائن خيارات اختياري ، أو سلسلة تستهدف طريقة معينة ، أو لا شيء (الذي يبدأ مكونًا إضافيًا بسلوك افتراضي):

$ ( "#myModal" ). مشروط () // مهيأ بالافتراضيات                       
$ ( "#myModal" ). مشروط ({ keyboard : false }) // مهيأ بدون لوحة مفاتيح     
$ ( "#myModal" ). modal ( 'show' ) // يهيئ ويستدعي إظهار على الفور                

يعرض كل مكون إضافي أيضًا المُنشئ الخام الخاص به في خاصية "المُنشئ" $.fn.popover.Constructor:. إذا كنت ترغب في الحصول على مثيل مكون إضافي معين ، فاسترجعه مباشرةً من عنصر $('[rel=popover]').data('popover'):.

لا تعارض

في بعض الأحيان يكون من الضروري استخدام ملحقات Bootstrap مع أطر عمل أخرى لواجهة المستخدم. في هذه الحالات ، يمكن أن تحدث تضاربات مساحة الاسم أحيانًا. إذا حدث هذا ، فيمكنك الاتصال .noConflictعلى المكون الإضافي الذي ترغب في إرجاع قيمته.

var bootstrapButton = $ . الجبهة الوطنية . زر . noConflict () // إرجاع $ .fn.button إلى القيمة المعينة مسبقًا 
$ . الجبهة الوطنية . bootstrapBtn = bootstrapButton             // أعط $ (). bootstrapBtn وظيفة التمهيد

الأحداث

يوفر Bootstrap أحداثًا مخصصة لمعظم الإجراءات الفريدة للمكون الإضافي. بشكل عام ، تأتي هذه في صيغة المصدر والماضي - حيث يتم تشغيل المصدر (على سبيل المثال show) في بداية الحدث ، ويتم تشغيل شكل الفاعل الماضي ( shownعلى سبيل المثال) عند الانتهاء من إجراء ما.

توفر جميع أحداث المصدر وظيفة منع التشغيل الافتراضي. يوفر هذا القدرة على إيقاف تنفيذ الإجراء قبل أن يبدأ.

$ ( "#myModal" ). on ( 'show' ، function ( e ) {   
    إذا (! البيانات ) إرجاع البريد . PreventionDefault () // يوقف عرض الوسائط   
})

حول التحولات

للحصول على تأثيرات انتقال بسيطة ، قم بتضمين bootstrap-transfer.js مرة واحدة إلى جانب ملفات JS الأخرى. إذا كنت تستخدم ملف bootstrap.js المترجم (أو المصغر) ، فلا داعي لتضمينه - فهو موجود بالفعل.

استخدم حالات

بعض الأمثلة على البرنامج المساعد الانتقالي:

• الانزلاق أو التلاشي في الوسائط
• علامات تبويب تتلاشى
• تلاشي التنبيهات
• انزلاق الألواح الدائرية

أمثلة

الوسائط هي مطالبات حوار مبسطة ومرنة مع الحد الأدنى من الوظائف المطلوبة والافتراضيات الذكية.

مثال ثابت

نموذج تم تقديمه مع رأس ونص ومجموعة من الإجراءات في التذييل.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "إغلاق" data-رفض = "modal" aria-hidden = "true" > & times؛ </button>    
    <h3> رأس مشروط </ h3>
  </div>
  <div class = "modal-body" > 
    <p> جسد واحد جميل ... </ p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn"> إغلاق </a> _  
    <a href = "#" class = "btn btn-primary"> حفظ التغييرات </a>  
  </div>
</div>

عرض حي

تبديل مشروط عبر JavaScript بالنقر فوق الزر أدناه. سوف ينزلق لأسفل ويتلاشى للداخل من أعلى الصفحة.

<! - زر لتشغيل مشروط ->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal"> إطلاق النموذج التجريبي </a>    
 
<! - مشروط ->
<div id = "myModal" class = "تلاشي إخفاء مشروط" tabindex = "-1" role = " اور " aria-labelledby = " myModalLabel " aria-hidden = " true " >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-رفض = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > رأس مشروط </ h3> 
  </div>
  <div class = "modal-body" > 
    <p> جسد واحد جميل ... </ p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data- رفض = "modal" aria-hidden = "true" > إغلاق </ زر>   
    <button class = "btn btn-primary" > حفظ التغييرات </ زر> 
  </div>
</div>

إستعمال

عبر سمات البيانات

تنشيط مشروط دون كتابة JavaScript. قم بتعيين data-toggle="modal"عنصر تحكم ، مثل زر ، مع data-target="#foo"أو href="#foo"لاستهداف نمط محدد للتبديل.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > نمط التشغيل </ زر>   

عبر JavaScript

استدعاء مشروط مع معرف myModalبسطر واحد من JavaScript:

$ ( "#myModal" ). مشروط ( خيارات )

خيارات

يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-، كما في data-backdrop="".

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

طُرق

.modal (خيارات)

ينشط المحتوى الخاص بك كمشروط. يقبل الخيارات الاختيارية object.

$ ( "#myModal" ). مشروط ({
  لوحة المفاتيح : خطأ 
})

.modal ("تبديل")

يبدل مشروط يدويًا.

$ ( "#myModal" ). مشروط ( "تبديل" )

.modal ("show")

يفتح مشروط يدويا.

$ ( "#myModal" ). مشروط ( "عرض" )

.modal ("إخفاء")

يدويا يخفي مشروط.

$ ( "#myModal" ). مشروط ( "إخفاء" )

الأحداث

تكشف فئة مشروط Bootstrap عن بعض الأحداث للتثبيت في وظائف مشروطة.

$ ( "#myModal" ). on ( 'hidden' ، function () {   
  // قم بعمل ما…
})

أمثلة

أضف قوائم منسدلة إلى أي شيء تقريبًا باستخدام هذا المكون الإضافي البسيط ، بما في ذلك شريط التنقل وعلامات التبويب والحبوب.

داخل نافبار

ضمن علامات التبويب

إستعمال

عبر سمات البيانات

أضف data-toggle="dropdown"إلى ارتباط أو زر لتبديل القائمة المنسدلة.

<div class = "dropdown" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#"> مشغل القائمة المنسدلة </a>   
  <ul class = "القائمة المنسدلة" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

للحفاظ على عناوين URL سليمة ، استخدم data-targetالسمة بدلاً من href="#".

<div class = "dropdown" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html"> _      
    اسقاط
    <b class = "caret" > </b> 
  </a>
  <ul class = "القائمة المنسدلة" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

عبر JavaScript

استدعاء القوائم المنسدلة عبر JavaScript:

$ ( '.dropdown-toggle' ). قائمة منسدلة ()

خيارات

لا أحد

طُرق

$ (). القائمة المنسدلة ("تبديل")

واجهة برمجة تطبيقات برمجية لتبديل القوائم في شريط التنقل المحدد أو التنقل المبوب.

المثال في نافبار

المكون الإضافي ScrollSpy مخصص لتحديث أهداف التنقل تلقائيًا بناءً على موضع التمرير. قم بالتمرير في المنطقة أسفل شريط التنقل وشاهد تغيير الفصل النشط. سيتم أيضًا تمييز العناصر الفرعية المنسدلة.

إستعمال

عبر سمات البيانات

لإضافة سلوك التمرير بسهولة إلى شريط التنقل العلوي ، ما عليك سوى إضافة data-spy="scroll"العنصر الذي تريد التجسس عليه (غالبًا ما يكون هذا هو الجسم) data-target=".navbar"وتحديد التنقل الذي تريد استخدامه. ستحتاج إلى استخدام scrollspy مع أحد .navالمكونات.

<body data-spy = "scroll" data-target = ".navbar" > ... </body>  

عبر JavaScript

استدعاء scrollspy عبر JavaScript:

$ ( "#navbar" ). scrollspy ()

طُرق

.scrollspy ("تحديث")

عند استخدام scrollspy مع إضافة عناصر أو إزالتها من DOM ، ستحتاج إلى استدعاء طريقة التحديث كما يلي:

$ ( '[data-spy = "scroll"]' ). كل ( وظيفة () {  
  var $ spy = $ ( this ). scrollspy ( "تحديث" )
}) ؛

خيارات

يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-، كما في data-offset="".

الأحداث

علامات التبويب سبيل المثال

أضف وظيفة علامات تبويب سريعة وديناميكية للانتقال عبر أجزاء المحتوى المحلي ، حتى عبر القوائم المنسدلة.

إستعمال

تمكين علامات التبويب القابلة للجدولة عبر JavaScript (يجب تنشيط كل علامة تبويب على حدة):

$ ( '#myTab a' ). انقر ( الوظيفة ( هـ ) {  
  ه . PreventionDefault () ؛
  $ ( هذا ). علامة التبويب ( "إظهار" ) ؛
})

يمكنك تنشيط علامات التبويب الفردية بعدة طرق:

$ ( '#myTab a [href = "# ملف شخصي"]' ). علامة التبويب ( "إظهار" ) ؛ // حدد علامة التبويب بالاسم 
$ ( '#myTab a: first' ). علامة التبويب ( "إظهار" ) ؛ // حدد علامة التبويب الأولى 
$ ( '#myTab a: last' ). علامة التبويب ( "إظهار" ) ؛ // حدد علامة التبويب الأخيرة 
$ ( '#myTab li: eq (2) a' ). علامة التبويب ( "إظهار" ) ؛ // حدد علامة التبويب الثالثة (0 مفهرسة) 

وضع علامة على

يمكنك تنشيط علامة تبويب أو التنقل على الأقراص دون كتابة أي JavaScript بمجرد تحديد عنصر data-toggle="tab"أو data-toggle="pill"على أحد العناصر. ستؤدي إضافة الفئات navو إلى علامة التبويب إلى تطبيق نمط علامة تبويب Bootstrap.nav-tabsul

<ul class = "nav nav-tabs" > 
  <li> <a href = "#home" data-toggle = "tab"> الصفحة الرئيسية </a> </li>  
  <li> <a href = "#profile" data-toggle = "tab"> الملف الشخصي </a> < /li>  
  <li> <a href = "#messages" data-toggle = "tab"> الرسائل </a> < /li>  
  <li> <a href = "#settings" data-toggle = "tab"> الإعدادات </a> < /li>  
</ul>

طُرق

علامة التبويب $ ()

ينشط عنصر علامة تبويب وحاوية محتوى. يجب أن تحتوي علامة التبويب على عقدة حاوية data-targetأو تستهدفها في DOM.href

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" > <a href = "#home"> الصفحة الرئيسية </a> </li>  
  <li> <a href = "#profile"> الملف الشخصي </a> < /li> 
  <li> <a href = "#messages"> الرسائل </a> < /li> 
  <li> <a href = "#settings"> الإعدادات </a> < /li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( الوظيفة () {  
    $ ( '#myTab a: last' ). علامة التبويب ( "إظهار" ) ؛
  })
</script>

الأحداث

$ ( 'a [data-toggle = "tab"]' ). تشغيل ( "معروضة" ، الوظيفة ( هـ ) {   
  ه . الهدف // علامة التبويب المنشط
  ه . relatedTarget // علامة التبويب السابقة
})

أمثلة

مستوحى من البرنامج المساعد jQuery.tipsy الممتاز الذي كتبه Jason Frame ؛ تلميحات الأدوات هي نسخة محدثة لا تعتمد على الصور وتستخدم CSS3 للرسوم المتحركة وسمات البيانات لتخزين العنوان المحلي.

لأسباب تتعلق بالأداء ، تم تمكين تلميح الأدوات وواجهة برمجة التطبيقات المنبثقة ، مما يعني أنه يجب عليك تهيئتهما بنفسك .

مرر مؤشر الماوس فوق الروابط أدناه لمشاهدة تلميحات الأدوات:

أربعة اتجاهات

تلميحات الأدوات في مجموعات الإدخال

عند استخدام التلميحات والأدوات المنبثقة مع مجموعات إدخال Bootstrap ، سيتعين عليك تعيين الخيار container(الموثق أدناه) لتجنب الآثار الجانبية غير المرغوب فيها.

إستعمال

تشغيل تلميح الأداة عبر JavaScript:

$ ( "# مثال" ). تلميح الأدوات ( خيارات )

خيارات

يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-، كما في data-animation="".

وضع علامة على

<a href = "#" data-toggle = "tooltip" title = "first tooltip"> مرر الماوس فوقي </a>   

طُرق

$ (). تلميح الأدوات (خيارات)

يرفق معالج تلميح بمجموعة عنصر.

.tooltip ("show")

يكشف عن تلميح أداة عنصر.

$ ( "# عنصر" ). تلميح أداة ( "عرض" )

.tooltip ("إخفاء")

يخفي تلميح أداة عنصر.

$ ( "# عنصر" ). تلميح الأدوات ( "إخفاء" )

.tooltip ("تبديل")

يبدل تلميح أداة عنصر.

$ ( "# عنصر" ). تلميح الأدوات ( "تبديل" )

.tooltip ("إتلاف")

يخفي تلميح عنصر ويتلفه.

$ ( "# عنصر" ). تلميح الأدوات ( "تدمير" )

أمثلة

أضف تراكبات صغيرة من المحتوى ، مثل تلك الموجودة على iPad ، إلى أي عنصر يحتوي على معلومات ثانوية. قم بالمرور فوق الزر لتشغيل النافذة المنبثقة. يتطلب تضمين تلميح الأدوات .

انبثاق ثابت

تتوفر أربعة خيارات: محاذاة لأعلى ولليمين ولأسفل ولليسار.

لا يتم عرض أي ترميز على أنه يتم إنشاء العناصر المنبثقة من جافا سكريبت والمحتوى داخل dataالسمة.

عرض حي

أربعة اتجاهات

إستعمال

تمكين العناصر المنبثقة عبر JavaScript:

$ ( "# مثال" ). popover ( خيارات )

خيارات

يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-، كما في data-animation="".

وضع علامة على

لأسباب تتعلق بالأداء ، يتم الاشتراك في كل من Tooltip و Popover data-apis. إذا كنت ترغب في استخدامهما ، فما عليك سوى تحديد خيار محدد.

طُرق

$ (). popover (خيارات)

يقوم بتهيئة العناصر المنبثقة لمجموعة عنصر.

.popover ("show")

يكشف عن العناصر المنبثقة.

$ ( "# عنصر" ). popover ( "show" )

.popover ("إخفاء")

يخفي العناصر المنبثقة.

$ ( "# عنصر" ). popover ( "إخفاء" )

.popover ("تبديل")

يبدل العناصر المنبثقة.

$ ( "# عنصر" ). popover ( "تبديل" )

.popover ("إتلاف")

يخفي العنصر المنبثق ويدمره.

$ ( "# عنصر" ). popover ( "تدمير" )

مثال على التنبيهات

أضف وظيفة الرفض إلى جميع رسائل التنبيه باستخدام هذا البرنامج المساعد.

إستعمال

تفعيل رفض تنبيه عبر JavaScript:

$ ( ".alert" ). تنبيه ()

وضع علامة على

ما عليك سوى الإضافة data-dismiss="alert"إلى زر الإغلاق لإعطاء وظيفة تنبيه قريبة تلقائيًا.

<a class = "close" data-dismiss = "alert" href = "#"> & times؛ </a>   

طُرق

$ (). alert ()

يلف جميع التنبيهات بوظائف قريبة. لتحريك تنبيهاتك عند إغلاقها ، تأكد من أنها تحتوي على " .fadeو " .inفئة مطبقة عليها بالفعل.

.alert ("close")

يغلق تنبيهًا.

$ ( ".alert" ). تنبيه ( "قريب" )

الأحداث

تكشف فئة التنبيه في Bootstrap عن بعض الأحداث للتثبيت في وظائف التنبيه.

$ ( "# تنبيهي" ). ربط ( "مغلق" ، وظيفة () {   
  // قم بعمل ما…
})

يستخدم المثال

أنجز المزيد باستخدام الأزرار. حالات زر التحكم أو إنشاء مجموعات من الأزرار لمزيد من المكونات مثل أشرطة الأدوات.

جليل

إضافة data-loading-text="Loading..."لاستخدام حالة التحميل على زر.

<button type = "button" class = "btn btn-primary" data-loading-text = "جارٍ التحميل ..." > حالة التحميل </ Button>   

تبديل واحد

أضف data-toggle="button"لتنشيط التبديل على زر واحد.

<button type = "button" class = "btn btn-primary" data-toggle = "button" > تبديل فردي </ زر>   

خانة اختيار

أضف data-toggle="buttons-checkbox"لتبديل نمط مربع الاختيار في مجموعة btn.

<div class = "btn-group" data-toggle = "keys-checkbox" >  
  <button type = "button" class = "btn btn-primary" > يسار </ زر>  
  <button type = "button" class = "btn btn-primary" > الأوسط </ زر>  
  <button type = "button" class = "btn btn-primary" > يمين </ زر>  
</div>

مذياع

أضف data-toggle="buttons-radio"لتبديل نمط الراديو في مجموعة btn.

<div class = "btn-group" data-toggle = "keys-radio" >  
  <button type = "button" class = "btn btn-primary" > يسار </ زر>  
  <button type = "button" class = "btn btn-primary" > الأوسط </ زر>  
  <button type = "button" class = "btn btn-primary" > يمين </ زر>  
</div>

إستعمال

تمكين الأزرار عبر JavaScript:

$ ( ".nav-tabs" ). زر ()

وضع علامة على

تعد سمات البيانات جزءًا لا يتجزأ من المكون الإضافي للزر. تحقق من رمز المثال أدناه للتعرف على أنواع الترميز المختلفة.

خيارات

لا أحد

طُرق

$ (). زر ("تبديل")

يبدل حالة الدفع. يعطي الزر المظهر الذي تم تنشيطه.

<button type = "button" class = "btn" data-toggle = "button" > … </button>    

زر $ (). ("تحميل")

يضبط حالة الزر على التحميل - يعطل الزر ويتبادل النص لتحميل النص. يجب تحديد نص التحميل على عنصر الزر باستخدام سمة البيانات data-loading-text.

<button type = "button" class = "btn" data-loading-text = "تحميل الأشياء ..." > ... </button>    

$ (). زر ("إعادة تعيين")

إعادة تعيين حالة الزر - تبديل النص بالنص الأصلي.

$ (). زر (سلسلة نصية)

إعادة تعيين حالة الزر - لمبادلة النص بأي حالة نصية محددة بالبيانات.

<button type = "button" class = "btn" data-complete-text = "finish!" > ... </button>    
<script>
  $ ( ".btn" ). زر ( "مكتمل" )
</script>

حول

احصل على أنماط أساسية ودعم مرن للمكونات القابلة للطي مثل الأكورديون والتنقل.

* يتطلب تضمين البرنامج المساعد Transitions.

مثال الأكورديون

باستخدام ملحق الطي ، قمنا ببناء أداة نمط أكورديون بسيطة:

<div class = "أكورديون" id = "أكورديون 2" >  
  <div class = "accordion-group" > 
    <div class = "أكورديون-رأس" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne"> _    
        عنصر المجموعة القابل للطي # 1
      </a>
    </div>
    <div id = "collapseOne" class = "accordion-body collapse in" >  
      <div class = "أكورديون-داخلي" > 
        الرسوم المتحركة المبتذلة ...
      </div>
    </div>
  </div>
  <div class = "accordion-group" > 
    <div class = "أكورديون-رأس" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo"> _    
        عنصر المجموعة القابل للطي # 2
      </a>
    </div>
    <div id = "collapseTwo" class = "accordion-body collapse" >  
      <div class = "أكورديون-داخلي" > 
        الرسوم المتحركة المبتذلة ...
      </div>
    </div>
  </div>
</div>
...

يمكنك أيضًا استخدام المكون الإضافي بدون ترميز الأكورديون. قم بعمل زر للتبديل بين توسيع وانهيار عنصر آخر.

<button type = "button" class = "btn btn-خطر" data-toggle = "collapse" data-target = "#demo" >    
  بسيطة قابلة للطي
</button>
 
<div id = "demo" class = "collapse in" > … </div>  

إستعمال

عبر سمات البيانات

ما عليك سوى إضافة data-toggle="collapse"عنصر data-targetإلى عنصر لتعيين التحكم تلقائيًا في عنصر قابل للطي. تقبل السمة data-targetمحدد css لتطبيق الطي عليه. تأكد من إضافة الفصل collapseإلى العنصر القابل للطي. إذا كنت ترغب في فتحه افتراضيًا ، فأضف فئة إضافية in.

لإضافة إدارة مجموعة تشبه الأكورديون إلى عنصر تحكم قابل للطي ، أضف سمة البيانات data-parent="#selector". الرجوع إلى العرض التوضيحي لرؤية هذا في العمل.

عبر JavaScript

التمكين يدويًا باستخدام:

$ ( ".collapse" ). انهيار ()

خيارات

يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-، كما في data-parent="".

طُرق

.collapse (خيارات)

ينشط المحتوى الخاص بك كعنصر قابل للطي. يقبل الخيارات الاختيارية object.

$ ( '#myCollapsible' ). انهيار ({
  تبديل : خطأ 
})

.collapse ("تبديل")

تبديل عنصر قابل للطي إلى معروض أو مخفي.

.collapse ("عرض")

يظهر عنصرًا قابلًا للطي.

.collapse ("إخفاء")

يخفي عنصرًا قابلًا للطي.

الأحداث

تعرض فئة طي Bootstrap بعض الأحداث للتثبيت في وظيفة الانهيار.

$ ( '#myCollapsible' ). on ( 'hidden' ، function () {   
  // قم بعمل ما…
})

مثال دائري

يُظهر عرض الشرائح أدناه مكونًا إضافيًا ومكونًا عامًا للتنقل بين عناصر مثل الرف الدائري.

التسمية المصغرة الأولى

Cras justo odio، dapibus ac facilisis in، egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies Vehiclesicula ut id elit.

تسمية الصورة المصغرة الثانية

Cras justo odio، dapibus ac facilisis in، egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies Vehiclesicula ut id elit.

تسمية الصورة المصغرة الثالثة

Cras justo odio، dapibus ac facilisis in، egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies Vehiclesicula ut id elit.

‹ ›

<div id = "myCarousel" class = "carousel slide" >  
  <ol class = "carousel-sources" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" > </li>   
    <li data-target = "#myCarousel" data-slide-to = "1" > </li>  
    <li data-target = "#myCarousel" data-slide-to = "2" > </li>  
  </ol>
  <! - عناصر المكتبة ->
  <div class = "carousel-inner" > 
    <div class = "active item" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <! - التنقل الدائري ->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev"> & lsaquo؛ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next"> & rsaquo ؛ </a>   
</div>

إستعمال

عبر سمات البيانات

استخدم سمات البيانات للتحكم بسهولة في موضع الرف الدائري. data-slideيقبل الكلمات الأساسية prevأو next، مما يغير موضع الشريحة بالنسبة إلى موضعها الحالي. بدلاً من ذلك ، استخدم data-slide-toلتمرير فهرس شريحة خام إلى الرف الدائري data-slide-to="2"، والذي يقفز من موضع الشريحة إلى فهرس معين يبدأ بـ 0.

عبر JavaScript

الاتصال الدائري يدويًا باستخدام:

$ ( ". carousel" ). دائري ()

خيارات

يمكن تمرير الخيارات عبر سمات البيانات أو JavaScriptz. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-، كما في data-interval="".

طُرق

.carousel (خيارات)

يقوم بتهيئة الرف الدائري بخيارات اختيارية objectويبدأ التنقل بين العناصر.

$ ( ". carousel" ). دائري ({
  الفاصل الزمني : 2000 
})

.carousel ("دورة")

يتنقل عبر عناصر الدائرة من اليسار إلى اليمين.

.carousel ("إيقاف مؤقت")

يوقف الدائرة من ركوب الدراجات بين العناصر.

.carousel (رقم)

يقوم بتدوير الرف الدائري إلى إطار معين (يستند إلى 0 ، على غرار المصفوفة).

.carousel ("prev")

دورات إلى العنصر السابق.

.carousel ("التالي")

دورات إلى العنصر التالي.

الأحداث

يعرض الفصل الدائري في Bootstrap حدثين للتثبيت في وظيفة الرف الدائري.

مثال

مكون إضافي أساسي وسهل الامتداد لإنشاء رؤوس كتابة أنيقة بسرعة مع إدخال أي نص في النموذج.

<input type = "text" data-provide = "typeahead" >  

ستحتاج إلى التعيين autocomplete="off"لمنع قوائم المتصفح الافتراضية من الظهور فوق القائمة المنسدلة لنوع Bootstrap.

إستعمال

عبر سمات البيانات

أضف سمات البيانات لتسجيل عنصر بوظيفة الكتابة كما هو موضح في المثال أعلاه.

عبر JavaScript

قم باستدعاء رأس الطباعة يدويًا باستخدام:

$ ( ".typeahead" ). نوع ()

خيارات

يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-، كما في data-source="".

طُرق

.typeahead (خيارات)

يقوم بتهيئة إدخال باستخدام رأس الطباعة.

مثال

يعد التنقل الفرعي الموجود على اليسار عرضًا توضيحيًا مباشرًا للملحق الإضافي.

إستعمال

عبر سمات البيانات

لإضافة سلوك لصق لأي عنصر بسهولة ، ما عليك سوى إضافة data-spy="affix"العنصر الذي تريد التجسس عليه. ثم استخدم الإزاحات لتحديد وقت تبديل تثبيت عنصر وإيقاف تشغيله.

<div data-spy = "affix" data-offset-top = "200" > ... </div>  

عبر JavaScript

استدعاء الملحق الإضافي عبر JavaScript:

$ ( "#navbar" ). اللاحق ()

خيارات

يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-، كما في data-offset-top="200".