اذهب إلى المحتوى
  • 0

توسيط العناصر داخل الشريط العلوي

السؤال

السلام عليكم ورحمة الله وبركاته 

بعد اكمالي مسار تعلم بوتستراب وانشاء موقع شبيه بيوتيوب قررت ان اقوم بعمل موقع بسيط لكي اراجع ما تعلمته وتترسخ في ذهني اصناف بوتستراب 

واجهتني مشكلة وهي كيف استخدام اداوت flexbox انا اعرف كيف يعمل flexbox ولكن عندما جئت الى مشروعي  تحديدا الى القائمة العلوية اردت ان اقوم بالتحكم بالقائمة ul الموجودة في الشريط العلوي لكي اقوم بتوسيطها في وسط الشريط او على اليسار او اليمين انا اعرف لكي تقوم بتحويل العناصر الى اليسار مثلا تقوم بفعل الاتي (d-flex justify-content-end) ولكن لا اعرف لاي حاوية يجب ان اضع هذا الصنف وجربت مع كل الحاويات ولكن لم انجح في ذلك كما اني قرئت توثيق شرائط التنقل في بوتستراب وفهمتها ولكن عندما اقوم باستخدام هذه الاصناف في مشروعي اواجه مشكلة في تحديد المكان الصحيح للصنف  

ما ارجوه هو كيف اقوم بمعرفه اين استخدم اصناف بوتستراب . 

المثال ادناه لقائمة علوية تحتوي على لوكو وقائمة غير منتظمة كيف اقوم بالتحكم بتوسيط ومحاذاة القائمة داخل الشريط العلوي 

 

  

الخميس.zip

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

يجب أن يتم وضعها للـ ul كالتالي :

<ul class="navbar-nav me-auto my-2 my-lg-0 justify-content-center w-100 fs-5 "

لاحظ أنني اعطيتها الخاصية w-100 بالإضافة للـ justify-content-center وذلك لأننا بحاجة لجعلها تأخذ كامل عرض الأب الخاص بها، ومن ثم قمنا بتوسيط العناصر داخلها.

والطريقة التي عرفت فيها اين اضع الخاصية، هي عبر تجريب اضافة الخاصية من الـ developers tool في المتصفح ومراقبة عرض كل عنصر.

 

1.png

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 9 دقائق مضت قال عمر قره محمد:

يجب أن يتم وضعها للـ ul كالتالي :

<ul class="navbar-nav me-auto my-2 my-lg-0 justify-content-center w-100 fs-5 "

لاحظ أنني اعطيتها الخاصية w-100 بالإضافة للـ justify-content-center وذلك لأننا بحاجة لجعلها تأخذ كامل عرض الأب الخاص بها، ومن ثم قمنا بتوسيط العناصر داخلها.

والطريقة التي عرفت فيها اين اضع الخاصية، هي عبر تجريب اضافة الخاصية من الـ developers tool في المتصفح ومراقبة عرض كل عنصر.

 

1.png

احسنت اخي تم حل المشكلة مثل هكذا اخطاء كيف استطيع معرفتها .خطر كل شي ببالي الا العرض ؟ ما سبب ذلك 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 17 دقائق مضت قال احمد قابل هاشم ألصميدعي:

احسنت اخي تم حل المشكلة مثل هكذا اخطاء كيف استطيع معرفتها .خطر كل شي ببالي الا العرض ؟ ما سبب ذلك 

عليك بتعلم كيف تقوم بعمل Debugging من خلال أدوات المطور في جوجل كروم مثلاً، وكما شرح لك عمر، قام هو هو بتفقد التنسيقات والكلاسات الخاصة بالعناصر من خلال المتصفح، وربط بينها وبين التنسيقات الخاصة بالعنصر الأب.

وقام بتجربة تعديل التنسيق بوضع خواص CSS على العنصر من خلال المتصفح، وذلك أسرع بمراحل بدلاً من التعديل على الكود ثم النظر إلى المتصفح مرة أخرى، بل عليك التجربة داخل المتصفح نفسه من خلال أدوات المطور، وكيف تفعل ذلك؟

عليك بمشاهدة الفيديو التالي وأيضًا قراءة التعليقات، وستتعلم كيف تستخدم أداة المطور في جوجل كروم:

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 31 دقائق مضت قال احمد قابل هاشم ألصميدعي:

احسنت اخي تم حل المشكلة مثل هكذا اخطاء كيف استطيع معرفتها .خطر كل شي ببالي الا العرض ؟ ما سبب ذلك 

أخطاء ال css عادة تنحصر في الأخطاء التالية

  • التحقق من الصنف: يجب التحقق من الصنف الذي يتم استخدامه في الأكواد، والتأكد من صحته وملاءمته للعنصر المستخدم.
  • التحقق من اسم الصنف: يتعين التأكد من أن اسم الصنف المستخدم مكتوب بشكل صحيح، وأنه لا يوجد أي أخطاء في الإملاء.
  • التحقق من القيم: يجب التحقق من القيم المستخدمة في الأكواد، والتأكد من صحتها وملاءمتها للعنصر المستخدم.
  • التحقق من الترتيب: يجب التأكد من ترتيب الأكواد، والتأكد من وجود الصنف في المكان المناسب، وبالترتيب الصحيح.
  • التحقق من الثوابت: يجب التحقق من الثوابت المستخدمة في الأكواد، مثل الألوان أو الأبعاد، والتأكد من أنها صحيحة وملاءمة للعنصر المستخدم.

يمكنك استخدام أدوات مطور الويب المدمجة في المتصفح لتحديد الأخطاء وتصحيحها كما في التعليق السابق

كما يجب عليك معرفة أنه يمكنك تنفيذ مهمة ما مثل توسيط العناصر كما في السؤال بأكثر من طريقة لذلك طالما تقوم بالتدريب والممارسة ستقوم بحل المشكلات بطريقة أسرع من ذي قبل

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...