Bootstrap izstrādes vides izveide

Šajā rakstā Sāksim ar Bootstrap izstrādes vides izveidi. Kā mēs paskaidrojām iepriekšējā rakstā, Bootstrap ir sistēma, kas ļauj mums viegli izveidot vietnes, kas automātiski pielāgojas jebkuram ekrāna izmēram.

Patiesībā nav nepieciešami īpaši instrumenti. Jūs varat viegli ierakstīt kodu teksta redaktorā uz darbvirsmas. Daudzi pat atbalsta HTML, CSS un Javascript. Bet, integrētās izstrādes vidēs ir iekļauti citi rīki, kas atvieglo koda rakstīšanu un koriģēšanu.

Bootstrap izstrādes vides izveide

Manai gaumei vislabākā integrētā izstrādes vide ir Visual Studio Code. Bet daudziem Linux lietotājiem tas nepatīk, jo tas nosūta telemetriju Microsoft. Tomēr, Ir alternatīva, kas izmanto VSCode avota kodu, ko sauc par VSCodium, kas ne ar vienu nekopīgo datus. Tas ir versiju ko izmantosim turpmāk.

VSCodium instalēšana

Mēs varam instalēt VSCodium šādos veidos:

Snap Store

sudo snap install codium --classic

plakans iepakojums

flatpak install flathub com.vscodium.codium

Debian un atvasinājumi

Mēs saņēmām verifikācijas atslēgas

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
Pievienojam krātuvi
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
Mēs atjauninām un instalējam
sudo apt update
sudo apt install codium

Fedora / RHEL / CentOS / Rocky Linux / OpenSUSE

Mēs saņemam verifikācijas atslēgas

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

Mēs pievienojam krātuves

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

Lai instalētu, mēs rīkojamies:

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

OpenSUSE / SUSE: sudo zypper in codium

Arch Linux

Mēs varam izmantot vienu no šīm divām komandām

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

Papagaiļu OS

sudo apt update
sudo apt install codium

Nix (OS)

nix-env -iA nixpkgs.vscodium

VSCodium konfigurēšana

Atkarībā no instalēšanas režīma VSCodium var būt angļu valodā. Mēs to varam viegli mainīt.

1. Izvēlnē Faili noklikšķiniet uz Preferences.
2. Klikšķiniet uz Pagarināšana.
3. Mēs rakstām spāņu meklētājprogrammā.
4. Noklikšķiniet uz paplašinājuma Spāņu valoda.
5. Mēs sākam instalēšanu, noklikšķinot uz Instalēt.
6. Klikšķiniet uz Mainiet valodu un restartējiet.

VSCode ir milzīga paplašinājumu kolekcija, kas atvieglo programmēšanu dažādās valodās, un mēs tos varam izmantot arī VSCodium. Instalēsim vajadzīgo:

1. Klikšķiniet uz Preferences
2. Klikšķiniet uz Pagarinājumi.
3. Mēs rakstām Sāknēšanas meklētājprogrammā.
4. Mēs izvēlamies to, kas saka Bootstrap 5 un fontu lieliski fragmenti.
5. Noklikšķiniet uz instalēt

Mēs redzēsim šī paplašinājuma izmantošanu, kad sāksim rakstīt vietnes kodu. Bet man ir jāprecizē. Lai tas darbotos, jums būs jāievada komandas. Kopēšana un ielīmēšana šajā gadījumā nedarbojas.

Bootstrap iegūšana

Bootstrap būtībā ir komponentu kolekcija. Kad mēs rakstām vietnes kodu, pamatojoties uz Bootstrap pirmā lieta, kas mums jādara, ir norādīt pārlūkprogrammai, kur tās atrast.

Lai iegūtu Bootstrap, ir divas alternatīvas. Pirmais ir lejupielādēt to no Mājas un pievienojiet to projekta failiem, un otrs ir ievietot saiti uz paša projekta serveriem. To var arī lejupielādēt, izmantojot dažus pakotņu pārvaldniekus (es domāju tos, ko izmanto dažādās programmēšanas valodās, nevis tos, ko izmanto izplatījumos), taču mēs to atstāsim dokumentācijā.

Lūdzu, ņemiet to vērā ja vēlaties strādāt ar Bootstrap failiem lokāli, tie būs jāaugšupielādē serverī ar pārējo vietni. Ja izveidosiet saiti uz projekta CDN serveri, tas nebūs nepieciešams.

Ja lejupielādējat Bootstrap pakotni, redzēsit, ka ir divas mapes un failu sērija. Mūs interesē tikai divi. No JS mapes bootstrap.bundle.js un no CSS mapes bootstrap.css.

Abu opciju kods ir gandrīz vienāds. Vienkārši mainiet atrašanās vietas ceļu.

Apskatīsim piemēru
Bootstrap izmantošana lokāli

Izmantojot no projekta CDN

Vietējā faila atrašanās vieta ir patvaļīga. Es ievietoju tos mapē ar nosaukumu bootrap un izveidoju divas apakšmapes ar nosaukumu JS un CSS.

Neuztraucieties, ja nesapratāt pārējo kodu. Par to mēs parūpēsimies nākamajā rakstā.

Atzīmēt

Pēc raksta publicēšanas atklāju, ka mūsu satura pārvaldnieks rāda nevis HTML kodu, bet gan rezultātu. Es augšupielādēšu piemērus Github vai līdzīgā vietnē un ielikšu šeit ekrānuzņēmumus.