איך משתמשים בספריית js של bootstaps?

[תמר עורכת וידאו ,צילום רחפן]

תנסי בדף HTML למעלה

<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” integrity=”sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N” crossorigin=”anonymous”>

<script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js” integrity=”sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj” crossorigin=”anonymous”></script>

<script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js” integrity=”sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN” crossorigin=”anonymous”></script>

<script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js” integrity=”sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+” crossorigin=”anonymous”></script>

[שרה שרה]

אני צריכה שזה יעבוד לי גם בלי אינטרנט

[Sara Cohen]

זה הקישורים לקבצים המקומיים שלך שירדו בהתקנה:

קישור לקובץ ה-CSS של Bootstrap:

<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

קישור לקבצי ה-JS של Bootstrap והספריות התומכות:

<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/@popperjs/core/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

מקווה שבאמת יעבוד…

[Sara Cohen]

שימי לב- אם את עובדת עם Angular או מערכת בנייה אחרת, ייתכן שתצטרכי להגדיר את הקבצים גם ב-angular.json או בקונפיגורציה אחרת של הפרויקט…

[שרה שרה]

כלומר – את הקבצים האלו אני אמורה לקשר בפרוייקט שלי?

הם נמצאים בתיקיה שמורידים מהאתר של Bootstrap נכון?

[שרה שרה]

הקבצים האלו לא מופיעים בתיקיית קבצים שהורדתי מBootstrap.

[תמר פרנקל]

זה תלוי על איזה תוכנה את עובדת,

את צריכה פשוט לקשר את זה למעלה בתוך הדף של הHTML

[שרה שרה]

אני עובדת עם vs code כותבת בjs

[Sara Cohen]

בדקת בתוך תיקיית node modules?

שם אמורים להיות הקבצים האלה.

אם אין לך אותם שם אולי חסר לך משהו בהתקנה, אולי לא התקנת את כל הספריה.

תריצי את הפקודה הזאת:

npm install bootstrap @popperjs/core jquery

ואחרי שזה מתקין תבדקי האם קיימים לך הקבצים האלה, אם כן- תנסי שוב לשים את הקישורים שנתתי לך בדף HTML.

אבל חשוב לשים לב שקישורים לjavaScript עדיף לשים בסוף העמוד לאחר שנקרא הHTML כדי שיהיה לJS על מה לחול…

המקום המקובל לשים את הקישורים זה לפני סגירת התגית </body>

[שרה שרה]

אני לא ממש יודעת איך להשתמש ב Bootstrap יכול להיות שלא התקנתי נכון…

אשמח לדעת איך מתקינים

אני פשוט נכנסתי לאתר שלהם והורדתי קובץ.

[Sara Cohen]

את פותחת את הCMD- שורת הפקודה ע”י לחיצה על ctrl+`

ואז רושמת שם את הפקודה:

 npm install bootstrap @popperjs/core jquery

לוחצת enter ואז זה פשוט מתקין לך את החבילה.

אם משהו לא ברור לך תכתבי..

[שרה שרה]

תודה על כל העזרה.

הוא כותב לי ככה:

2 packages are looking for funding

run npm fund for details

זה אומר שזה מותקן?

[Sara Cohen]

כן, זה אומר שהותקן לך החבילות.

את יכולה להריץ את הפקודה :

npm list bootstrap jquery @popperjs/core

כדי לראות אם התקנת החבילות עברה בהצלחה, הפקודה הזו תציג את הגרסאות המותקנות של החבילות בפרויקט שלך.

וכמובן תוסיפי את הקישורים כמו שרשמתי לך בהתחלה…