مشكلة في العثور على ملفات css و js عند استخدام boostrap

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

ثانياً، يجب عليك التأكد من أنك تستخدم الروابط الصحيحة في ملف HTML الخاص بك. يجب أن تحتوي هذه الروابط على مسارات الوصول الصحيحة لملفات Bootstrap و Popper.

إذا كان لديك مشكلة في العثور على رابط Popper، يمكنك البحث عنها على موقع المكتبة الرسمي. من الممكن أن يتم تضمين Popper مع Bootstrap أو يمكنك تنزيله بشكل منفصل.

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

أخيرًا، يمكنك التحقق من وجود أي أخطاء في صفحة HTML الخاصة بك باستخدام أداة تفتيش المتصفح (مثل Chrome DevTools) وإصلاحها بما يتناسب مع متطلبات Bootstrap.

هذه هي الخطوات المفصلة لتحميل وتثبيت Bootstrap و Popper على مشروعك:

1. قم بزيارة موقع Bootstrap وتحميل آخر إصدار من Bootstrap: https://getbootstrap.com/docs/5.0/getting-started/download/
2. قم بفتح الملف المضغوط الذي تم تنزيله.
3. انتقل إلى مجلد "dist" ثم انسخ الملفات bootstrap.min.css و bootstrap.min.js ولصقها في مجلد css و js في مشروعك على التوالي.
4. زر موقع Popper.js على هذا الرابط: https://popper.js.org/
5. انتقل إلى قسم "Quick Start" وانسخ الرابط الخاص بـ "Popper.js" المتوفر في المكتبة المحلية "Dist" ، وهو "popper.min.js".
6. لصق رابط Popper.js في العلامة الأمامية لصفحة HTML الخاصة بك بعد رابط Bootstrap.js.
7. افتح صفحة HTML الخاصة بك وتحقق من أن bootstrap.min.css و bootstrap.min.js و popper.min.js يتم تحميلها بنجاح ومتاحة للاستخدام.
8. الآن يمكنك استخدام Bootstrap في مشروعك بما في ذلك العديد من العناصر المساعدة والمكونات والأنماط التي توفرها.

bootstrap-utilities.rtl.min.css.mapbootstrap-utilities.rtl.min.cssbootstrap-utilities.rtl.css.mapbootstrap-utilities.rtl.cssbootstrap-utilities.min.css.mapbootstrap-utilities.min.cssbootstrap-utilities.css.mapbootstrap-utilities.cssbootstrap-reboot.rtl.min.css.mapbootstrap-reboot.rtl.min.cssbootstrap-reboot.rtl.css.mapbootstrap-reboot.rtl.cssbootstrap-reboot.min.css.mapbootstrap-reboot.min.cssbootstrap-reboot.css.mapbootstrap-reboot.cssbootstrap-grid.rtl.min.css.mapbootstrap-grid.rtl.min.cssbootstrap-grid.rtl.css.mapbootstrap-grid.rtl.cssbootstrap-grid.min.css.mapbootstrap-grid.min.cssbootstrap-grid.css.mapbootstrap-grid.cssbootstrap.rtl.min.css.mapbootstrap.rtl.min.cssbootstrap.rtl.css.mapbootstrap.rtl.cssbootstrap.min.css.mapbootstrap.min.cssbootstrap.css.ma

بتاريخ 13 ساعة قال Mustafa Suleiman:

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

ثانياً، يجب عليك التأكد من أنك تستخدم الروابط الصحيحة في ملف HTML الخاص بك. يجب أن تحتوي هذه الروابط على مسارات الوصول الصحيحة لملفات Bootstrap و Popper.

إذا كان لديك مشكلة في العثور على رابط Popper، يمكنك البحث عنها على موقع المكتبة الرسمي. من الممكن أن يتم تضمين Popper مع Bootstrap أو يمكنك تنزيله بشكل منفصل.

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

