יצירת סביבת פיתוח Bootstrap

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

למעשה, אין צורך בכלים מיוחדים. אתה יכול בקלות לכתוב את הקוד בעורך הטקסט על שולחן העבודה שלך. לרבים יש אפילו תמיכה ב-HTML, CSS ו-Javascript. אבל, סביבות פיתוח משולבות כוללות כלים אחרים המקלים עליך לכתוב ולהגהה קוד.

יצירת סביבת פיתוח Bootstrap

לטעמי, סביבת הפיתוח המשולבת הטובה ביותר היא Visual Studio Code. אבל, משתמשי לינוקס רבים לא אוהבים את זה כי זה שולח טלמטריה למיקרוסופט. על כל פנים, קיימת חלופה המשתמשת בקוד המקור VSCode בשם VSCodium שאינה חולקת נתונים עם אף אחד. זה הגרסא בו נשתמש מעתה ואילך.

התקנת VSCodium

אנו יכולים להתקין VSCodium בדרכים הבאות:

חנות Snap

sudo snap install codium --classic

מארז שטוח

flatpak install flathub com.vscodium.codium

דביאן ונגזרים

קיבלנו את מפתחות האימות

wget -qO - https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/raw/master/pub.gpg \
| gpg --dearmor \
| sudo dd of=/usr/share/keyrings/vscodium-archive-keyring.gpg
אנו מוסיפים את המאגר
echo 'deb [ חתום על ידי=/usr/share/keyrings/vscodium-archive-keyring.gpg ] https://download.vscodium.com/debs vscodium main' \
| sudo tee /etc/apt/sources.list.d/vscodium.list
אנו מעדכנים ומתקינים
sudo apt update
sudo apt install codium

פדורה / RHEL / CentOS / RockyLinux / OpenSUSE

אנחנו מקבלים את מפתחות האימות

sudo rpmkeys --import https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/-/raw/master/pub.gpg

אנו מוסיפים את המאגרים

פדורה/RHEL/CentOS/RockyLinux: printf "[gitlab.com_paulcarroty_vscodium_repo]\nname=download.vscodium.com\nbaseurl=https://download.vscodium.com/rpms/\nenabled=1\ngpgcheck=1\nrepo_gpgcheck=1\ngpgkey=https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/-/raw/master/pub.gpg\nmetadata_expire=1h" | sudo tee -a /etc/yum.repos.d/vscodium.repo

OpenSUSE/SUSE: printf "[gitlab.com_paulcarroty_vscodium_repo]\nname=gitlab.com_paulcarroty_vscodium_repo\nbaseurl=https://download.vscodium.com/rpms/\nenabled=1\ngpgcheck=1\nrepo_gpgcheck=1\ngpgkey=https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/-/raw/master/pub.gpg\nmetadata_expire=1h" | sudo tee -a /etc/zypp/repos.d/vscodium.repo

כדי להתקין אנחנו עושים:

פדורה/RHEL/CentOS/RockyLinux: sudo dnf install codium

OpenSUSE / SUSE: sudo zypper in codium

Arch Linux

אנו יכולים להשתמש באחת משתי הפקודות הללו

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

תוכנת מערכת הפעלה תוכי

sudo apt update
sudo apt install codium

Nix(OS)

nix-env -iA nixpkgs.vscodium

הגדרת VSCodium

בהתאם למצב ההתקנה, VSCodium עשוי להיות באנגלית. אנחנו יכולים לשנות את זה בקלות.

1. בתפריט קבצים לחץ על העדפות.
2. לחץ על הארכה.
3. אנחנו כותבים ספרדי במנוע החיפוש.
4. לחץ על התוסף ספרדית שפה.
5. אנו מתחילים את ההתקנה על ידי לחיצה על התקן.
6. לחץ על שנה שפה והפעל מחדש.

ל- VSCode יש אוסף עצום של הרחבות המאפשרות תכנות בשפות שונות, ואנחנו יכולים להשתמש בהן גם ב- VSCodium. בואו נתקין את זה שאנחנו צריכים:

1. לחץ על העדפות
2. לחץ על הרחבות.
3. אנחנו כותבים אוזן נעל במנוע החיפוש.
4. אנחנו בוחרים את זה שאומר Bootstrap 5 וקטעי Font Awesome Snippets.
5. לחץ על התקן

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

מקבל את Bootstrap

Bootstrap הוא בעצם אוסף של רכיבים. כאשר אנו כותבים קוד של אתר המבוסס על Bootstrap הדבר הראשון שעלינו לעשות הוא לומר לדפדפן היכן למצוא אותם.

כדי להשיג Bootstrap יש שתי חלופות. הראשון הוא להוריד אותו מה- אתר אינטרנט ולהוסיף אותו לקבצי הפרויקט והשני הוא לשים קישור לשרתים של הפרויקט עצמו. ניתן להוריד אותו גם באמצעות כמה מנהלי חבילות (כלומר אלה המשמשים שפות תכנות שונות, לא אלה המשמשות הפצות) אבל נשאיר את זה לתיעוד.

שימו לב אם אתה מעדיף לעבוד עם קבצי Bootstrap באופן מקומי, תצטרך להעלות אותם לשרת עם שאר האתר. אם אתה מקשר לשרת CDN של הפרויקט, זה לא יהיה נחוץ.

אם תוריד את חבילת Bootstrap תראה שיש שתי תיקיות וסדרת קבצים. אנחנו מעוניינים רק בשניים. מתיקיית JS bootstrap.bundle.js ומתיקיית ה-CSS bootstrap.css.

הקוד של שתי האפשרויות כמעט זהה. פשוט שנה את נתיב המיקום.

בואו נסתכל על דוגמה
שימוש ב-Bootstrap באופן מקומי

שימוש מהפרויקט CDN

המיקום של הקובץ המקומי הוא שרירותי. הכנסתי אותם לתיקיה בשם bootrap ויצרתי שתי תיקיות משנה בשם JS ו-CSS.

אל תדאג אם לא הבנת את שאר הקוד. אנחנו נדאג לזה במאמר הבא.

הערה

לאחר פרסום המאמר גיליתי שמנהל התוכן שלנו לא מציג את קוד ה-HTML אלא את התוצאה. אני אעלה את הדוגמאות ל-Github או דומה ואשים כאן צילומי מסך.