Een Bootstrap-ontwikkelomgeving creëren

In dit artikel We beginnen met het maken van een Bootstrap-ontwikkelomgeving. Zoals we in een vorig artikel hebben uitgelegd, is Bootstrap een raamwerk waarmee we gemakkelijk sites kunnen maken die zich automatisch aanpassen aan elke schermgrootte.

Er is eigenlijk geen speciaal gereedschap nodig. U kunt de code eenvoudig in de teksteditor op uw bureaublad schrijven. Velen hebben zelfs ondersteuning voor HTML, CSS en Javascript. Maar, geïntegreerde ontwikkelomgevingen bevatten andere tools waarmee u gemakkelijk code kunt schrijven en proeflezen.

Een Bootstrap-ontwikkelomgeving creëren

Naar mijn smaak is Visual Studio Code de beste geïntegreerde ontwikkelomgeving. Maar veel Linux-gebruikers vinden het niet leuk omdat het telemetrie naar Microsoft verzendt. Hoe dan ook, Er is een alternatief dat de VSCode-broncode gebruikt, VSCodium genaamd, die met niemand gegevens deelt. Dat is de versie die we vanaf nu gaan gebruiken.

VSCodium installeren

We kunnen VSCodium op de volgende manieren installeren:

Snap Store

sudo snap install codium --classic

platte verpakking

flatpak install flathub com.vscodium.codium

Debian en derivaten

We hebben de verificatiesleutels

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
We voegen de repository toe
echo 'deb [ ondertekend door=/usr/share/keyrings/vscodium-archive-keyring.gpg ] https://download.vscodium.com/debs vscodium main' \
| sudo tee /etc/apt/sources.list.d/vscodium.list
We updaten en installeren
sudo apt update
sudo apt install codium

Fedora / RHEL / CentOS / Rocky Linux / OpenSUSE

We krijgen de verificatiesleutels

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

We voegen de repositories toe

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

Om te installeren doen we:

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

OpenSUSE / SUSE: sudo zypper in codium

Arch Linux

We kunnen een van deze twee commando's gebruiken

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

Papegaai OS

sudo apt update
sudo apt install codium

Nix(OS)

nix-env -iA nixpkgs.vscodium

VSCodium configureren

Afhankelijk van de installatiemodus is VSCodium mogelijk in het Engels. We kunnen dit gemakkelijk veranderen.

1. Klik in het menu Bestanden op Voorkeuren.
2. Klik op Verlenging.
3. we schrijven Spaans in de zoekmachine.
4. Klik op de extensie Spaanse Taal.
5. We starten de installatie door op . te klikken Installeren.
6. Klik op Wijzig de taal en start opnieuw.

VSCode heeft een enorme verzameling extensies die het programmeren in verschillende talen vergemakkelijken, en we kunnen ze ook gebruiken in VSCodium. Laten we degene installeren die we nodig hebben:

1. Klik op Voorkeuren.
2. Klik op Extensies.
3. we schrijven Bootstrap in de zoekmachine.
4. We selecteren degene die zegt: Bootstrap 5 & Font Awesome-fragmenten.
5. Klik op installeren

We zullen het gebruik van deze extensie zien wanneer we beginnen met het schrijven van de sitecode. Maar ik moet een verduidelijking geven. Om het te laten werken, moet u de opdrachten typen. Kopiëren en plakken werkt in dit geval niet.

Bootstrap verkrijgen

Bootstrap is in feite een verzameling componenten. Wanneer we de code van een website schrijven op basis van Bootstrap het eerste dat we moeten doen, is de browser vertellen waar ze te vinden zijn.

Om Bootstrap te krijgen zijn er twee alternatieven. De eerste is om het te downloaden van de website en voeg het toe aan de projectbestanden en de tweede is om een ​​link naar de servers van het project zelf te plaatsen. Het kan ook worden gedownload met behulp van sommige pakketbeheerders (ik bedoel die gebruikt door verschillende programmeertalen, niet die gebruikt worden door distributies), maar dat laten we aan de documentatie over.

Onthoud dat als je liever lokaal met de Bootstrap-bestanden werkt, moet je ze uploaden naar de server met de rest van de website. Als u een koppeling maakt naar de CDN-server van het project, is dit niet nodig.

Als u het Bootstrap-pakket downloadt, ziet u dat er twee mappen en een reeks bestanden zijn. We zijn maar in twee geïnteresseerd. Uit de JS-map bootstrap.bundel.js en uit de CSS-map bootstrap.css.

De code voor beide opties is bijna hetzelfde. Verander gewoon het locatiepad.

laten we een voorbeeld bekijken
Lokaal Bootstrap gebruiken

Gebruik van het project CDN

De locatie van het lokale bestand is willekeurig. Ik heb ze in een map met de naam bootrap geplaatst en twee submappen gemaakt met de naam JS en CSS.

Maak je geen zorgen als je de rest van de code niet hebt begrepen. Daar zorgen we in het volgende artikel voor.

notitie

Na publicatie van het artikel ontdekte ik dat onze contentmanager niet de HTML-code toont maar het resultaat. Ik zal de voorbeelden uploaden naar Github of iets dergelijks en ik zal hier screenshots plaatsen.