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

لا يظهر مكون navbar الخاص بوتستراب بشكل صحيح

منتصر احمد

بواسطة منتصر احمد

 مشاركة

السؤال

منتصر احمد عضو نشيط

منتصر احمد

نشر
نشر

انا نسخت كود ال navbar من bootstrap وعدلت عليه ولكن ال navbar لا ياخد العرض الكامل 

هذا هو الكود الخاص به : 

<!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" />
    <title>portfolio | mohamed montaser</title>
  </head>
  <body>
    <!-- Start NavBar -->
    <nav class="navbar navbar-expand-lg bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#"
          ><img width="46" height="32" src="images/logo.svg" alt=""
        /></a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">work</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">about</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Certificates</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">skills</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- End NavBar -->
  </body>
</html>

 

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

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

Recommended Posts

  • 0
منتصر احمد عضو نشيط

منتصر احمد

نشر
  • الكاتب
نشر
بتاريخ الآن قال عمر قره محمد:

هل بإمكانك مشاركة الحل هنا حتى يسهل على من لديه نفس السؤال معرفة الجواب.

كانت المشكله عندي ان ال div الذي يمتلك الصنف navbar-nav ليده الصنف me-auto فكان ياتي بجانب ال logo img فبحثت في الكود وفي bootstrap فغيرته الي ms-auto

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

محمد أبو عواد

نشر
نشر

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

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

أما ملفات جافاسكربت فيمكنك تضمينها في نهاية العنصر body 

<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>

 

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

عمر قره محمد

نشر
نشر

اخي على ما يبدو انك لم تقم باستدعاء مكتبات ال bootstrap  اللازمة لتشغيله ويمكنك استدعائها بالشكل التالي: 

  • قم بإضافة هذا السطر إلى ال head  
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />


     

  • ثم قم بإضافة هذا السطور في نهاية ال body 
      

     <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>


    هذه الطريقة تسمح لك بالوصول لمكتبه bootstrap من دون تحميلها على الجهاز

 

إذا لم ترد استدعاء المكتبة عبر CDN (وهي الطريقة التي شرحتها لك في الاعلى) بإمكانك تحميل الملفات الاربعة والقيام باستدعائها كما تقوم باستدعاء ملفات ال css وال js بالعادة.

اقرأ أيضاً : 

يمكن الاطلاع على الطريقة من موقع بوتستراب الرسمي : 
https://getbootstrap.com/docs/4.0/getting-started/introduction/

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

منتصر احمد

نشر
  • الكاتب
نشر
بتاريخ 19 ساعات قال عمر قره محمد:

اخي على ما يبدو انك لم تقم باستدعاء مكتبات ال bootstrap  اللازمة لتشغيله ويمكنك استدعائها بالشكل التالي: 

  • قم بإضافة هذا السطر إلى ال head  
    
<link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />


     

  • ثم قم بإضافة هذا السطور في نهاية ال body 
      

    
 <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>


    هذه الطريقة تسمح لك بالوصول لمكتبه bootstrap من دون تحميلها على الجهاز

 

إذا لم ترد استدعاء المكتبة عبر CDN (وهي الطريقة التي شرحتها لك في الاعلى) بإمكانك تحميل الملفات الاربعة والقيام باستدعائها كما تقوم باستدعاء ملفات ال css وال js بالعادة.

اقرأ أيضاً : 

يمكن الاطلاع على الطريقة من موقع بوتستراب الرسمي : 
https://getbootstrap.com/docs/4.0/getting-started/introduction/

لا انا استعمل webpack لذا قد قمت باستدعائهم في ملف js
"

import "./sass/style.scss";

import "bootstrap/dist/css/bootstrap.min.css";

import "bootstrap/dist/js/bootstrap.min.js";

import "popper.js/dist/popper.min.js";

import "jquery/dist/jquery.min.js";

import "@fortawesome/fontawesome-free/css/all.min.css";

import "@fortawesome/fontawesome-free/js/all.min";

"

بتاريخ 20 ساعات قال محمد أبو عواد:

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


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

أما ملفات جافاسكربت فيمكنك تضمينها في نهاية العنصر body 


<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>

 

لا انا استعمل webpack لذا قد قمت باستدعائهم في ملف js
"

import "./sass/style.scss";

import "bootstrap/dist/css/bootstrap.min.css";

import "bootstrap/dist/js/bootstrap.min.js";

import "popper.js/dist/popper.min.js";

import "jquery/dist/jquery.min.js";

import "@fortawesome/fontawesome-free/css/all.min.css";

import "@fortawesome/fontawesome-free/js/all.min";

"

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

محمد أبو عواد

نشر
نشر
بتاريخ 1 ساعة قال Mohamed Montaser3:

لا انا استعمل webpack لذا قد قمت باستدعائهم في ملف js
"

import "./sass/style.scss";

import "bootstrap/dist/css/bootstrap.min.css";

import "bootstrap/dist/js/bootstrap.min.js";

import "popper.js/dist/popper.min.js";

import "jquery/dist/jquery.min.js";

import "@fortawesome/fontawesome-free/css/all.min.css";

import "@fortawesome/fontawesome-free/js/all.min";

"

لا انا استعمل webpack لذا قد قمت باستدعائهم في ملف js
"

import "./sass/style.scss";

import "bootstrap/dist/css/bootstrap.min.css";

import "bootstrap/dist/js/bootstrap.min.js";

import "popper.js/dist/popper.min.js";

import "jquery/dist/jquery.min.js";

import "@fortawesome/fontawesome-free/css/all.min.css";

import "@fortawesome/fontawesome-free/js/all.min";

"

هل يظهر أي مشكلة بعد تنفيذ أمر البناء في منفذ الاوامر؟

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

عمر قره محمد

نشر
نشر
بتاريخ 2 ساعات قال Mohamed Montaser3:

لا, خلاص عملت search و وجدت الحل

هل بإمكانك مشاركة الحل هنا حتى يسهل على من لديه نفس السؤال معرفة الجواب.

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

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

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

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

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

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

  • إعلانات

  • تابعنا على



×
×
  • أضف...