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

مشكلة بخصوص عدم اشتغال القائمة المنسدلة في بوتستراب ولارافيل

Ahmed Edress

السؤال

السلام عليكم 

في هذا الملف app.blade.php  قمت بكتابة الاكواد ل navbar حيث يكون الاسم post me  وجانبه سهم نضغط عليه بحيث يظهر لنا create و Anouther action و Something else here .

لقد ظهر post me  في المتصفح laravel  وقمت بالضغط ولم يظهر اي شئ ,,,حاولت كثيرا ان اعرف ما هي المشكلة لماذا لا يظهر المحتوي حيث نضغط علي السهم يظهر لنا  create و Anouther action و Something else here ولكن لا فائدة لم استطع تشغيله 

لا اعرف ما المشكلة بها ؟ افيدوني وجزاكم الله خيرا ,,اخوكم احمد637fc9b60037b_Screenshot2022-11-24214431.thumb.png.050398a4b33f09cf6ee75ae1adfda473.png637fca1c73f28_Screenshot2022-11-24214614.png.5cd0ac98bc1960d8659222c78632b8ab.pngاريد ان يظهر مثل هذا

الاكواد التي كتبتهاapp.blade.php.txt

<div id="app">
        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
            <div class="container">
                <a class="navbar-brand" href="{{ url('/') }}">
                    Ahmed Edress
                </a>
                <ul class="navbar-nav mr-auto">
     
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Posts me
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="{{route('post.create')}}">
                                Create
                            </a>
                            <a class="dropdown-item" href="#" > Anouther action</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#"> Something else here </a>
                        </div>
                    </li>
                </ul>
    

 

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

Recommended Posts

  • 0

مثل هاته المشكلة شائعة عند استعمال بوتستراب. اذ يرجع عدم اشتغال هذا المكون الى احد السببين في الغالب: 

  • هو أن ملف جافاسكربت الخاص ببوتستراب لديك غير مضمن او مضمن بشكل جزئي او غير صحيح.

أو:

  • هو أنك تصف المكون على طريقة نسخة معينة من بوتستراب في حين أنك تستعمل نسخة مخالفة.

للتأكد من الأول تأكد من أن ملفك يحتوي على تضمين لملف جافاسكربت بوتستراب ومرفقاته jQuery و popper.js، اما عن طريق cdn:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

او عن طريق مدير الحزم npm:

npm install bootstrap

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

require 'bootstrap';

ومن ثم تحزيمه:

npm run dev

أما عن الاحتمال الثاني فيجب التأكد من مطابقة سياق كل نسخة:

  • ان استعملت بوتستراب 5 احرص على ان تعرف خواص القائمة المنسدلة كـ:
    data-bs-toggle="dropdown"

     

  • اما ان استعملت بوتستراب 4 فهو ذات السياق الذي لديك.

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

  • 0
بتاريخ منذ ساعة مضت قال Ahmed Edress:

جزاك الله خيرا يا اخي  

لم استطع ان افهم ما هي cdn؟ 

اخي قل لي ماذا اكتب في cmd؟ 

روابط cdn هي روابط جاهزة لمكتبة بوتستراب, فبدلا من أن تقوم بتنزيل ملفات المكتبة أو تقوم بتنزيلها من خلال مدير الحزم npm يمكنك نسخ روابط cdn الخاصة بالمكتبة من الموقع الرسمي للمكتبة حسب الاصدار الذي تستخدم, لو كنت تستخدم الاصدار الرابع فيمكنك ايجاد روابط cdn الخاصة به هنا وسوف ارفقها لك هنا أيضا وهي نفسها التي ارفقها لك المدرب عدنان

رابط cdn لملف css
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">


روابط cdn لملفات جافاسكربت
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

يمكنك نسخها ولصقها في ملف layout الخاص بالمشروع
أما بالنسبة للاصدار الخامس فيمكنك الذهاب اليه من هنا, سوف ارفقها هنا

css
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


جافاسكربت
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

 

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

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

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

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

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

  • إعلانات

  • تابعنا على



×
×
  • أضف...