خلق بيئة تطوير Bootstrap

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

في الواقع ، ليست هناك حاجة إلى أدوات خاصة. يمكنك بسهولة كتابة الكود في محرر النصوص على سطح المكتب. حتى أن الكثير منهم لديهم دعم لـ HTML و CSS و Javascript. ولكن، تتضمن بيئات التطوير المتكاملة أدوات أخرى تسهل عليك كتابة التعليمات البرمجية وتصحيحها.

خلق بيئة تطوير Bootstrap

بالنسبة لي ، فإن أفضل بيئة تطوير متكاملة هي Visual Studio Code. لكن العديد من مستخدمي Linux لا يحبون ذلك لأنه يرسل التتبع عن بعد إلى Microsoft. مع ذلك، هناك بديل يستخدم كود مصدر 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
نضيف المستودع
صدى "deb [موقع بواسطة = / usr / share / keyrings / vscodium-archive-keyring.gpg] https://download.vscodium.com/debs vscodium main '\
| سودو تي /etc/apt/sources.list.d/vscodium.list
نقوم بالتحديث والتثبيت
sudo apt update
sudo apt install codium

Fedora / RHEL / CentOS / Rocky Linux / 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

قوس لينكس

يمكننا استخدام أي من هذين الأمرين

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

ببغاء نظام التشغيل

sudo apt update
sudo apt install codium

نيكس (نظام تشغيل)

nix-env -iA nixpkgs.vscodium

تكوين VSCوديوم

اعتمادًا على وضع التثبيت ، قد يكون 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 أو ما شابهها وسأضع لقطات شاشة هنا.