Erstellen einer Bootstrap-Entwicklungsumgebung

In diesem Artikel Wir beginnen mit der Erstellung einer Bootstrap-Entwicklungsumgebung. Wie wir in einem früheren Artikel erklärt haben, ist Bootstrap ein Framework, das es uns leicht macht, Websites zu erstellen, die sich automatisch an jede Bildschirmgröße anpassen.

Eigentlich werden keine Spezialwerkzeuge benötigt. Sie könnten den Code einfach im Texteditor auf Ihrem Desktop schreiben. Viele unterstützen sogar HTML, CSS und Javascript. Aber, Integrierte Entwicklungsumgebungen umfassen andere Tools, die Ihnen das Schreiben und Korrekturlesen von Code erleichtern.

Erstellen einer Bootstrap-Entwicklungsumgebung

Die beste integrierte Entwicklungsumgebung ist für meinen Geschmack Visual Studio Code. Aber viele Linux-Benutzer mögen es nicht, weil es Telemetriedaten an Microsoft sendet. Nichtsdestotrotz, Es gibt eine Alternative, die den VSCode-Quellcode namens VSCodium verwendet, der Daten mit niemandem teilt. Das ist die Version die wir ab jetzt verwenden werden.

Installation von VSCodium

Wir können VSCodium auf folgende Weise installieren:

Snap Store

sudo snap install codium --classic

Flatpack

flatpak install flathub com.vscodium.codium

Debian und Derivate

Wir haben die Bestätigungsschlüssel erhalten

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
Wir fügen das Repository hinzu
echo 'deb [signed-by=/usr/share/keyrings/vscodium-archive-keyring.gpg ] https://download.vscodium.com/debs vscodium main' \
| sudo tee /etc/apt/sources.list.d/vscodium.list
Wir aktualisieren und installieren
sudo apt update
sudo apt install codium

Fedora / RHEL / CentOS / Rocky Linux / OpenSUSE

Wir erhalten die Verifizierungsschlüssel

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

Wir fügen die Repositories hinzu

Fedora/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

Zur Installation machen wir:

Fedora/RHEL/CentOS/RockyLinux: sudo dnf install codium

OpenSUSE / SUSE: sudo zypper in codium

Arch Linux

Wir können einen dieser beiden Befehle verwenden

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

Papagei OS

sudo apt update
sudo apt install codium

Nix (Betriebssystem)

nix-env -iA nixpkgs.vscodium

Konfigurieren von VSCodium

Je nach Installationsmodus kann VSCodium auf Englisch sein. Das können wir leicht ändern.

1. Klicken Sie im Menü Dateien auf Einstellungen.
2. Klicke auf Erweiterung.
3. Wir schreiben spanisch in der Suchmaschine.
4. Klicken Sie auf die Erweiterung Spanische Sprache.
5. Wir starten die Installation mit einem Klick auf Installieren.
6. Klicke auf Sprache ändern und neu starten.

VSCode hat eine riesige Sammlung von Erweiterungen, die das Programmieren in verschiedenen Sprachen erleichtern, und wir können sie auch in VSCodium verwenden. Lassen Sie uns das installieren, was wir brauchen:

1. Klicke auf Einstellungen.
2. Klicke auf Erweiterungen.
3. Wir schreiben Bootstrap in der Suchmaschine.
4. Wir wählen den aus, der sagt Bootstrap 5 & Font Awesome Snippets.
5. Klicken Sie auf Installieren

Wir werden die Verwendung dieser Erweiterung sehen, wenn wir mit dem Schreiben des Site-Codes beginnen. Aber ich muss eine Klarstellung machen. Damit es funktioniert, müssen Sie die Befehle eingeben. Kopieren und Einfügen funktioniert in diesem Fall nicht.

Bootstrap bekommen

Bootstrap ist im Grunde eine Sammlung von Komponenten. Wenn wir den Code einer Website basierend auf Bootstrap schreiben Als erstes müssen wir dem Browser mitteilen, wo er sie finden kann.

Um Bootstrap zu bekommen gibt es zwei Alternativen. Die erste ist, es von der herunterzuladen Webseite und fügen Sie es den Projektdateien hinzu und die zweite besteht darin, einen Link zu den Servern des Projekts selbst zu setzen. Es kann auch mit einigen Paketmanagern heruntergeladen werden (ich meine die, die von verschiedenen Programmiersprachen verwendet werden, nicht die von Distributionen), aber das überlassen wir der Dokumentation.

Denken Sie daran, dass Wenn Sie lieber lokal mit den Bootstrap-Dateien arbeiten möchten, müssen Sie sie auf den Server hochladen mit dem Rest der Website. Wenn Sie auf den CDN-Server des Projekts verlinken, ist dies nicht erforderlich.

Wenn Sie das Bootstrap-Paket herunterladen, werden Sie sehen, dass es zwei Ordner und eine Reihe von Dateien gibt. Uns interessieren nur zwei. Aus dem JS-Ordner bootstrap.bundle.js und aus dem CSS-Ordner bootstrap.css.

Der Code für beide Optionen ist fast gleich. Ändern Sie einfach den Standortpfad.

Sehen wir uns ein Beispiel an
Bootstrap lokal verwenden

Verwendung aus dem Projekt CDN

Der Speicherort der lokalen Datei ist beliebig. Ich habe sie in einen Ordner namens bootrap gelegt und zwei Unterordner namens JS und CSS erstellt.

Machen Sie sich keine Sorgen, wenn Sie den Rest des Codes nicht verstanden haben. Darum kümmern wir uns im nächsten Artikel.

Hinweis:

Nach der Veröffentlichung des Artikels stellte ich fest, dass unser Content Manager nicht den HTML-Code, sondern das Ergebnis anzeigt. Ich werde die Beispiele auf Github oder ähnliches hochladen und Screenshots hier einfügen.