الأكورديون هي واحدة من تلك الأدوات المزعجة التي قد يكون البعض منكم قد شاهدها بالفعل.
لديها واحدة من تلك المنفاخ مع لوحة المفاتيح أسفل
هنا وبعد ذلك كنت ضربة ثم تشغيل الموسيقى مع المفاتيح هناك.
وليس الجميع يستمتع بها.
أنا متأكد جداً ولكن لا إهانة للاعبين الأكورديون.
الأكورديون في بوتستراب مثيرة جدا للاهتمام بالتأكيد.
سننظر في كيفية تطبيق الأكورديون لتكون قادرة على الكشف عن
وإخفاء المحتوى في صفحة الويب الخاصة بنا في هذا التمرين.
العودة إلى معلومات عنا في صفحة HTML حيث كان لدينا معلومات القيادة المؤسسية.
الآن، أنا ذاهب لاستبدال الملاحة العليا مع الملاحة على أساس الأكورديون.
سأقوم بإزالة هذا UL الذي يحدد مصطلح التنقل تمامًا.
ثم سنقوم بتصميم الأكورديون حول المحتوى الذي لدينا بالفعل.
لذلك، دعونا حذف هذا UL الذي يحتوي على علامة التبويب التنقل بحيث يتم تركها
مع هذا الجزء فقط الذي يتم تضمينه داخل اللوحة العلوية والمحتوى العلوي.
لذا، نحن ذاهبون إلى الذهاب وتعديل هذا.
الذهاب إلى هذا ديف هنا،
وأنا ذاهب لإزالة هذه الفئة من هناك ومن ثم تطبيق معرف كما الأكورديون.
نحن بحاجة إلى هذا المعرف لاحقًا لتكون قادرة على إنشاء الأكورديون التي div،
التي تحتوي على هذا المحتوى لا تزال موجودة هناك.
لذلك، يتم تغيير المحتوى العلوي الآن إلى الأكورديون.
الآن، كل من هذا المحتوى هنا،
سنقوم بتحويل ذلك إلى
بنية قائمة على البطاقة هناك حتى يتمكنوا من الكشف عن المحتوى في
كل من تلك البطاقات حتى تراني أستخدم البطاقة
وفصول جسم البطاقة هناك لإرفق هذا المحتوى.
الآن، الذهاب إلى المحتوى الفعلي هنا،
سأبدأ في تطبيق فئة البطاقة هنا مع div هناك.
لذا، سنقول، «بطاقة فئة div»
ثم أغلق div هناك ثم ينتقل هذا المحتوى إلى div هناك.
الآن، هنا، نحن ذاهبون للذهاب في
وإنشاء ديف مع فئة «رأس بطاقة».
أنا ذاهب إلى تظهر لكم لواحد منهم وبعد ذلك نحن ذاهبون إلى
تكرار هذه العملية للثلاثة المتبقية أيضا.
لذلك، سوف نقول، «بطاقة رأس لفة التبويب» ثم «معرف بيترهيد».
أنا ذاهب لاتخاذ هذا H3 من أسفل هنا،
وقطع بها ومن ثم لصقه في لوحة بطاقة.
لذلك،
يتم قطع هذا h3 الذي يحدد اسم الشخص قيادة الشركات
من داخل لوحة التبويب ثم انتقل إلى رأس البطاقة هنا.
هذا سيكون بمثابة مساعدة الملاحة بلدي.
الآن، إلى هذا H3، سأقوم بتطبيق فئة تسمى mb-0.
لذا، هذا هو mb-0 هنا.
الآن، هذا الاسم نفسه،
سأرفق هذا في الداخل و a،
لذلك سأذهب إلى السطر التالي ثم أقول،
«تبديل البيانات»
وسيقول تبديل البيانات، «انهيار».
لذلك، الآن، ترى أنك تستخدم البرنامج المساعد الانهيار.
لذا، لدينا هذا الإغلاق H3 هناك.
لذا، سأقوم بتحويله إلى السطر التالي
هنا ثم سأقوم بإغلاق العلامة هناك.
لذلك، مع هذا العلامة الآن يرفق اسم الرئيس التنفيذي هنا.
ثم تغلق العلامة h3 بالطبع h3 في الأعلى ثم هذا
داخل div وهو رأس بطاقة الفئة.
لذلك، وهذا يشكل هيكل رأس لبلدي الأكورديون ديف.
الذهاب الآن إلى لوحة التبويب أدناه،
وأنا ذاهب لتغيير هذه الفئة من علامة التبويب لوحة تتلاشى إلى الانهيار.
لذلك هذا سيكون البرنامج المساعد الانهيار الذي سيكون مفيدا لدينا
الأكورديون وأيضا سوف إزالة هذه الفئة النشطة
لهذا وسيتم ترك معرف كما بيتر لهذا.
وبعد ذلك سوف تقول، «الأم البيانات» وكنت تحديد الأكورديون.
ترى لماذا أعطينا معرف الأكورديون إلى div الذي يرفق كل هذه المحتويات.
لذلك، هذه هي الطريقة لتحديد أن هذا سوف
يشكل جزءا من الأكورديون التي تقوم ببنائها هناك.
لذلك، هذا هو السبب في البيانات الأصل الأكورديون.
الآن، المحتوى داخل لوحة علامة التبويب هذه،
سأقوم بإرفاقه داخل div مع
نص بطاقة الفئة
وإغلاق هذا div هنا،
ثم وضع مسافة بادئة لهذا المحتوى هناك.
دعونا حفظ التغييرات ثم انتقل ونلقي نظرة على صفحة الويب لدينا في هذه اللحظة.
الذهاب إلى صفحة الويب الخاصة بنا تلاحظ الآن أنه في قيادة الشركات،
يتم تمييز اسم الرئيس التنفيذي هنا في رأس البطاقة هنا.
ثم المحتوى هو أسفل هنا.
الآن، سنقوم بإنشاء الثلاثة المتبقية أسفل ثم أرفق كل منهم هناك.
أنا ذاهب لتكرار نفس الهيكل للباقي منها.
لذلك، سيكون لدي البطاقة مع رأس البطاقة،
ورأس البطاقة سوف أرفق اسم الشخص مثل هذا.
لذلك، سوف تتبع
إلى حد كبير نفس الهيكل للأجزاء الثلاث المتبقية من المحتوى.
لذا، دعنا نجري التغييرات ثم سنعود ونراجع الشفرة.
بالعودة إلى الشفرة،
ترى الآن أنه بالنسبة للثلاثة المتبقية،
لاحظت أنني ما زلت أستخدم البطاقة هنا
مع رأس البطاقة هنا و h3 مع mb-0.
هذا داخل فئة رأس البطاقة div هناك ثم أسفل
الفئة فقط كانهيار ثم مع المعرف
ثم جسم البطاقة الذي يرفق P هناك.
نفس الشيء مع اثنين المتبقية أيضا.
لذا، مع هذا التغيير،
هذه المعلومات الثلاث المتبقية من قادة الشركات سوف
تنهار ولكن
سيتم الكشف عن معلومات بيتر بان المكشوفة عندما أول عرض صفحة على شبكة الإنترنت.
لذا، مع هذا التغيير، الآن، من
الواضح أن مقتطف الشفرة هذا متوفر في
التعليمات التالية هنا لذا لا داعي للقلق كثيرًا.
يمكنك دائما الرجوع إلى ذلك للتأكد من أنك قد فعلت ذلك بشكل صحيح.
لذلك، دعونا حفظ التغييرات.
العودة إلى صفحة الويب لدينا،
ترى الآن الأكورديون التي شيدت هنا.
لذلك، ترى أن أول معلومات قادة الشركات يتم عرضها هنا.
الثلاثة المتبقية انهارت في هذه اللحظة.
لذلك، هذا هو السبب في استخدام البرنامج المساعد الانهيار وأيضا السبب
في تحويل اسم الشركة الرائدة في عنوان البطاقة.
أرى أنك رأيت أنه سيتم عرض مثل هذا في هناك.
الآن، النقر على أي واحد منهم تلاحظ الآن أنه عند النقر على
ذلك سيتم الكشف عن هذا المحتوى ولكن الثلاثة المتبقية مخفية.
لذا، هذا هو سلوك الأكورديون هنا.
لذلك مع هذا، نكمل هذا التمرين.
هذا هو الوقت المناسب بالنسبة لك للقيام جيت الالتزام مع الأكورديون الرسالة..