[MUSIC]
دعونا نتحدث الآن عن مكون إضافي مفيد جدا في Bootstrap يسمى انهيار.
لقد رأينا تطبيقه في شريط التنقل في وقت سابق.
سنعيد النظر في هذا الرمز ونلقي نظرة سريعة عليه بمزيد من التفصيل.
ويسمى عنصر ذات الصلة كما الأكورديون.
الأكورديون يجعل من استخدام البرنامج المساعد انهيار لعملها.
وسوف نرى ذلك بالتفصيل في التمرين الذي يلي.
يوفر البرنامج المساعد طي وسيلة سهلة للكشف عن
وإخفاء المحتوى على صفحة الويب الخاصة بك.
عادة ما يتم تشغيل هذا الكشف عن المحتوى وإخفائه
من قبل المستخدم بالنقر على زر أو رابط في صفحة الويب الخاصة بك.
الآن سترى العديد من الأماكن حيث
يتم الاستفادة من نوع انهيار السلوك بشكل جيد جدا لعرض المحتوى.
سنقوم بإعادة النظر في شريط التنقل لدينا للنظر في البرنامج المساعد طي في العمل،
وبعد ذلك سوف نرى أيضا مثال الأكورديون المقبل.
بالعودة إلى صفحة الويب الخاصة بنا، ستتذكر أنه عندما أنشأنا شريط التنقل
في صفحة الويب الخاصة بنا للشاشات الصغيرة جدًا، تم انهار شريط التنقل
ثم تم الكشف عنه عندما ننقر على الزر هنا.
الآن هذا هو مثال على استخدام البرنامج المساعد طي هنا.
عندما ننظر إلى التعليمات البرمجية، سنرى أننا بالفعل تطبيق البرنامج المساعد طي إلى
ديف الذي يحتوي على شريط التنقل هذا.
إلقاء نظرة على رمز
شريط التنقل لدينا الذي قمنا بتصميمه في وقت سابق، رأيت أنه هنا
، داخل الحاوية، أنشأنا هذا الزر الذي يتم عرضه
لأحجام الشاشة الصغيرة جدا باستخدام فئة نافبار تبديل.
انظر إلى div الذي يتبع هذا الزر هنا.
بالنسبة إلى div الذي يتبع هذا الزر، استخدمنا فئة الانهيار.
لذلك هذا هو استخدام البرنامج المساعد طي في نافبار لدينا.
لذلك ما يخلق هذا هو أن هذا المحتوى معين،
لدينا نافبار التي هي محاطة داخل هذا ديف، سيتم انهار
لأحجام الشاشة الصغيرة جدا.
ثم جنبا إلى جنب مع البرنامج المساعد طي، وهذا الزر الذي يظهر
هناك سيؤدي إلى إظهار وإخفاء هذا نافبار هنا.
هذا هو السبب عندما تنظر إلى الزر، سترى أن هناك حق،
ونحن توريد سمة تبديل البيانات مع انهيار في هنا،
ثم الهدف البيانات كما #Navbar هنا.
ولاحظ أن معرف هذا div الذي قمنا بتطبيقه هنا هو Navbar.
لذلك نحن نحدد بشكل أساسي أن هذا الزر سيكون بمثابة
آلية تشغيل لهذا البرنامج المساعد طي للعمل على هذا div هنا.
لذلك هذا هو استخدام البرنامج المساعد طي في صفحة الويب الخاصة بك.
أيضا، سننظر إلى المكون الآخر، وهو الأكورديون في Bootstrap.
كيف يتصرف الأكورديون؟
لذلك هذا مثال على الأكورديون الذي سنقوم ببنائه في التمرين
التالي.
حتى هنا، سترى أنني قد استبدلت الملاحة المبوبة التي
فعلناها في التمرين السابق باستخدام الأكورديون هنا.
الطريقة التي يعمل بها الأكورديون هي أن يتم الكشف عن جزء واحد من المحتوى
والثلاثة المتبقية مخفية.
لذلك يستخدم هذا البرنامج المساعد طي لهذا الغرض.
لذلك عندما تنقر على أي اسم من هؤلاء القادة الآخرين،
ثم يتم الكشف عن تفاصيل ذلك زعيم الشركة
وسيتم إخفاء الثلاثة المتبقية.
إذن هذا هو سلوك الأكورديون هنا
إذا كنت معتادا على الأكورديون،
الآلات الموسيقية، فأنت تعرف كيف يعمل منفاخ الأكورديون.
إذا هذا، بمعنى ما، يتصرف مثل منفاخ الأكورديون.
لذلك هذا هو السبب في أن هذا المكون يشار إليه باسم الأكورديون في Bootstrap.
مثال آخر على البرنامج المساعد طي قيد الاستخدام هو على موقع الدورة الخاصة بك.
لذلك إذا ذهبت إلى موقع الدورة التدريبية الخاص بك،
ثم ذهبت إلى محتوى موقع الدورة الخاص بك
والبدء في عرض المحتوى هنا، ستلاحظ أنه على الجانب الأيسر،
لديك الملاحة التي تأتي في الصورة على الجانب الأيسر.
لذلك هذا هو الملاحة هناك.
لذلك عند النقر على كل واحد منهم، تلاحظ كيف
يتم إخفاء المحتوى هنا والكشف عن طريق النقر على كل من هذه الروابط هناك.
لذلك هذا هو مثل البرنامج المساعد الانهيار الذي رأيناه في Bootstrap.
على الرغم من أن صفحة Coursera لا تستخدم في الواقع Bootstrap.
سننتقل إلى التمرين التالي حيث سنرى كيف نبني
الأكورديون لإظهار معلومات قيادتنا المؤسسية.
[ موسيقى]