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

حل مشكلة عنصر navbar الخاص ببوتستراب 5

علي الكاسر

بواسطة علي الكاسر

 مشاركة

السؤال

علي الكاسر عضو نشيط

علي الكاسر

نشر
نشر

حملت بوتستراب5 ولكن للاسف كلما جربت كود يعتمد في تشغيله على ملف جافا سكربت تبع البوتستراب، هذا الكود لايشتغل. 

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

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

9 أجوبة على هذا السؤال

Recommended Posts

  • 1
محمد أبو عواد عضو نشيط

محمد أبو عواد

نشر
نشر
بتاريخ 9 دقائق مضت قال علي الكاسر: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    </style>
      <link rel="stylesheet" href="view/css/potstrap.css">
  </head>
  <body>
    <div class="navbar navbar-expand-md bg-dark navbar-dark text-white">
      <div class="container">
        <a href="#" class="navbar-brand">Bootstrap Tutorial</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="mainmenu">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="mainmenu">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item"><a href="#intro" class="nav-link">Get started</a></li>
            <li class="nav-item"><a href="#fag" class="nav-link">Ask Me</a></li>
            <li class="nav-item"><a href="#youtube" class="nav-link">Explore More</a></li>
          </ul>
        </div>
      </div>
    </div>
    
    
    <!-- Hero -->
    <section id="hero" class="bg-dark text-light">
      <div class="container">
        <div>
          <div>
            <h1>Learn Bootstrap</h1>
            <img src="" alt="">
          </div>
        </div>
      </div>
    </section>
    
    <script src="view/bootstrap-5.1.3-dist/js/bootstrap.bundle.js"></script>
    <script src="view/bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js"></script>
    <script src="view/bootstrap-5.1.3-dist/js/bootstrap.js"></script>
    <script src="view/bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    
    <script src="view/js/bootstrap.js"></script>
    
  </body>
</html>

تم إرفاقه، 

لاحظ انك تحدد العنصر بطريقة خاطئة , لاحظ 

data-bs-target="mainmenu">
                ^^^^^^^^

أرجو منك وضع اشارة # قبل معرف العنصر كالتالي 

data-bs-target="#mainmenu">

ثم أخبرنا بالنتيجة

رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
محمد أبو عواد عضو نشيط

محمد أبو عواد

نشر
نشر

تأكد أنك تنسخ الكود من لموقع الرسمي للاصدار الخامس , يمكنك الذهاب اليه من هنا , هناك اختلافات في اكواد الاصدار الخامس عن الاصدار الرابع , فمثلا تأكد أنك تستخدم الخاصية data-bs-toggle بدلا من data-toggle و data-bs-target بدلا من data-target ثم حدث الصفحة واخبرنا بالنتيجة

رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
علي الكاسر عضو نشيط

علي الكاسر

نشر
  • الكاتب
نشر
بتاريخ 2 ساعات قال محمد أبو عواد:

تأكد أنك تنسخ الكود من لموقع الرسمي للاصدار الخامس , يمكنك الذهاب اليه من هنا , هناك اختلافات في اكواد الاصدار الخامس عن الاصدار الرابع , فمثلا تأكد أنك تستخدم الخاصية data-bs-toggle بدلا من data-toggle و data-bs-target بدلا من data-target ثم حدث الصفحة واخبرنا بالنتيجة

انا متأكد من كل شي تمام

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
علي الكاسر عضو نشيط

علي الكاسر

نشر
  • الكاتب
نشر
بتاريخ 2 ساعات قال شرف الدين2:

هل يمكنك نسخ الشفرة البرمجية ووضعها في تعليق حتى نتمكن من معاينة المشكلة بشكلٍ أفضل؟  

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    </style>
      <link rel="stylesheet" href="view/css/potstrap.css">
  </head>
  <body>
    <div class="navbar navbar-expand-md bg-dark navbar-dark text-white">
      <div class="container">
        <a href="#" class="navbar-brand">Bootstrap Tutorial</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="mainmenu">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="mainmenu">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item"><a href="#intro" class="nav-link">Get started</a></li>
            <li class="nav-item"><a href="#fag" class="nav-link">Ask Me</a></li>
            <li class="nav-item"><a href="#youtube" class="nav-link">Explore More</a></li>
          </ul>
        </div>
      </div>
    </div>
    
    
    <!-- Hero -->
    <section id="hero" class="bg-dark text-light">
      <div class="container">
        <div>
          <div>
            <h1>Learn Bootstrap</h1>
            <img src="" alt="">
          </div>
        </div>
      </div>
    </section>
    
    <script src="view/bootstrap-5.1.3-dist/js/bootstrap.bundle.js"></script>
    <script src="view/bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js"></script>
    <script src="view/bootstrap-5.1.3-dist/js/bootstrap.js"></script>
    <script src="view/bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    
    <script src="view/js/bootstrap.js"></script>
    
  </body>
</html>
بتاريخ 12 دقائق مضت قال محمد أبو عواد:

أرجو منك ارفاق الكود هنا

تم إرفاقه، 

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
علي الكاسر عضو نشيط

علي الكاسر

نشر
  • الكاتب
نشر
بتاريخ 14 دقائق مضت قال محمد أبو عواد:

أرجو منك وضع اشارة # قبل معرف العنصر كالتالي 


data-bs-target="#mainmenu">

ثم أخبرنا بالنتيجة

لقد أشتغل هذه المره، شكرا لك 

بتاريخ 16 دقائق مضت قال محمد أبو عواد:

أرجو منك وضع اشارة # قبل معرف العنصر كالتالي 


data-bs-target="#mainmenu">

ثم أخبرنا بالنتيجة

هل يوجد دورة مجانية لتعلم بوتستراب٥ على يوتيوب او كتاب pdf اتمنى مشاركته

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
محمد أبو عواد عضو نشيط

محمد أبو عواد

نشر
نشر
بتاريخ 5 دقائق مضت قال علي الكاسر:

لقد أشتغل هذه المره، شكرا لك 

هل يوجد دورة مجانية لتعلم بوتستراب٥ على يوتيوب او كتاب pdf اتمنى مشاركته

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
علي الكاسر عضو نشيط

علي الكاسر

نشر
  • الكاتب
نشر
بتاريخ 2 دقائق مضت قال محمد أبو عواد:

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

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

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

×
 مشاركة
اذهب إلى قائمة الأسئلة

  • إعلانات

  • تابعنا على



×
×
  • أضف...