في الوحدة السابقة،
فحصنا عدد مكونات Bootstrap التي تستند بحتة حول CSS.
لذلك، من خلال تطبيق فئات CSS لهذه المكونات،
تمكنا من إنشائها على صفحة الويب الخاصة بنا.
في هذه الوحدة، سنقوم بفحص المزيد من المكونات المستندة إلى جافا سكريبت في Bootstrap.
تلخيص ذلك، كما رأينا في الوحدة السابقة،
يدعم Bootstrap عددًا من فئات CSS التي يمكن تطبيقها على
ترميز HTML الخاص بك في صفحات الويب الخاصة بك لتنشيط فئات CSS هذه والاستفادة منها.
لذلك، يمكنك أن ترى كيف قامت فئات CSS بتعديل علامات HTML العامة
وقدمت طريقة Bootstrap الخاصة لتقديم نفس المعلومات.
لذلك، يمكن بسهولة تنشيط المكونات التي تعتمد على CSS عن طريق
تطبيق فئات CSS bootstrap
على علامات HTML المختلفة الموجودة في صفحات الويب الخاصة بك.
يمكن استخدام Bootstrap في حد ذاته فقط لفئات CSS الخاصة به.
أحد الجوانب الأخرى لفئات Bootstraps CSS التي رأيناها هو
أن معظم هذه المكونات بدأت بفئة أساسية قمت بتطبيقها.
على سبيل المثال، عندما تنظر إلى الزر،
رأيت أن الفئة الأساسية كانت فئة BTN.
ثم يمكنك تطبيق شيء مثل
BTN الأساسي الذي من شأنه إضافة ألوانها إلى BTN،
ثم يمكنك تحديد حجم الزر عن طريق قول BTN SM.
ثم يمكنك أيضًا تحديد الزر ليكون كتلة كاملة باستخدام فئة كتلة BTN.
لذا، كل هذه الفئات والمعدلات اللاحقة إلى فئة BTN الأساسية.
لذلك هذا النهج، سترى ذلك
مرارا وتكرارا في العديد من مكونات Bootstrap.
لذلك سيكون لديك فئة أساسية ثم مجموعة من فئات التعديل التي يمكن
تطبيقها لتعديل سلوك المكون الأساسي.
هذا يسهل تصميم سهل لصفحة الويب الخاصة بك.
أخذ مثال آخر، يمكننا أن ننظر إلى فئة التنقل.
نحن نستخدم فئة التنقل في شريط التنقل الذي
قمنا بتضمينه في صفحة الويب الخاصة بنا في الوحدة السابقة.
فئة التنقل، نقوم بتعديل ذلك من خلال تطبيق فئة التنقل بار التنقل إليها.
لذلك قدمت لنا طريقة معينة لتقديم معلومات الملاحة.
في هذه الوحدة، سوف ندرس NAV-Tabs و
NAV-pols التي هي طريقة أخرى لتقديم معلومات التنقل لصفحة الويب.
علامات التبويب والحبوب التي نقدمها الملاحة مرة أخرى،
بدعم من البرنامج المساعد جافا سكريبت،
يوفر وسيلة محسنة لتوفير الملاحة داخل المحتوى الخاص بك.
لذلك، سوف ندرس ذلك في هذه الوحدة بالذات.
أستخدم هذا كمثال لتوضيح كيفية البدء من فئة أساسية،
يمكنك التعديل عن طريق تطبيق فئات التعديل على الفئة الأساسية.
بالطبع، إذا كنت ترغب في جلب
جزء جافا سكريبت من مكونات Bootstrap إلى العمل،
فيجب عليك البدء في تطبيق فئات JavaScript.
لذلك، يدعم Bootstrap عددًا من
المكونات المدعومة من خلال مكونات جافا سكريبت الإضافية.
الآن، عند استخدام هذه المكونات الإضافية في صفحة الويب الخاصة بك،
يمكنك تضمين المكونات الإضافية الفردية التي ستقوم باستخدامها بالفعل في موقع الويب الخاص بك،
أو المجموعة الكاملة من المكونات الإضافية.
الآن، ما سنقوم به في التدريبات هو،
تضمين مجموعة كاملة من الإضافات لأننا نريد فقط استكشاف كل منهم.
ولكن إذا كنت تقوم بتصميم موقع ويب،
فقد تقوم بتضمين مجموعة فرعية فقط من هذه المكونات الإضافية
التي تستخدمها بالفعل في موقع الويب الخاص بك،
مما يقلل من مقدار شفرة جافا سكريبت التي تحتاج
إلى إرسالها إلى مستخدم يقوم بعرض صفحة الويب الخاصة بك.
هذه هي الطريقة التي أنظر بها إلى نهج Bootstrap لاستخدام JavaScript في
دعمها الخاص لمكونات Bootstrap التي يتم تمكينها باستخدام JavaScript.
إذا نظرت إلى جافا سكريبت من تلقاء نفسها،
فإنه يوفر الكثير من المرونة ويتيح لك القيام بالكثير من الأشياء المثيرة للاهتمام.
ولكن هذا ينطوي أيضًا على
كتابة شفرة جافا سكريبت لاستخدامها عند تصميم موقع الويب الخاص بك.
الآن، أنا أنظر إلى جافا سكريبت كمصارع السومو كبير مع الكثير من القدرات،
والكثير من القوة، ولكن غير مملوذ.
الآن، مسج كمكتبة التي بنيت على رأس جافا سكريبت،
يأخذ أساسا مصارع السومو ومن ثم حزم ذلك بطريقة أفضل لجعل
هذا غوريلا مئات رطل إلى حجم أكثر قابلية للإدارة،
وأكثر سهولة
في الاقتراب وأكثر سهولة لتشمل والاستفادة من موقع الويب الخاص بك التصميم.
لذا، إذا كنت تستخدم مكتبة jQuery مباشرة،
فيمكنك بالتأكيد الاستفادة من العديد
من مكونات jQuery والاستفادة منها في صفحة الويب الخاصة بك.
الآن، هذا هو النهج الذي يمكنك اتباعه دائمًا لأن jQuery
سيتم تضمينها بالفعل في صفحة ويب Bootstrap الخاصة بك،
إذا كنت ستستفيد من المكونات المستندة إلى JavaScript.
يأخذ Bootstrap هذه الخطوة إلى الأمام،
ومن ثم النظر
إلى نهج Bootstrap الصورة هو أخذ مصارع السومو ثم وضعه في صندوق.
يقف بشكل أساسي لتغليف
مكونات جافا سكريبت الإضافية في مكون يمكنك استخدامه بسهولة أكبر في صفحات الويب الخاصة بك.
لذا، فإن المكونات المستندة إلى Bootstrap JavaScript تأخذ بشكل أساسي دعمًا
مبنيًا على JQuery، ولكن بعد ذلك حزمها بطريقة يمكنك استخدامها في
صفحة الويب الخاصة بك حتى بدون كتابة سطر واحد من شفرة JavaScript.
هذا هو المكان الذي
يمكن استخدام مكون جافا سكريبت Bootstrap دون كتابة سطر واحد من التعليمات البرمجية.
الطريقة التي يتم دعمها في Bootstrap هي أن
مكونات JavaScript تدعم عددًا من
سمات نجمة واصلة البيانات التي يمكنك تطبيقها على علامات HTML الخاصة بك.
لذا، سترى لي باستخدام أشياء مثل تبديل البيانات،
تجسس البيانات، هدف البيانات، وهلم جرا.
إذا كنت تتذكر، عندما صممنا شريط Nav-Bar،
كنت قد رأيت بالفعل بضع من هذه الصفات.
هناك قمنا بتصميم الزر للشاشات الصغيرة الإضافية.
الآن، حان الوقت بالنسبة لنا [غير مسموع] لماذا فعلنا ذلك في الوحدة السابقة.
لذلك، سوف نستكشف هذا النهج بتفصيل كبير في هذه الوحدة،
بالنظر إلى العديد من مكونات Bootstrap التي تستفيد من دعم JavaScript.
بالطبع، يمكنك الاستفادة من
واجهة برمجة تطبيقات جافا سكريبت الكاملة
المتوفرة لجميع هذه المكونات عن طريق كتابة شفرة جافا سكريبت بالفعل.
سنؤجل هذا إلى الوحدة التالية،
حيث سنقوم بفحص كيفية كتابة شفرة جافا سكريبت بسيطة استنادًا إلى بناء
جملة jQuery لإضافة
المزيد من الوظائف إلى مكونات Bootstrap المستندة إلى JavaScript.