Opprette et Bootstrap-utviklingsmiljø

I denne artikkelen Vi starter med å lage et Bootstrap-utviklingsmiljø. Som vi forklarte i en tidligere artikkel, er Bootstrap et rammeverk som gjør det enkelt for oss å lage nettsteder som automatisk tilpasser seg alle skjermstørrelser.

Egentlig er det ikke nødvendig med spesialverktøy. Du kan enkelt skrive koden i tekstredigeringsprogrammet på skrivebordet. Mange har til og med støtte for HTML, CSS og Javascript. Men, integrerte utviklingsmiljøer inkluderer andre verktøy som gjør det enkelt for deg å skrive og korrekturlese kode.

Opprette et Bootstrap-utviklingsmiljø

For min smak er det beste integrerte utviklingsmiljøet Visual Studio Code. Men mange Linux-brukere liker det ikke fordi det sender telemetri til Microsoft. Likevel, Det er et alternativ som bruker VSCode-kildekoden kalt VSCodium som ikke deler data med noen. Det er versjonen som vi vil bruke fra nå av.

Installere VSCodium

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

Snap Store

sudo snap install codium --classic

flat pakke

flatpak install flathub com.vscodium.codium

Debian og derivater

Vi har bekreftelsesnøklene

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 legger til depotet
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 oppdaterer og installerer
sudo apt update
sudo apt install codium

Fedora / RHEL / CentOS / Rocky Linux / OpenSUSE

Vi får bekreftelsesnøklene

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

Vi legger til depotene

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 å installere gjør vi:

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

OpenSUSE / SUSE: sudo zypper in codium

Arch Linux

Vi kan bruke en av disse to kommandoene

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

Papegøye OS

sudo apt update
sudo apt install codium

Nix(OS)

nix-env -iA nixpkgs.vscodium

Konfigurere VSCodium

Avhengig av installasjonsmodus kan VSCodium være på engelsk. Dette kan vi enkelt endre.

1. Klikk på i Filer-menyen Preferanser.
2. Klikk på Extension.
3. Vi skriver spansk i søkemotoren.
4. Klikk på utvidelsen Spansk språk.
5. Vi starter installasjonen ved å klikke på Installer.
6. Klikk på Endre språk og start på nytt.

VSCode har en enorm samling av utvidelser som letter programmering på forskjellige språk, og vi kan også bruke dem i VSCodium. La oss installere den vi trenger:

1. Klikk på Preferanser.
2. Klikk på Utvidelser.
3. Vi skriver Bootstrap i søkemotoren.
4. Vi velger den som sier Bootstrap 5 & Font Awesome Snippets.
5. Klikk på installer

Vi vil se bruken av denne utvidelsen når vi begynner å skrive nettstedskoden. Men jeg må gjøre en avklaring. For at det skal fungere, må du skrive inn kommandoene. Kopier og lim inn i dette tilfellet fungerer ikke.

Får Bootstrap

Bootstrap er i utgangspunktet en samling komponenter. Når vi skriver koden til et nettsted basert på Bootstrap det første vi må gjøre er å fortelle nettleseren hvor de skal finne dem.

For å få Bootstrap er det to alternativer. Den første er å laste den ned fra nettsted og legg den til prosjektfilene, og den andre er å sette en lenke til serverne til selve prosjektet. Det kan også lastes ned ved hjelp av noen pakkebehandlinger (jeg mener de som brukes av forskjellige programmeringsspråk, ikke de som brukes av distribusjoner), men vi overlater det til dokumentasjonen.

Husk det hvis du foretrekker å jobbe med Bootstrap-filene lokalt, må du laste dem opp til serveren med resten av nettstedet. Hvis du kobler til prosjektets CDN-server, vil det ikke være nødvendig.

Hvis du laster ned Bootstrap-pakken vil du se at det er to mapper og en serie filer. Vi er kun interessert i to. Fra JS-mappen bootstrap.bundle.js og fra CSS-mappen bootstrap.css.

Koden for begge alternativene er nesten den samme. Bare endre plasseringsbanen.

La oss se et eksempel
Bruker Bootstrap lokalt

Bruker fra prosjektet CDN

Plasseringen av den lokale filen er vilkårlig. Jeg la dem i en mappe kalt bootrap og opprettet to undermapper kalt JS og CSS.

Ikke bekymre deg hvis du ikke forsto resten av koden. Det tar vi vare på i neste artikkel.

note

Etter å ha publisert artikkelen oppdaget jeg at innholdsbehandleren vår ikke viser HTML-koden, men resultatet. Jeg vil laste opp eksemplene til Github eller lignende og jeg legger skjermbilder her.