Skapa en Bootstrap-utvecklingsmiljö

I den här artikeln Vi börjar med att skapa en Bootstrap-utvecklingsmiljö. Som vi förklarade i en tidigare artikel är Bootstrap ett ramverk som gör det enkelt för oss att skapa sajter som automatiskt anpassar sig till vilken skärmstorlek som helst.

Egentligen behövs inga specialverktyg. Du kan enkelt skriva koden i textredigeraren på skrivbordet. Många har till och med stöd för HTML, CSS och Javascript. Men, integrerade utvecklingsmiljöer inkluderar andra verktyg som gör det enkelt för dig att skriva och korrekturläsa kod.

Skapa en Bootstrap-utvecklingsmiljö

För min smak är den bästa integrerade utvecklingsmiljön Visual Studio Code. Men många Linux-användare gillar det inte eftersom det skickar telemetri till Microsoft. Ändå, Det finns ett alternativ som använder VSCode-källkoden som heter VSCodium som inte delar data med någon. Det är versionen som vi kommer att använda från och med nu.

Installera VSCodium

Vi kan installera VSCodium på följande sätt:

Snap Store

sudo snap install codium --classic

platt paket

flatpak install flathub com.vscodium.codium

Debian och derivat

Vi har verifieringsnycklarna

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
Vi lägger till förvaret
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
Vi uppdaterar och installerar
sudo apt update
sudo apt install codium

Fedora / RHEL / CentOS / Rocky Linux / OpenSUSE

Vi får verifieringsnycklarna

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

Vi lägger till arkiven

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

För att installera gör vi:

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

OpenSUSE / SUSE: sudo zypper in codium

Arch Linux

Vi kan använda något av dessa två kommandon

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

Papegoja OS

sudo apt update
sudo apt install codium

Nix(OS)

nix-env -iA nixpkgs.vscodium

Konfigurera VSCodium

Beroende på installationsläget kan VSCodium vara på engelska. Vi kan enkelt ändra detta.

1. Klicka på i menyn Filer Inställningar.
2. Klicka på Förlängning.
3. vi skriver spanska i sökmotorn.
4. Klicka på tillägget Spanska.
5. Vi startar installationen genom att klicka på Installera.
6. Klicka på Byt språk och starta om.

VSCode har en enorm samling av tillägg som underlättar programmering på olika språk, och vi kan även använda dem i VSCodium. Låt oss installera den vi behöver:

1. Klicka på Inställningar.
2. Klicka på Tillägg.
3. vi skriver Bootstrap i sökmotorn.
4. Vi väljer den som säger Bootstrap 5 & Font Awesome Snippets.
5. Klicka på installera

Vi kommer att se användningen av detta tillägg när vi börjar skriva webbplatskoden. Men jag måste göra ett förtydligande. För att det ska fungera måste du skriva kommandona. Kopiera och klistra in i det här fallet fungerar inte.

Skaffar Bootstrap

Bootstrap är i grunden en samling komponenter. När vi skriver koden för en webbplats baserad på Bootstrap det första vi behöver göra är att tala om för webbläsaren var de ska hittas.

För att få Bootstrap finns det två alternativ. Det första är att ladda ner det från webbplats och lägg till det i projektfilerna och det andra är att lägga en länk till själva projektets servrar. Det kan också laddas ner med hjälp av vissa pakethanterare (jag menar de som används av olika programmeringsspråk, inte de som används av distributioner), men vi lämnar det till dokumentationen.

Tänk på det om du föredrar att arbeta med Bootstrap-filerna lokalt måste du ladda upp dem till servern med resten av webbplatsen. Om du länkar till projektets CDN-server är det inte nödvändigt.

Om du laddar ner Bootstrap-paketet ser du att det finns två mappar och en serie filer. Vi är bara intresserade av två. Från JS-mappen bootstrap.bundle.js och från CSS-mappen bootstrap.css.

Koden för båda alternativen är nästan densamma. Ändra bara platssökvägen.

Låt oss se ett exempel
Använder Bootstrap lokalt

Använder från projektet CDN

Platsen för den lokala filen är godtycklig. Jag lade dem i en mapp som heter bootrap och skapade två undermappar som heter JS och CSS.

Oroa dig inte om du inte förstod resten av koden. Det tar vi hand om i nästa artikel.

anteckning

Efter att ha publicerat artikeln upptäckte jag att vår innehållshanterare inte visar HTML-koden utan resultatet. Jag kommer att ladda upp exemplen till Github eller liknande och jag lägger skärmdumpar här.