لقد أكملنا للتو مناقشة حول أهمية توفير التصفح في موقع الويب الخاص بك.
كما نظرنا في العديد من الطرق المختلفة التي يمكننا من خلالها توفير التنقل في موقع ويب.
لقد حان الوقت الآن للنظر في bootstrap والنظر في المكونات
التي يوفرها bootstrap والتي تمكننا من إضافة التنقل إلى مواقعنا الإلكترونية.
اثنين من المكونات الهامة من بوتستراب هو نافبار و بريدكرومبس.
نحن ذاهبون لدراسة كل من هذه في هذا التمرين.
دعونا نبدأ بإضافة شريط التنقل إلى الجزء العلوي من صفحة الويب الخاصة بنا.
يمكننا القيام بذلك باستخدام مكون Navbar الذي هو جزء من bootstrap.
إذاً، كيف نبدأ؟
نذهب إلى نص صفحة HTML لدينا.
حتى هنا، لدي index.HTML مفتوحة.
وفي الجزء العلوي،
سأقوم بإضافة عنصر باستخدام علامة HTML التنقل هذه.
الآن تم تصميم علامة HTML التنقل لتوفير التنقل.
لذلك، دعونا الاستفادة من هذه العلامة وبناء شريط التنقل لدينا باستخدام علامة التنقل.
حتى الآن، في الجزء العلوي،
وأنا ذاهب لإضافة في هذه العلامة،
ووضع الملاحة وبناء شريط التنقل حول هذه العلامة الملاحة.
لذا، بمجرد إضافة علامة التنقل هذه إلى index.HTML،
يمكننا المضي قدمًا ثم تطبيق فئات bootstraps على علامة التنقل هذه.
لذلك، أنا تطبيق شريط التنقل الصف.
لذا، تسمح لي فئة نافبار في بوتستراب بإنشاء شريط التنقل.
هناك العديد من الطرق المختلفة لتخصيص شريط التنقل،
والتي نلقي نظرة عليها كفئات إضافية ستضيف إلى علامة التنقل هذه.
جنبا إلى جنب مع نافبار،
نضيف أيضا في الفئة التالية التي هي نافبار الظلام.
الآن أريد أن يكون شريط التنقل الخاص بي
داكنًا بالألوان، مع خلفية أغمق.
لأن ذلك يسير على ما يرام مع الموقع الذي صممته للتو.
يمكننا الحصول على ضوء نافبار،
وهو شريط التنقل لون أخف وزنا.
لذلك، يمكنك اختيار استخدام أي منهما في صفحة الويب الخاصة بك.
الطبقة التالية التي سأستخدمها هي فئة navbar-extend-sm.
الآن، وأيضًا، سأحدد حجم الشاشة
الذي يأتي تحته السلوك القادر على التبديل إلى الوجود.
الآن، عندما أقول
navbar-extend-sm، هذا يعني أنه بالنسبة للشاشات الصغيرة والصغيرة الإضافية، سيصبح شريط التنقل هذا قادرًا على التبديل.
وهذا يعني أنه سيتم انهار في تلك الأحجام الشاشة.
سوف تتعلم قريبا كيف يعمل هذا،
عندما ننظر في كيف يمكننا إضافة
البرنامج المساعد الانهيار إلى شريط التنقل لتمكين هذا النوع من السلوك.
لذلك جنبا إلى جنب مع sm نافبار قادرة على تبديل،
وأنا ذاهب لتطبيق لون الخلفية إلى نافبار في البداية،
والتي من شأنها أن تكون بغ الأساسي.
الآن bg-الأساسي هو هذا اللون الأساسي الذي تم تعريفه في bootstrap الخاص بك.
بشكل افتراضي، هذا هو إصدار من اللون الأزرق الذي يتم استخدامه من قبل bootstraps.
لذا سأبدأ بذلك كلوني الأساسي.
في وقت لاحق، سأقوم بتخصيص لون شريط التنقل الخاص بي باستخدام بعض فئات CSS.
بالإضافة إلى ذلك، سأقوم أيضًا بتطبيق
فئة أخرى تسمى القمة الثابتة إلى شريط التنقل هذا.
ما يفعله الأعلى الثابت، هو إصلاح شريط التنقل إلى أعلى
نافذة المتصفح حيث يتم عرض صفحة الويب هذه.
حتى عندما تقوم بتمرير صفحتك المبللة،
كان شريط التنقل حتى يبقى في أعلى الصفحة.
يمكنك ببساطة استخدام أسفل ثابت لإصلاح
شريط التنقل إلى أسفل نافذة المتصفح الخاص بك أو يمكنك أن تقول، أعلى ثابت.
وأيضا، يمكنك فقط عدم استخدام هذه الفئة.
إذا لم تستخدم ذلك،
فسيتم تمرير شريط التنقل أيضًا عند تمرير صفحة الويب لأعلى.
في موقع الويب الخاص بي، اخترت الحفاظ على شريط التنقل ثابتًا في أعلى الصفحة.
هناك العديد من الخيارات الأخرى
المتوفرة التي يمكنك العثور عليها في وثائق bootstraps.
لذلك هذا هو مثال واحد على استخدام شريط التنقل.
الآن بالإضافة إلى ذلك، داخل شريط التنقل،
سأرفق
أي محتوى سيتم استخدامه في شريط التنقل داخل الحاوية.
لذلك هذا هو المكان الذي سأستخدم فيه عنصر div هنا
وقم بتطبيق فئة الحاوية على عنصر div هذا.
لذلك، كل ما هو مغلق داخل هناك،
سوف يقتصر على نفس عرض بقية صفحة ويب الخاصة بي.
كما تتذكر، استخدمت فئة الحاوية
لتحديد اتساع المحتوى في صفحة الويب الخاصة بي،
لذلك سأقوم بتطبيق نفس الشيء على شريط التنقل الخاص بي أيضًا،
بحيث
يتم عرض معلومات شريط التنقل الخاصة بي ضمن نفس العرض مثل بقية صفحة الويب الخاصة بي.
يمكنك اختيار عدم استخدام فئة الحاوية في شريط التنقل، وفي هذه الحالة،
سوف تنتشر محتويات شريط التنقل على كامل عرض الشاشة.
داخل شريط التنقل،
سأقوم بإضافة فئة إلى علامة هنا.
تسمح لي هذه الفئة التي أسميها باسم العلامة التجارية navbar بعرض بعض المعلومات كمعلومات العلامة التجارية في شريط التنقل الخاص بي.
لذلك إذا كان لديك شركة على سبيل المثال،
يمكنك عرض اسم شركتك أو
شعار شركتك باستخدام العلامة التجارية navbar
بحيث يتم عرضها بشكل بارز في شريط التنقل الخاص بك.
من الواضح، عند زيارة العديد من المواقع،
سترى أن اسم الشركة في مكان ما مرئي
في شريط التنقل الخاص بهذا الموقع.
لذلك، اسمحوا لي أن أضيف في تلك العلامة التجارية نافبار.
ويمكن أيضا أن يكون هذا مرتبطا تشعبيا إلى الصفحة الرئيسية لموقع الويب الخاص بك.
لذا، سأترك هذا هناك.
في الصفحات المتبقية على موقع الويب الخاص بي،
سأقوم فقط بإضافة href لإعادتي إلى صفحة index.HTML،
وهي الصفحة الرئيسية.
وداخل هنا أنا ذاهب لإضافة في اسم مطعمي.
دعونا حفظ التغييرات والذهاب وإلقاء
نظرة سريعة على الحالة الحالية لشريط التنقل الخاص بي.
الذهاب إلى صفحة الويب في المتصفح،
يمكنك الآن أن ترى أين شريط التنقل مرئي على صفحة الويب الخاصة بي في المتصفح.
شريط التنقل الآن في أعلى الصفحة
ويمكنك أن ترى أنه أثناء تمرير صفحتي،
لا يزال شريط التنقل في الأعلى لأنني اعتدت على الطبقة العليا الثابتة.
يمكنك أيضا رؤية
العلامة التجارية نافبار مما يسمح لي لعرض اسم المطعم هناك.
في وقت لاحق أنا ذاهب لاستبدال ذلك مع شعار لهذا المطعم.
لاحظت أن شريط التنقل مغطى جزئيا في Jumbotron.
أنت ذاهب لإصلاح ذلك قليلا في وقت لاحق باستخدام بعض التخصيص CSS.
الشيء التالي الذي سأقوم به هو إضافة بعض الروابط إلى شريط التنقل الخاص بي،
بحيث تقودني هذه الروابط إلى الصفحات الأخرى في موقع الويب الخاص بي.
إذن كيف نفعل ذلك؟
بالعودة إلى index.HTML،
سأقوم بإضافة في ul هنا،
حيث سأقوم بالإعلان عن
جميع الروابط المختلفة التي سيتم عرضها في مربع التنقل الخاص بي.
لذلك هذا المجاول الذي أنا ذاهب لتطبيق الطبقة كما نافبار الملاحة.
لذلك هذا هو الفصل الذي سيساعدني على تحديد
مجموعة الروابط التي سيتم تضمينها في شريط التنقل الخاص بي.
وسيتم عرض هذه الروابط أفقيا داخل شريط التنقل الخاص بي.
يتم استخدام فئة السيارات السيد التي قمت بتطبيقها أيضًا على ul،
لتحديد الهامش الصحيح.
لذلك هذا هو فئة الأداة المساعدة التي تتوفر
في bootstrap التي تسمح لي لتحديد الهامش الصحيح.
لذا إذا قلت، سيد السيارات،
ما يعنيه هو أنه على الجانب الأيمن،
يجب تعيين الهامش الأيمن قدر الإمكان.
مما يعني أنه سيتم دفع المحتوى إلى اليسار قدر
الإمكان داخل شريط التنقل.
داخل هذه القائمة غير مرتبة،
يمكنني استخدام عناصر القائمة لتضمين
الروابط المختلفة التي ستكون جزءًا من شريط التنقل الخاص بي.
حتى في هناك، وأنا ذاهب لإضافة في بعض الروابط هناك
وسأبدأ من خلال تحديد أول واحد هناك مع الرابط.
إلى كل عنصر قائمة في شريط التنقل الخاص
بك، ستقوم بتطبيق الفصل كعنصر التنقل.
يسمح هذا بعرض عناصر القائمة هذه أفقيًا كارتباطات في شريط التنقل الخاص بي.
ثم داخل هنا،
يمكنني بعد ذلك استخدام علامة لإضافة في
الرابط الفعلي الذي سيكون جزءًا من شريط التنقل الخاص بي.
حتى داخل هناك يمكنني استخدام علامة مع
الطبقة nav-link وهذا يسمح لي أيضا لاستخدام href.
السمة لتحديد الرابط هناك.
وأول واحد سوف أقوم بتضمينه هو المنزل.
لذلك، سيتضمن هذا عنصرًا يسمى Home في شريط التنقل هذا.
اسمحوا لي فقط نسخ ذلك ثم لصق ذلك.
وبعد ذلك سنقوم بتحرير بعض هذه لأنني أريد إضافة
أربعة أنواع مختلفة إلى شريط التنقل الخاص بي.
الأول هو المنزل.
الثاني سيكون حول.
الثالث سيكون القائمة التي أنا ذاهب لبناء كجزء من الدورة القادمة.
وآخر واحد سيكون الاتصال.
يحتوي موقع الشركة النموذجي على روابط مثل هذه في شريط التنقل الخاص به.
لذلك مع إضافة هذين الاثنين،
الآن ما يمكنني القيام به هو
أنه يمكننا تحديد واحد من هذه الروابط صراحة كرابط نشط،
وهذا يعني أنه عندما تكون على تلك الصفحة معينة،
يمكن تسليط الضوء على هذا الرابط معين.
لذلك للقيام بذلك، سوف نطبق هنا فئة تسمى نشطة إلى واحدة من هذه العناصر القائمة.
في هذه الحالة، بما أن هذه هي صفحة index.html،
فأنا أطبق الفئة النشطة على الرابط الرئيسي هناك.
هذا يكمل إلى حد كبير شريط التنقل الخاص بي في صفحة index.HTML.
شيء واحد صغير أود إصلاحه هنا هو أن الرابط حول،
أريد ربطه إلى
صفحة aboutus.HTML التي قمنا بتضمينها بالفعل في موقعنا على الانترنت،
لأن هذا هو المكان الذي أريد أن يؤدي.
دعونا نذهب ونلقي نظرة سريعة على شريط التنقل لدينا من هذا الجزء.
بالعودة إلى شريط التنقل لدينا،
يمكنك أن ترى على الفور نتيجة تضمين
تلك العناصر في قائمة غير مرتبة هناك.
لذلك، ترى الصفحة الرئيسية،
حول، القائمة، والاتصال هناك،
وكل واحد منهم هو رابط ولكن هذا هو عنصر التنقل هنا.
ولاحظ كيف يتم تمييز المنزل هنا بسبب استخدام الطبقة النشطة.
لذلك، إذا ضغطت على حول،
فإنه ينبغي أن يأخذني إلى حول الملعب.
لو وها نحن ذا
لكنني أدرك أنه ليس لدي طريقة للعودة،
مما يعني أنني بحاجة أيضًا إلى تسليم شريط التنقل هذا إلى صفحة aboutus.HTML.
سنصل إلى هناك في فترة قصيرة.
في الوقت الحالي، سأقوم بالتنقل بسرعة باستخدام زر الرجوع
للمتصفح الخاص بي مرة أخرى إلى صفحة index.HTML الخاصة بي.
شيء واحد أردت أيضا أن أظهره لك هو كيف
سيتم انهيار شريط التنقل هذا لأحجام الشاشة الصغيرة والإضافية.
لذلك، دعونا تشغيل وجهة النظر باستخدام عرض استجابة،
ومن ثم اسمحوا لي أن أذهب إلى غالاكسي S5.
ولاحظت أنه عندما أستخدم Galaxy S5 مثل هذا،
يمكنك أن ترى أن هذا يتم عرضه في وقت سابق مما يغطي الشاشة بالفعل.
هذا ليس السلوك الذي أريده
أريد أن أكون قادرا على إخفاء هذا عندما أشاهد هذا على شاشة صغيرة وإضافية.
ومن ثم ربما أضيف زر هنا يمكنني استخدامه
لتبديل وإيقاف عرض هذه الروابط.
لقد رأيت مثل هذه الأشياء في مواقع الجوال.
كيف نفعل ذلك في بوتستراب؟
دعنا نَذْهبُ إلى تلك الخطوة التالية.
العودة إلى شريط الملاحة لدينا هنا.
اسمحوا لي أن أضيف في زر هناك،
والتي سوف تكون بمثابة زر تبديل لإظهار وإخفاء
الروابط بلدي من شريط التنقل الخاص بي عندما يتم عرضها على شاشات ذكية وصغيرة اضافية.
لذلك، لإضافة هناك،
اسمحوا لي أن أضيف في زر وتطبيق بعض الطبقات على هذا الزر.
سنقوم بمناقشة المزيد حول الأزرار في bootstrap في الدرس التالي.
ولكن لإضافة زر في bootstrap،
يمكنك تطبيق الفئة لهذا الزر الخاص كـ navbar-toggler.
إذا، هذا هو نافبار تبديل.
لذلك، كما يوحي الاسم،
لقد بدأت بالفعل في فهم ما سيفعله هذا الزر في هذه الحالة.
ثم أود أن أضيف نوع كزر للإشارة إلى أن هذا يعمل كزر.
ثم تبديل البيانات كما الانهيار.
الآن، هذه السمة تبديل البيانات التي سترى هنا هي في الواقع
استخدام مكون جافا سكريبت في bootstrap.
نحن ذاهبون للنظر في هذا شريط الواصلات البيانات نوع من السمات أكثر في الوحدة التالية،
حيث سننظر في مكونات جافا سكريبت bootstraps.
يتطلب شريط التنقل أحد مكونات جافا سكريبت تلك لتكون قادرة
على تبديل وإيقاف الروابط الخاصة بي في شريط التنقل الخاص بي، لذلك،
هذا هو السبب في أنني قدمت بسرعة هذا المفهوم هنا،
لكننا سنعود لفحص
مكونات جافا سكريبت هذه في الوحدة التالية.
لذا، تنهار تبديل البيانات
ثم هدف البيانات كـ #Navbar.
الآن، أنا ذاهب لتقديم ديف آخر مع معرف كما نافبار.
لذلك، عندما أحدد تاريخًا أو هدفًا #Navbar،
يشير ذلك إلى معرف هذا العنصر الآخر الذي سيكون
هدفًا لهذا الزر المعين هنا.
لذا، هذا هو الجزء الذي أضفه إلى الأسفل.
وأيضا، أريد الزر لعرض شيء هنا.
وعادة، عندما ترى هذا النوع من الأزرار في مواقع الجوال،
فإنه يحتوي على خطوط مجانية هناك،
وهذا ما يسمى عادة باسم رمز تبديل NavBar-Toggle.
لذلك، سأقوم بتضمين رمز خاص
يتم تضمينه في bootstrap، يسمى رمز navbar-toggler.
لذا، إذا قمت بتطبيق هذه الفئة على امتداد العلامة،
فإن ذلك سيعرض رمز navbar-toggler إلى الزر الخاص بي هنا.
لذلك، أن يقدم زر.
سننظر إلى كيف يبدو هذا في فترة قصيرة
الآن، عندما أنقر على هذا الزر،
أريد أن أكون قادرًا على إظهار وإخفاء هذه الروابط.
لتمكينني من القيام بذلك،
ما سأقوم به هو إحاطة هذا ul مع div هنا.
لذا، سأدخل وأقدم div حول هذا ul.
وإلى هذا div،
سأقوم بتطبيق الفصل على أنه انهيار،
ثم انهيار navbar، ثم أعطيه معرفًا كـ Navbar.
الآن، أنت بدأت ترى الارتباط بين
هذه الفئات والمعرف وما أعلنته في تبديل البيانات وهدف البيانات.
لذا، هنا هدف البيانات الذي أحدده كـ #Navbar وبالتالي فإن المعرف المعطى لهذا div هو navbar.
وأحدد تبديل البيانات كما الانهيار.
طي هو واحد من مكونات جافا سكريبت التمهيد،
والتي سوف ننظر في بمزيد من التفصيل في الوحدة التالية.
لذلك، أرفق هذا داخل ديف للشاشات الصغيرة والإضافية،
وهذا سيكون مخفيا افتراضيا،
ولكن عندما أنقر على
الزر، سيتم الكشف عن محتويات هذا ديف على الشاشة.
اسمحوا لي أيضا أن أضيف السيد السيارات إلى فئة navarbar العلامة التجارية هناك بحيث
أقدم تلقائيا هامش حق كاف لهذه العلامة التجارية navbar.
الآن، دعونا نذهب ونلقي نظرة على هذا في متصفحنا.
الذهاب إلى المتصفح، يمكنك الآن أن ترى كيف
يتم انهار شريط التنقل الخاص بي على أحجام صغيرة وإضافية للشاشة.
ولاحظ هذا الزر على الجانب الأيسر.
عند النقر على الزر،
يتم عرض الروابط الموجودة في شريط التنقل الخاص بي وإخفائها.
هذا هو السلوك الذي أريده لتنفيذ استجابة من شريط التنقل الخاص بي.
إذا قمت بالتبديل إلى
شاشة عادية أكبر، يتم عرض شريط التنقل بالكامل بما في ذلك الروابط.
ولكن عندما أعرض نفس الشيء على شاشة أصغر مثل هذا،
ثم يتم إخفاء روابط شريط التنقل وراء
هذا الزر ومن ثم سيتم تبديل وإيقاف تشغيله عن طريق النقر على هذا الزر.
لذلك هذا هو السلوك المتجاوب الذي يمكنك
إنشاؤه في شريط التنقل الخاص بك على موقع الويب الخاص بك.
الآن بعد أن أكملنا شريط التنقل على صفحة index.HTML الخاصة بي،
أريد أن أكون قادرًا على تقديم نفس شريط التنقل إلى صفحة aboutus.HTML.
قبل أن نصل إلى هناك، دعنا نذهب إلى التذييل هنا.
ثم لاحظت أنه في التذييل،
لدينا هذه الروابط.
أريد أن أكون قادرا على تحديث هذا الرابط أيضا للإشارة
إلى aboutus.HTML حتى أنه حتى من خلال النقر على الرابط في تذييل بلدي،
وأود أن لا تزال تذهب إلى الصفحة حول.
الآن، بالعودة
إلى هنا، ما سأفعله هو ببساطة نسخ هذا الرمز من شريط التنقل هذا من هنا.
ثم انتقل إلى صفحة aboutus.HTML ثم قم بلصق ذلك في صفحة aboutus.HTML الخاصة بي.
ليس هذا فقط، أنا بحاجة إلى القيام ببعض التعديل على هذا،
لأن هذا هو الآن في صفحة aboutus.HTML.
لذا من الواضح أن هناك بعض الأشياء التي أحتاج إلى تحديثها.
أولاً وقبل كل شيء، يجب
الآن تحديث علامة navbar هذه التي يجب أن تقودني إلى الصفحة الرئيسية الخاصة بي كـ index.HTML هنا.
ثم، عنصر القائمة هنا الآن الثانية الصفحة الرئيسية مرة أخرى،
أريد تحديث ذلك إلى index.HTML هناك ثم الرابط الثاني إلى حول،
لأن هذه هي صفحة aboutus.HTML،
وأنا ذاهب لإعادته إلى هذا التجزئة هناك وبعد ذلك سوف إزالة
الطبقة النشطة من الأول ثم قم بتطبيق الفئة النشطة على العنصر الثاني،
لأن هذه هي الصفحة حول وهكذا يجب أن تكون تلك التي يتم تمييزها.
مرة أخرى، انتقل إلى تذييل الصفحة حول.
في التذييل، سأفعل نفس التحديثات على الروابط هنا حتى
الصفحة الرئيسية يجب أن يقودني إلى index.HTML ثم اسمحوا لي حفظ التغييرات.
حتى الآن يتم تحديث الصفحة الخاصة بي بشكل صحيح.
الذهاب إلى المتصفح،
يمكنك الآن أن ترى أنني على الصفحة الرئيسية الخاصة بي ثم عند النقر على الصفحة حول،
سأذهب إلى صفحة حول.
لاحظ كيف يتم عرض شريط التنقل نفسه في About Page،
لذلك عليك أن يتم تمييزها لأنني
طبقت الفصل النشط على ذلك، وبعد ذلك يمكنني
العودة إلى صفحتي الرئيسية إما بالنقر على العلامة التجارية narvar-أو الصفحة الرئيسية.
لذلك دعونا نضغط على العلامة التجارية نارفار-ونحن مرة أخرى في الصفحة
الرئيسية أو الصفحة الرئيسية أو index.HTML.
لذلك، الآن يتم إعداد التنقل بشكل صحيح في كل من الصفحة الرئيسية وفي صفحة حول.
اثنين من الأشياء الإضافية التي أنا ذاهب إلى القيام به هو تطبيق إذا كنت ترى
انها الطبقة التي يمكنني تغيير لون نافبار بلدي
وأيضا أود أن أضيف
فتات الخبز إلى هذه الصفحة، وحتى أن فتات الخبز سوف تعطيني أيضا طريقة أخرى
للتنقل مرة أخرى إلى الصفحة الرئيسية الخاصة بي وأيضا سوف تشير
إلى التسلسل الهرمي في موقع الويب الخاص بي حيث أنا في الوقت الحالي.
لذلك دعونا نفعل هاتين الخطوتين بعد ذلك.
العودة إلى هذا المحرر في styles.css.
أنا ذاهب لإضافة في اثنين من أكثر الطبقات هنا.
لاحظت أن شريط الملاحة الخاص بي كان يخفي جزء من الجامبوترون.
من أجل تجنب ذلك،
ما سأفعله هو لجسدي،
سأعطي حشوة من 50 بكسل على
الجزء العلوي بحيث يتم ترك تلك 50 بكسل لشريط التنقل لتغطية.
كلما كنت تستخدم شريط التنقل العلوي الثابت
، من الجيد إعطاء هذا الحشو إلى نص
صفحة الويب الخاصة بك بحيث لا يغطي التنقل
العنصر العلوي في نص صفحة الويب الخاصة بك.
لذلك، ما تبقى منها أنا ذاهب إلى ترك
الصفر بكسل وأيضا مؤشر z لجسمي كما صفر.
من معرفتك بـ CSS، تفهم ما يفعله مؤشر z
والقادم الذي سأقوم به هو أنني سأقوم
بتحميل فئة navbar-dark بإضافة لون واحد آخر
لفئة navbar واللون الذي
سأختار هو 512DA8.
هذا هو اللون الأرجواني الداكن الذي يبدو جيدا جدا في موقع الويب الخاص بي. في
الواقع، إذا كان لديك اهتمام حيث وجدت هذه الألوان يمكنك زيارة
www.android.com ثم البحث عن وثائقها لتصميم المواد وهناك،
لديهم اقتراحات لكيفية استخدام الألوان
في تطبيق الروبوت الخاص بك ولكن نفس الشيء ينطبق حتى على موقع ويب،
بحيث حيث ذهبت واختيار هذه الألوان لاستخدامها في موقع الويب الخاص بي.
لذلك، تطبيق هذا، والآن عندما أفعل ذلك، لا
بد لي من العودة إلى صفحة index.HTML الخاصة بي ومن
ثم من نافبار يجب إزالة هذا بغ الأساسي.
خلاف ذلك، لن يتم تطبيق اللون الذي اقترحته في CSS على هذا.
وبالمثل، انتقل إلى صفحة aboutus.HTML ثم قم بالتمرير
إلى شريط التنقل ثم قم بإزالة bg الأساسي من ذلك أيضًا.
الآن، بينما أنا في صفحة aboutus.HTML،
اسمحوا لي أن أعرض فتات الخبز في الحاوية الخاصة بي،
الصف الأول من الحاوية الخاصة بي هناك.
لذلك هذا هو المكان الذي كان عنوان حول لنا هناك،
لذلك هناك أنا ذاهب للذهاب في وإدخال رأ.
أنا فقط باستخدام علامة رأ كوسيلة لإدخال فتات الخبز.
يمكنك استخدام حتى div لهذا وسوف لا تزال تعمل على ما يرام.
يحدث ذلك فقط أن المثال على وثائق bootstraps تستخدم رأ لذلك،
أنا التمسك مع ذلك حتى ديف بسيط سوف تعمل أيضا بشكل جيد هنا.
لذلك، أقول رأ الطبقة كول-12 فتات الخبز.
لذلك طبقت فئات فتات الخبز
وليس معنى col-12 الذي امتدت الشاشة بأكملها.
وداخل هناك، وأنا ذاهب للذهاب في وإضافة اثنين من عناصر القائمة.
الآن ترى لماذا استخدام رأ مفيد هنا,
لأنني يمكن استخدام عناصر القائمة لوصف البند فتات الخبز.
لذلك، عنصر فتات الخبز هنا،
لذلك أنا تضمين عنصر واحد فتات الخبز ثم داخل هناك سوف تستخدم
علامة A لتحديد رابط مرة أخرى إلى الصفحة الرئيسية الخاصة بي.
لذلك أقول، «A» ثم إلى هذا A،
أعطي href كـ index.HTML ثم قم
بتضمين ذلك في أول فتات الخبز الخاصة بي ثم بعد ذلك،
فإن العنصر التالي الذي سأقوم بتضمينه هو عنصر
قائمة آخر وعنصر القائمة الثاني سأقوم بتطبيق الفصل كعنصر فتات الخبز ونشط.
لذلك لاحظ استخدام الطبقة النشطة هنا ثم داخل هناك سأقول «
عنا» أنا لست بحاجة إلى رابط هنا لأنني بالفعل على الصفحة
بحيث لا تحتاج إلى تضمين لهذا البند القائمة.
دعونا حفظ التغييرات،
حتى تتمكن من رؤية كيف تم إدخال فتات الخبز في هذه
الصفحة بالذات حول لنا هنا.
دعونا نذهب ونلقي نظرة على صفحة الويب الناتجة.
الذهاب إلى صفحة الويب الخاصة بي، يمكنك الآن أن ترى أن لون شريط التنقل
قد تغير الآن إلى اللون الأرجواني الداكن الذي يتم تقديمه
من خلال CSS وهذا يبدو لطيفًا على الشاشة هنا.
الأرجواني الداكن، تليها الأرجواني أخف وزنا ثم في
الجزء السفلي حتى أكثر أخف وزنا الأرجواني لتذييل بلدي.
حسنا، أنا لست مصمم،
ولكن هذا هو أفضل ما يمكن أن يأتي مع من حيث إضافة قريبة من المواقع.
كما تعلمون من التاريخ الرجال هم عمياء اللون.
لذلك لدينا طعم ضعيف جدا في الألوان.
إذا كنت متزوجة زوجتك ستذكرك بذلك بالتأكيد
دعونا نذهب إلى صفحة حول ونرى كيف يبدو.
لذلك هذه هي الصفحة حول وفي الصفحة حول يمكنك أن
ترى شريط التنقل مع اللون الصحيح
هناك ولاحظ فتات الخبز المدرجة في نبذة عنا هنا.
حتى تتمكن من رؤية الصفحة الرئيسية التي تقودك إلى صفحة الفهرس
ثم حول لنا كما رأيت قمنا بتطبيق رابط
نشط، فئة نشطة لهذا واحد.
لذا هكذا يتم عرض «نبذة عنا» و «الصفحة الرئيسية».
لذا، هذا هو نمط فتات الخبز الافتراضي المستخدم
في bootstrap وإذا قمت بالنقر على الصفحة الرئيسية، سأعود إلى صفحتي الرئيسية.
مع هذا نكمل هذا التمرين على نافبار وفتات الخبز.
هذا هو الوقت المناسب بالنسبة لك للقيام جيت الالتزام مع الرسالة «نافبار و بريدكامبس».