في هذا التمرين، سنقوم باستكشاف التنقل القائم على علامة التبويب في Bootstrap،
ودعم Bootstrap لعلامات التبويب،
وكيف يمكن استخدام علامات التبويب لتنظيم المحتوى على صفحة الويب الخاصة بك.
وكيف يمكنك التنقل من علامة تبويب إلى علامة تبويب أخرى،
ثم الكشف عن المحتوى في كل من علامات التبويب هذه في صفحة الويب.
الآن، سترى هنا لي باستخدام فئة التنقل،
ومن ثم مزيد من التأهل باستخدام فئة علامات التبويب التنقل.
ويمكن استخدام نفس النهج أيضا مع حبوب التنقل
التي نظرنا إليها في المحاضرة السابقة.
للبدء في هذا التمرين،
سوف نذهب إلى صفحة aboutus.html.
ثم هناك،
حيث لدينا محتوى قيادة الشركات هناك،
بعد H2، أنا ذاهب لتقديم الملاحة المبوبة.
لذلك، هذا هو المكان الذي سأستفيد من المجاهدين مع علامات التبويب التنقل الطبقة.
لذلك، كنت قد رأيت أنه في وقت سابق عندما
شيدنا شريط التنقل، استخدمنا أيضا ul داخل شريط التنقل لتحديد عناصر التنقل هناك.
نهج مماثل هنا، إلا أننا هنا في طريقنا
لاستخدام أول مع الملاحة وعلامات التبويب الملاحة هنا.
لذلك، داخل هذا ul،
سنقوم ببناء هيكل الملاحة لهذا التنقل المبوب هنا.
حتى في هناك، وسوف تستخدم عنصر القائمة مع فئة nav-intem،
وبناء التنقل حول هذا البند القائمة.
لذا، يقدم هذا العنصر الأول في علامات التبويب التنقل الخاصة بي.
بعد ذلك مباشرة، داخل هناك سوف أعرض مع الطبقة nav-link نشطة.
لذا، هذا واحد، كما ترون،
إذا كنت تتذكر من الطريقة التي نستخدم بها ul مع عنصر التنقل ورابط التنقل.
في شريط التنقل،
ونحن نرى نهجا مماثلا هنا.
لذلك، nav-intem نشط، ومن ثم href.
لذلك، سيكون هذا مرجعًا إلى جزء علامة التبويب لاحقًا،
والذي سيكون له معرف peter هناك،
والدور هو علامة تبويب لهذا،
وعلامة تبويب تبديل البيانات.
لذلك، يمكنك رؤية مكون جافا سكريبت في Bootstrap يأتي إلى الصورة هنا.
وبعد ذلك سأقول (بيتر بان)،
ثم أغلق العلامة هناك.
لذلك، هذا من شأنه أن يكمل علامة التبويب الأولى لدينا في الملاحة tabbed لدينا.
اسمحوا لي أن أكمل بقية التعليمات البرمجية،
وبعد ذلك سوف نعود ومراجعة بقية التعليمات البرمجية هناك.
لذلك، هنا يمكنك أن ترى أنني قد أكملت هذا الهيكل الملاحة هنا.
وبالمثل، أنا تحديد بنود القائمة لبقية قادة الشركات الحرة هنا.
الآن هذا، اسمحوا لي أن حفظ الفكة.
ثم دعونا نذهب ونلقي نظرة سريعة على صفحة الويب.
التبديل إلى صفحة الويب،
ترى الآن كيفية استخدام علامات التبويب الملاحة الملاحة أنشأنا
هيكل الملاحة هذا الحق تحت قيادة الشركة هنا.
لذا، فإن بنية التنقل هذه تعني أنني يجب أن أتمكن من التنقل
وعرض كل واحد منهم بمزيد من التفصيل عن طريق النقر على هذا.
لذا، هذه هي الطريقة التي يعمل بها التنقل المبوب هنا.
الآن، من الواضح، محتوى كل واحد منهم يجب أن
تظهر بشكل مناسب فقط تفاصيل هذا الشخص هنا.
لذلك، هذا هو المكان الذي
سيدخل فيه استخدام المحتوى المبوب وفئات جزء علامة التبويب حيز التنفيذ.
ونحن في طريقنا إلى إرفاق هذا المحتوى باستخدام ذلك.
ومن ثم ربط هذا بتلك الملاحة،
الملاحة التبويب فوق هنا،
بحيث
يتم عرض معلومات زعيم شركة واحدة فقط على الشاشة في كل مرة.
بمجرد إكمال إعداد هذا التنقل المبوب،
سننتقل إلى المحتوى الفعلي هنا.
ثم الآن، سأقوم بإعادة تنظيم هذا المحتوى إلى أربع أجزاء تبويب منفصلة،
سيتم عرض كل منها عند
تحديد جزء علامة التبويب المقابل في التنقل المبوب.
لذلك، لنبدأ،
أول شيء سنقوم به هو أن ندخل ونفصل
كل من هؤلاء القادة الأربعة إلى أربعة أجزاء هناك،
بحيث يكون من السهل بالنسبة لي أن أرى ما أفعله.
لذلك، في H3،
أنا قطعها إلى أربعة أجزاء مختلفة،
وبعد ذلك سنكون قادرين على العمل مع هذه.
لذا، الآن لدي واحد، اثنان، ثلاثة، أربعة
لذلك، يحتاج هذا المحتوى الآن إلى أن تكون محاطة داخل div
مع محتوى علامة التبويب للفئة.
لذلك، كل هذا المحتوى الذي لدينا
لقادة الشركات الأربعة المختلفة يجب أن تكون محاطة داخل قسم محتوى علامة التبويب هناك.
لذلك، الآن لقد وضعت ذلك داخل علامة التبويب جهة الاتصال.
الآن، لكل واحد منهم،
أحتاج إلى إنشاء div آخر مع جزء علامة التبويب الفئات وبعض الفئات الإضافية.
ومن ثم تنظيم هذا الاتصال.
لذلك، دعونا نبدأ مع أول واحد.
لذلك، لأول زعيم الشركات،
وأنا ذاهب لتقديم ديف جديد مع دور tabpanel.
لذلك، هذا بمثابة لوحة التبويب التي سيتم عرضها
عند تحديد التنقل علامة التبويب الأولى.
والفئة المقابلة التي أحتاج إلى تطبيقها هي جزء علامة التبويب.
لذلك، هذا هو جزء علامة
التبويب، المحتوى الفعلي الموجود هناك.
ثم فئة أخرى أن أتقدم بها هي تتلاشى.
لذا، فإن فئة التلاشي تسمح لهذا المحتوى بالتلاشي.
لذلك، هذا هو فئة الرسوم المتحركة التي يدعمها Bootstrap.
أيضا، أطبق هذه الفئة تسمى العرض.
تحدد فئة العرض بشكل أساسي
أنه يجب عرض هذا المحتوى المحدد عند عرض الصفحة لأول مرة.
لذلك، سيتم تطبيق فئة العرض فقط على جزء علامة التبويب الأول،
ولن يتم تطبيق أجزاء علامات التبويب المتبقية على فئة العرض.
والفئة الأخيرة التي سأقوم بتطبيقها نشطة لأن هذا هو
جزء علامة التبويب الذي سيتم عرضه في الصفحة عند عرض الصفحة لأول مرة.
بالإضافة إلى ذلك، لكي يعمل التنقل،
أحتاج إلى إعطاء هذا والمعرف،
وبما أنني استخدمت الوسم بيتر لمحتوى التنقل في علامة التبويب،
لذلك سأقوم بتطبيق المعرف باسم بيتر هنا.
وهكذا، عندما يشار إلى هذا في رابط هناك مع الوسم بيتر،
وهذا هو الجزء المقابل الذي أشير إليه.
الآن، ما سأفعله هو أنني سأقوم بنسخ هذا القسم من هناك.
ثم سأقوم بتطبيق هذا div على معلومات الشركة الثانية،
باستثناء أنه بالنسبة لهذا واحد يجب أن أطبق فقط جزء علامة التبويب وتناسب.
لا ينبغي تطبيق العرض والنشط على الثلاثة المتبقية.
و الهويّة هنا يجب أن تكون (داني) للثانية
أنا ذاهب ببساطة نسخ هذا الرمز،
ومن ثم لصق ذلك لزعيم الشركات الثالث هنا.
ومن ثم فإن لوحة التبويب والثالث هو أغومبي.
وآخر واحد،
مرة أخرى، أنا لصق ذلك في،
ومن ثم يجب تغيير معرف إلى ألبرتو،
وإغلاق هذا ديف هنا.
لذا، يجب إغلاق هذا div لآخر واحد عند هذه النقطة.
وهذا يجب أن تأخذ الرعاية من لوحات التبويب الأربعة التي أحتاجها.
الذهاب في وإبراز هذا المحتوى،
حتى أكون
راضيا، هاجسي هو راض هناك.
حسنا، هذا يكمل تنظيم محتوى علامة التبويب.
الآن، دعونا حفظ التغيير ونذهب ونلقي
نظرة سريعة على ما تبدو عليه صفحة الويب الآن.
الذهاب إلى صفحة الويب الخاصة بنا،
ترى الآن أن صفحة الويب الخاصة بنا تعرض فقط المحتوى المقابل لرئيسهم التنفيذي.
إذا قمت بالتبديل إلى أي من تلك الأخرى،
سترى أنه يتم عرض المعلومات المقابلة.
ولاحظ كيف تتلاشى هذه المعلومات عند تحديد هذا المستخدم المعين.
ولكن، بالطبع، إذا كنت سعيدًا بهذا،
فلا بأس، يمكننا التوقف عند هذه النقطة.
ولكن أود أن تحدد بشكل جيد علامة تبويب حقيقية حول هذا الموضوع.
لذا، هذا هو المكان الذي سأقوم فيه بتطبيق بعض سمات CSS،
وخصائص لعلامة التبويب هذه هنا،
بحيث
تكون بنية علامة تبويب نظيفة لطيفة يتم تعريفها هناك.
لذلك، دعونا إنشاء بعض خصائص CSS لهذا الغرض.
الخطوة الأخيرة، والتحول إلى styles.css.
بعد معكوس نافبار،
وأنا ذاهب لتقديم فئات CSS لمحتوى علامة التبويب،
لذلك أنا تحديد لمحتوى علامة التبويب،
الحدود اليسار: 1px سد الصلبة.
وأنا ذاهب لتطبيق نفس على الحدود اليمنى والقاع.
لست بحاجة إلى تطبيق على الجزء العلوي لأن الجزء العلوي
يحكمه التنقل علامة التبويب بالفعل.
ثم اسمحوا لي أن أعطي الحشو من 10 بكسل في كل مكان،
ومن ثم حفظ التغييرات.
دعونا نذهب ونلقي نظرة على صفحة الويب لدينا بعد هذا.
التبديل مرة أخرى إلى صفحتنا،
الآن ترى لطيفة،
نظيفة تشبه علامة التبويب التي يتم إنشاؤها.
بحيث عند الانتقال إلى كل واحد منهم، يتم
عرض تلك المعلومات المقابلة بشكل مناسب في علامة التبويب الخاصة بها.
هذا يكمل هذا التمرين حيث نظرنا إلى
استخدام التنقل المبوب لصفحة الويب الخاصة بنا.
ثم رأينا كيف يمكننا إنشاء التنقل علامة التبويب وأرفق محتوى آخر.
هذا هو أيضا الوقت المناسب بالنسبة لك للقيام تعليق Git مع علامات التبويب الرسالة.