Bootstrap-kehitysympäristön luominen

Tässä artikkelissa Aloitamme luomalla Bootstrap-kehitysympäristön. Kuten selitimme edellisessä artikkelissa, Bootstrap on kehys, jonka avulla voimme helposti luoda sivustoja, jotka mukautuvat automaattisesti mihin tahansa näyttökokoon.

Itse asiassa erikoistyökaluja ei tarvita. Voit kirjoittaa koodin helposti työpöydälläsi olevaan tekstieditoriin. Monilla on jopa tuki HTML:lle, CSS:lle ja Javascriptille. Mutta, integroidut kehitysympäristöt sisältävät muita työkaluja, jotka helpottavat koodin kirjoittamista ja oikolukua.

Bootstrap-kehitysympäristön luominen

Minun makuuni paras integroitu kehitysympäristö on Visual Studio Code. Mutta monet Linux-käyttäjät eivät pidä siitä, koska se lähettää telemetriaa Microsoftille. Tästä huolimatta, On olemassa vaihtoehto, joka käyttää VSCode-lähdekoodia nimeltä VSCodium, joka ei jaa tietoja kenenkään kanssa. Tuo on version jota käytämme tästä eteenpäin.

VSCodiumin asennus

Voimme asentaa VSCodiumin seuraavilla tavoilla:

Snap Store

sudo snap install codium --classic

litteä pakkaus

flatpak install flathub com.vscodium.codium

Debian ja johdannaiset

Saimme vahvistusavaimet

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
Lisätään arkisto
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
Päivitämme ja asennamme
sudo apt update
sudo apt install codium

Fedora / RHEL / CentOS / Rocky Linux / OpenSUSE

Saamme vahvistusavaimet

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

Lisäämme arkistot

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

Asennamme seuraavasti:

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

OpenSUSE / SUSE: sudo zypper in codium

Arch Linux

Voimme käyttää jompaa kumpaa näistä kahdesta komennosta

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

Papukaija OS

sudo apt update
sudo apt install codium

Nix (OS)

nix-env -iA nixpkgs.vscodium

VSCodiumin määrittäminen

Asennustilasta riippuen VSCodium voi olla englanninkielinen. Voimme muuttaa tämän helposti.

1. Napsauta Tiedostot-valikossa Mieltymykset.
2. Klikkaa Laajentaminen.
3. kirjoitamme espanjalainen hakukoneessa.
4. Napsauta laajennusta Espanjan kieli.
5. Aloitamme asennuksen napsauttamalla Asenna.
6. Klikkaa Vaihda kieli ja käynnistä uudelleen.

VSCodella on valtava kokoelma laajennuksia, jotka helpottavat ohjelmointia eri kielillä, ja voimme käyttää niitä myös VSCodiumissa. Asennamme tarvitsemamme:

1. Klikkaa Mieltymykset.
2. Klikkaa Laajennukset.
3. kirjoitamme Bootstrap hakukoneessa.
4. Valitsemme sen, joka sanoo Bootstrap 5 & Font Mahtavia katkelmia.
5. Napsauta asennuspainiketta

Näemme tämän laajennuksen käytön, kun alamme kirjoittaa sivustokoodia. Mutta minun on tehtävä selvennys. Jotta se toimisi, sinun on kirjoitettava komennot. Kopioi ja liitä ei tässä tapauksessa toimi.

Bootstrapin hankkiminen

Bootstrap on pohjimmiltaan kokoelma komponentteja. Kun kirjoitamme Bootstrapiin perustuvan verkkosivuston koodin ensimmäinen asia, joka meidän on tehtävä, on kertoa selaimelle, mistä ne löytää.

Bootstrapin hankkimiseen on kaksi vaihtoehtoa. Ensimmäinen on ladata se osoitteesta verkkosivusto ja lisää se projektitiedostoihin ja toinen on laittaa linkki itse projektin palvelimille. Se voidaan ladata myös joillakin paketinhallintaohjelmilla (tarkoitan eri ohjelmointikielten käyttämiä, en jakeluissa käyttämiä), mutta jätämme sen dokumentaation varaan.

Huomaa, että jos haluat työskennellä Bootstrap-tiedostojen kanssa paikallisesti, sinun on ladattava ne palvelimelle muun verkkosivuston kanssa. Jos linkität projektin CDN-palvelimeen, se ei ole tarpeen.

Jos lataat Bootstrap-paketin, näet, että siinä on kaksi kansiota ja sarja tiedostoja. Meitä kiinnostaa vain kaksi. JS-kansiosta bootstrap.bundle.js ja CSS-kansiosta bootstrap.css.

Molempien vaihtoehtojen koodi on lähes sama. Muuta vain sijaintipolkua.

Katsotaanpa esimerkkiä
Bootstrapin käyttö paikallisesti

Käytetään CDN-projektista

Paikallisen tiedoston sijainti on mielivaltainen. Laitoin ne kansioon nimeltä bootrap ja loin kaksi alikansiota nimeltä JS ja CSS.

Älä huoli, jos et ymmärtänyt koodin muuta osaa. Huolehdimme siitä seuraavassa artikkelissa.

Huomata

Artikkelin julkaisemisen jälkeen huomasin, että sisällönhallinta ei näytä HTML-koodia vaan tulosta. Lataan esimerkit Githubiin tai vastaavaan ja laitan kuvakaappauksia tänne.