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

منتصر احمد · 27 مايو 2022

انا نسخت كود ال 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>

محمد أبو عواد · 27 مايو 2022

هل قمت بتضمين ملف 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>

عمر قره محمد · 27 مايو 2022

اخي على ما يبدو انك لم تقم باستدعاء مكتبات ال 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/

منتصر احمد · 28 مايو 2022

بتاريخ 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";

"

محمد أبو عواد · 28 مايو 2022

بتاريخ 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";

"

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

منتصر احمد · 28 مايو 2022

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

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

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

عمر قره محمد · 28 مايو 2022

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

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

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

منتصر احمد · 28 مايو 2022

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

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

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

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

السؤال

منتصر احمد

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

Recommended Posts

محمد أبو عواد

عمر قره محمد

منتصر احمد

محمد أبو عواد

منتصر احمد

عمر قره محمد

منتصر احمد

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية