دليل Bootstrap الأساسي

مكتبات Bootstrap

ملحق تأثير التدرج Bootstrap إنشاء صفحة الويب Bootstrap

مقدمة إلى الملحقات Bootstrap

في السابق مكونات التخطيط المكونات التي تم مناقشتها في هذا الفصل هي مجرد بداية. Bootstrap تأتي ب 12 مكتبة jQuery، توسع الوظائف وتضيف مزيد من التفاعل إلى الموقع. حتى لو لم تكن محترفًا في تطوير JavaScript، يمكنك البدء في تعلم مكتبات Bootstrap JavaScript. باستخدام API البيانات لـ Bootstrap (Bootstrap Data API)، يمكن تنشيط معظم المكتبات دون كتابة أي كود.

هناك طريقتان لتضمين مكتبات Bootstrap في الموقع:

التضمين المنفرداستخدام مكتبات Bootstrap المحددة *.js بعض المكتبات والتعريفات CSS تعتمد على مكتبات أخرى. إذا كنت تستخدم مكتبة بشكل منفرد، تأكد أولاً من فهم تعقيدات هذه المكتبات.
التجميع (并同时) تضمين الملفات.استخدام bootstrap.js أو النسخة المضغوطة bootstrap.min.jsلا تحاول تضمين هذين الملفين في نفس الوقت، لأن bootstrap.js و bootstrap.min.js ويشمل جميع المكتبات.

جميع المكتبات تعتمد على jQuery. لذا يجب أن يتم تضمين jQuery قبل ملفات المكتبات. يرجى زيارة bower.json للتحقق من إصدار jQuery الذي يدعمه Bootstrap حاليًا.

خصائص data

يمكنك استخدام جميع مكتبات Bootstrap بفضل API الخاص بـ data، دون كتابة سطر واحد من JavaScript. هذا هو API الأولي في Bootstrap، وهو يجب أن يكون الخيار المفضل لك.
لكن، في بعض الحالات قد تحتاج إلى إيقاف هذه الوظيفة. لذلك، قمنا بتوفير طريقة لإيقاف API الخاص بـ data، وهو إزالة data-api لتحديد المساحة النمطية وتعيين الأحداث على المستند. مثل ما يلي:
```
$(document).off('.data-api')
```
لإغلاق أداة معينة، فقط أضف اسم الأداة كنطاق اسمي أمام data-api، كما يلي:
```
$(document).off('.alert.data-api')
```

API البرمجة

نقدم واجهة API من النوع النقي للجميع أدوات Bootstrap. جميع APIs المفتوحة تدعم النداء الفردي أو النداء المتسلسل، وتعيد مجموعة العناصر التي يتم معالجتها (ملاحظة: بنفس الطريقة التي يستخدمها jQuery). على سبيل المثال:

$(".btn.danger").button("toggle").addClass("fat")

يمكن لكل طريقة قبول عنصر اختياري يحتوي على كائن الخيارات، أو نص يمثل طريقة معينة، أو بدون أي معلمات (في هذه الحالة، سيتم تحفيز الأداة بناءً على السلوك الافتراضي)، كما يلي:

// يُحفز بسلوك افتراضي
$("#myModal").modal()　　　　
　// يُحفز دون دعم لوحة المفاتيح　　　　　　　　　　　　　　　
$("#myModal").modal({ keyboard: false })　　
// يُحفز ويُطلق فورًا
$("#myModal").modal('show')

كل أداة في Constructor يُكشف عنه أيضًا في الخصائص عن بناءه الأصلي:$.fn.popover.Constructorإذا كنت ترغب في الحصول على مثال على أداة معينة، يمكنك الحصول عليها مباشرة من عنصر الصفحة:

　$('[rel=popover]').data('popover').

تجنب تصادم النطاقات الاسمية

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

// يعيد $.fn.button إلى القيمة التي كانت قبل التخصيص
var bootstrapButton = $.fn.button.noConflict()　
// يمنح $().bootstrapBtn وظيفة Bootstrap　　　　　　　　　　　　　　　　　　　　　　　　　　　
$.fn.bootstrapBtn = bootstrapButton

الحدث

Bootstrap تقدم أحداث مخصصة لسلوكيات الأدوات الخاصة بها. في العادة، هذه الأحداث تأتي بنوعين:

الجملة غير المحددة：سيتم إطلاق هذا عند بدء الحدث. على سبيل المثال مثال: عرضالجملة غير المحددة تقدم preventDefault وظيفة. مما يتيح إيقاف تنفيذ العمل قبل بدء الحدث.}
```
$('#myModal').on('show.bs.modal', function (e) {
// منع عرض نافذة التشغيل
　　if (!data) return e.preventDefault()　
})
```
صيغة الماضي：سيتم إطلاق هذا بعد تنفيذ الحركة. على سبيل المثال مثال: يظهر。

ملحق تأثير التدرج Bootstrap إنشاء صفحة الويب Bootstrap