Oprettelse af et Bootstrap-udviklingsmiljø

I denne artikel Vi starter med at skabe et Bootstrap-udviklingsmiljø. Som vi forklarede i en tidligere artikel, er Bootstrap en ramme, der gør det nemt for os at oprette websteder, der automatisk tilpasser sig enhver skærmstørrelse.

Faktisk er der ikke behov for specialværktøj. Du kan nemt skrive koden i teksteditoren på dit skrivebord. Mange har endda understøttelse af HTML, CSS og Javascript. Men, integrerede udviklingsmiljøer omfatter andre værktøjer, der gør det nemt for dig at skrive og korrekturlæse kode.

Oprettelse af et Bootstrap-udviklingsmiljø

For min smag er det bedste integrerede udviklingsmiljø Visual Studio Code. Men mange Linux-brugere kan ikke lide det, fordi det sender telemetri til Microsoft. Alligevel, Der er et alternativ, der bruger VSCode-kildekoden kaldet VSCodium, der ikke deler data med nogen. Det er versionen som vi vil bruge fra nu af.

Installation af VSCodium

Vi kan installere VSCodium på følgende måder:

Snap Store

sudo snap install codium --classic

flad pakke

flatpak install flathub com.vscodium.codium

Debian og derivater

Vi har bekræftelsesnøglerne

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 tilføjer arkivet
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 opdaterer og installerer
sudo apt update
sudo apt install codium

Fedora / RHEL / CentOS / Rocky Linux / OpenSUSE

Vi får bekræftelsesnøglerne

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

Vi tilføjer depoterne

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

For at installere gør vi:

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

OpenSUSE / SUSE: sudo zypper in codium

Arch Linux

Vi kan bruge en af ​​disse to kommandoer

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

Papegøje OS

sudo apt update
sudo apt install codium

Nix(OS)

nix-env -iA nixpkgs.vscodium

Konfiguration af VSCodium

Afhængigt af installationstilstanden kan VSCodium være på engelsk. Det kan vi sagtens ændre på.

1. Klik på i menuen Filer Indstillinger.
2. Klik på Extension.
3. vi skriver spansk i søgemaskinen.
4. Klik på udvidelsen Spanish Language.
5. Vi starter installationen ved at klikke på Installer.
6. Klik på Skift sprog og genstart.

VSCode har en enorm samling af udvidelser, der letter programmering på forskellige sprog, og vi kan også bruge dem i VSCodium. Lad os installere den, vi skal bruge:

1. Klik på Indstillinger.
2. Klik på Udvidelser.
3. vi skriver Bootstrap i søgemaskinen.
4. Vi vælger den, der siger Bootstrap 5 & Font Awesome Snippets.
5. Klik på installer

Vi vil se brugen af ​​denne udvidelse, når vi begynder at skrive webstedskoden. Men jeg er nødt til at komme med en afklaring. For at det skal virke, skal du skrive kommandoerne. Kopier og indsæt i dette tilfælde virker ikke.

Får Bootstrap

Bootstrap er dybest set en samling af komponenter. Når vi skriver koden til en hjemmeside baseret på Bootstrap den første ting, vi skal gøre, er at fortælle browseren, hvor den skal finde dem.

For at få Bootstrap er der to alternativer. Den første er at downloade den fra webside og føj det til projektfilerne, og det andet er at sætte et link til selve projektets servere. Det kan også downloades ved hjælp af nogle pakkeadministratorer (jeg mener dem, der bruges af forskellige programmeringssprog, ikke dem, der bruges af distributioner), men vi overlader det til dokumentationen.

Bemærk venligst hvis du foretrækker at arbejde med Bootstrap-filerne lokalt, skal du uploade dem til serveren med resten af ​​hjemmesiden. Hvis du linker til projektets CDN-server, er det ikke nødvendigt.

Hvis du downloader Bootstrap-pakken, vil du se, at der er to mapper og en række filer. Vi er kun interesseret i to. Fra JS-mappen bootstrap.bundle.js og fra CSS-mappen bootstrap.css.

Koden for begge muligheder er næsten den samme. Skift blot placeringsstien.

lad os se et eksempel
Brug af Bootstrap lokalt

Bruger fra projektet CDN

Placeringen af ​​den lokale fil er vilkårlig. Jeg lagde dem i en mappe kaldet bootrap og oprettede to undermapper kaldet JS og CSS.

Bare rolig, hvis du ikke forstod resten af ​​koden. Det tager vi os af i næste artikel.

note

Efter at have publiceret artiklen opdagede jeg, at vores content manager ikke viser HTML-koden, men resultatet. Jeg vil uploade eksemplerne til Github eller lignende, og jeg vil lægge skærmbilleder her.