Vytvoření vývojového prostředí Bootstrap

V tomto článku Začneme vytvořením vývojového prostředí Bootstrap. Jak jsme vysvětlili v předchozím článku, Bootstrap je rámec, který nám usnadňuje vytváření webů, které se automaticky přizpůsobí jakékoli velikosti obrazovky.

Ve skutečnosti nejsou potřeba žádné speciální nástroje. Kód můžete snadno napsat v textovém editoru na ploše. Mnoho z nich dokonce podporuje HTML, CSS a Javascript. Ale, integrovaná vývojová prostředí zahrnují další nástroje, které vám usnadní psaní a kontrolu kódu.

Vytvoření vývojového prostředí Bootstrap

Na můj vkus je nejlepší integrované vývojové prostředí Visual Studio Code. Ale mnoha uživatelům Linuxu se to nelíbí, protože posílá telemetrii Microsoftu. Nicméně, Existuje alternativa, která používá zdrojový kód VSCode s názvem VSCodium, který s nikým nesdílí data. To je verze které budeme od této chvíle používat.

Instalace VSCodium

VSCodium můžeme nainstalovat následujícími způsoby:

Snap Store

sudo snap install codium --classic

ploché balení

flatpak install flathub com.vscodium.codium

Debian a deriváty

Máme ověřovací klíče

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
Přidáme úložiště
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
Aktualizujeme a instalujeme
sudo apt update
sudo apt install codium

Fedora / RHEL / CentOS / Rocky Linux / OpenSUSE

Dostáváme ověřovací klíče

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

Přidáme úložiště

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

Pro instalaci provedeme:

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

OpenSUSE / SUSE: sudo zypper in codium

Arch Linux

Můžeme použít kterýkoli z těchto dvou příkazů

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

Papoušek OS

sudo apt update
sudo apt install codium

Nix (OS)

nix-env -iA nixpkgs.vscodium

Konfigurace VSCodium

V závislosti na režimu instalace může být VSCodium v ​​angličtině. To můžeme snadno změnit.

1. V nabídce Soubory klikněte na Předvolby.
2. Klikněte na Prodloužení.
3. Píšeme španělský ve vyhledávači.
4. Klikněte na rozšíření Španělský jazyk.
5. Instalaci spustíme kliknutím na Instalovat.
6. Klikněte na Změňte jazyk a restartujte.

VSCode má obrovskou sbírku rozšíření, která usnadňují programování v různých jazycích, a můžeme je také použít ve VSCodium. Pojďme nainstalovat ten, který potřebujeme:

1. Klikněte na Preference.
2. Klikněte na Rozšíření.
3. Píšeme Bootstrap ve vyhledávači.
4. Vybereme ten, který říká Bootstrap 5 a úžasné úryvky písem.
5. Klikněte na nainstalovat

Využití tohoto rozšíření uvidíme, až začneme psát kód webu. Ale musím to upřesnit. Aby to fungovalo, budete muset zadat příkazy. Kopírování a vkládání v tomto případě nefunguje.

Získání Bootstrap

Bootstrap je v podstatě sbírka komponent. Když píšeme kód webu na základě Bootstrapu první věc, kterou musíme udělat, je sdělit prohlížeči, kde je najde.

Chcete-li získat Bootstrap, existují dvě alternativy. První je stáhnout si ji z webová stránka a přidejte jej do souborů projektu a druhým je vložení odkazu na servery samotného projektu. Dá se také stáhnout pomocí některých správců balíčků (myslím ty, které používají různé programovací jazyky, ne ty, které používají distribuce), ale to necháme na dokumentaci.

Mějte na paměti, že pokud dáváte přednost práci se soubory Bootstrap lokálně, budete je muset nahrát na server se zbytkem webu. Pokud se připojíte k serveru CDN projektu, nebude to nutné.

Pokud si stáhnete balíček Bootstrap, uvidíte, že existují dvě složky a řada souborů. Nás zajímají jen dva. Ze složky JS bootstrap.bundle.js a ze složky CSS bootstrap.css.

Kód pro obě možnosti je téměř stejný. Stačí změnit cestu umístění.

Podívejme se na příklad
Místní použití Bootstrap

Použití z projektu CDN

Umístění místního souboru je libovolné. Vložil jsem je do složky s názvem bootrap a vytvořil dvě podsložky s názvem JS a CSS.

Nedělejte si starosti, pokud nerozumíte zbytku kódu. O to se postaráme v dalším článku.

poznámka

Po zveřejnění článku jsem zjistil, že náš správce obsahu nezobrazuje HTML kód, ale výsledek. Příklady nahraju na Github nebo podobný a dám sem screenshoty.