أخيرًا، يمكنك التحقق من وجود أي أخطاء في صفحة HTML الخاصة بك باستخدام أداة تفتيش المتصفح (مثل Chrome DevTools) وإصلاحها بما يتناسب مع متطلبات Bootstrap.

هذه هي الخطوات المفصلة لتحميل وتثبيت Bootstrap و Popper على مشروعك:

1. قم بزيارة موقع Bootstrap وتحميل آخر إصدار من Bootstrap: https://getbootstrap.com/docs/5.0/getting-started/download/
2. قم بفتح الملف المضغوط الذي تم تنزيله.
3. انتقل إلى مجلد "dist" ثم انسخ الملفات bootstrap.min.css و bootstrap.min.js ولصقها في مجلد css و js في مشروعك على التوالي.
4. زر موقع Popper.js على هذا الرابط: https://popper.js.org/
5. انتقل إلى قسم "Quick Start" وانسخ الرابط الخاص بـ "Popper.js" المتوفر في المكتبة المحلية "Dist" ، وهو "popper.min.js".
6. لصق رابط Popper.js في العلامة الأمامية لصفحة HTML الخاصة بك بعد رابط Bootstrap.js.
7. افتح صفحة HTML الخاصة بك وتحقق من أن bootstrap.min.css و bootstrap.min.js و popper.min.js يتم تحميلها بنجاح ومتاحة للاستخدام.
8. الآن يمكنك استخدام Bootstrap في مشروعك بما في ذلك العديد من العناصر المساعدة والمكونات والأنماط التي توفرها.

 

للاسف هذة كل الملفات الموجودة عندي بعد فك ملف المضغوط لل boostrap

bootstrap.css bootstrap.min.js.map

ربما قد اكون لم استوعب سؤالك بشكل صحيح في البداية، الأفضل لك هو تثبيت bootstrap من خلال الأمر التالي

npm install bootstrap

أو استخدامه عبر CDN من خلال وضع الروابط التالية بداخل عنصر head في ملف index.html

<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/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

بالنسبة لـ Popperjs هناك رابط CDN أيضًا والأفضل وضعه قبل رابط bootstrap داخل ملف index.html

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>

أو تثبيته من خلال npm

npm i @popperjs/core

كما وضح مصطفى فإنه يوجد الكثير من الطرق لتضمين ال bootstrap يمكنك الإطلاع عليها من خلال التوثيق الرسمي للمكتبة 

الرابط السابق يتضمن جميع الطرق لتثبيت المكتبة 

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

لاحظ أيضاً أنه إذا قمت بتحميل الإصدار الخامس من المكتبة فإنه لا وجود لل jquery حيث تم الإستغناء عن هذه المكتبة في الإصدار الخامس

bootstrap/
├── css/
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-grid.rtl.css
│   ├── bootstrap-grid.rtl.css.map
│   ├── bootstrap-grid.rtl.min.css
│   ├── bootstrap-grid.rtl.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-reboot.min.css.map
│   ├── bootstrap-reboot.rtl.css
│   ├── bootstrap-reboot.rtl.css.map
│   ├── bootstrap-reboot.rtl.min.css
│   ├── bootstrap-reboot.rtl.min.css.map
│   ├── bootstrap-utilities.css
│   ├── bootstrap-utilities.css.map
│   ├── bootstrap-utilities.min.css
│   ├── bootstrap-utilities.min.css.map
│   ├── bootstrap-utilities.rtl.css
│   ├── bootstrap-utilities.rtl.css.map
│   ├── bootstrap-utilities.rtl.min.css
│   ├── bootstrap-utilities.rtl.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap.rtl.css
│   ├── bootstrap.rtl.css.map
│   ├── bootstrap.rtl.min.css
│   └── bootstrap.rtl.min.css.map
└── js/
    ├── bootstrap.bundle.js //popper هذا الملف يتضمن المكتبة 
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js //بشكل مضغوط popper هذا الملف يتضمن المكتبة 
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.esm.js
    ├── bootstrap.esm.js.map
    ├── bootstrap.esm.min.js
    ├── bootstrap.esm.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map