„Bootstrap“ kūrimo aplinkos kūrimas

Šiame straipsnyje Pradėsime kurdami Bootstrap kūrimo aplinką. Kaip paaiškinome ankstesniame straipsnyje, „Bootstrap“ yra sistema, kuri leidžia mums lengvai kurti svetaines, kurios automatiškai prisitaiko prie bet kokio ekrano dydžio.

Tiesą sakant, specialių įrankių nereikia. Galite lengvai parašyti kodą darbalaukio teksto rengyklėje. Daugelis netgi palaiko HTML, CSS ir Javascript. bet, integruotose kūrimo aplinkose yra kitų įrankių, kurie palengvina kodo rašymą ir taisymą.

„Bootstrap“ kūrimo aplinkos kūrimas

Mano skoniui geriausia integruota kūrimo aplinka yra „Visual Studio Code“. Tačiau daugeliui „Linux“ vartotojų tai nepatinka, nes „Microsoft“ siunčia telemetriją. Nepaisant to, Yra alternatyva, kuri naudoja VSCode šaltinio kodą, vadinamą VSCodium, kuris su niekuo nesidalija duomenimis. Tai yra versiją kurį nuo šiol naudosime.

VSCodium diegimas

VSCodium galime įdiegti šiais būdais:

„Snap Store“

sudo snap install codium --classic

plokščiapaka

flatpak install flathub com.vscodium.codium

Debianas ir išvestinės priemonės

Gavome patvirtinimo raktus

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
Pridedame saugyklą
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
Atnaujiname ir įdiegiame
sudo apt update
sudo apt install codium

Fedora / RHEL / CentOS / Rocky Linux / OpenSUSE

Gauname patvirtinimo raktus

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

Pridedame saugyklas

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

Norėdami įdiegti, atliekame:

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

„OpenSUSE“ / „SUSE“: sudo zypper in codium

Arch Linux

Galime naudoti bet kurią iš šių dviejų komandų

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

Papūga OS

sudo apt update
sudo apt install codium

Nix (OS)

nix-env -iA nixpkgs.vscodium

VSCodium konfigūravimas

Priklausomai nuo diegimo režimo, VSCodium gali būti anglų kalba. Mes galime lengvai tai pakeisti.

1. Meniu Failai spustelėkite Nuostatos.
2. Spustelėkite Pratęsimas.
3. Mes rašome ispanų paieškos sistemoje.
4. Spustelėkite plėtinį Ispanų kalba.
5. Diegimą pradedame spustelėdami Diegti.
6. Spustelėkite Pakeiskite kalbą ir paleiskite iš naujo.

„VSCode“ turi didžiulę plėtinių, palengvinančių programavimą įvairiomis kalbomis, kolekciją, taip pat galime juos naudoti „VSCodium“. Įdiegkime tai, ko mums reikia:

1. Spustelėkite Nuostatos
2. Spustelėkite Pratęsimai.
3. Mes rašome Bootstrap paieškos sistemoje.
4. Mes pasirenkame tą, kuris sako „Bootstrap 5“ ir nuostabūs šrifto fragmentai.
5. Spustelėkite įdiegti

Šio plėtinio naudojimą pamatysime, kai pradėsime rašyti svetainės kodą. Bet aš turiu paaiškinti. Kad jis veiktų, turėsite įvesti komandas. Kopijuoti ir įklijuoti šiuo atveju neveikia.

„Bootstrap“ gavimas

„Bootstrap“ iš esmės yra komponentų rinkinys. Kai rašome svetainės kodą, pagrįstą „Bootstrap“. pirmas dalykas, kurį turime padaryti, tai nurodyti naršyklei, kur juos rasti.

Norėdami gauti „Bootstrap“, yra dvi alternatyvos. Pirmasis yra atsisiųsti jį iš Interneto svetainė ir pridėkite jį prie projekto failų, o antrasis - įdėti nuorodą į paties projekto serverius. Jį taip pat galima atsisiųsti naudojant kai kurias paketų tvarkykles (turiu omenyje tas, kurias naudoja skirtingos programavimo kalbos, o ne tas, kurias naudoja platinimai), tačiau paliksime tai dokumentacijai.

Turėkite tai omenyje jei norite dirbti su Bootstrap failais vietoje, turėsite įkelti juos į serverį su likusia svetainės dalimi. Jei susiesite su projekto CDN serveriu, tai nebus būtina.

Jei atsisiųsite Bootstrap paketą, pamatysite, kad yra du aplankai ir failų serija. Mus domina tik du. Iš JS aplanko bootstrap.bundle.js ir iš CSS aplanko bootstrap.css.

Abiejų parinkčių kodas yra beveik vienodas. Tiesiog pakeiskite vietos kelią.

Pažiūrėkime pavyzdį
„Bootstrap“ naudojimas vietoje

Naudojant iš projekto CDN

Vietinio failo vieta yra savavališka. Įdėjau juos į aplanką „bootrap“ ir sukūriau du poaplankius, vadinamus JS ir CSS.

Nesijaudinkite, jei nesupratote likusios kodo dalies. Tuo pasirūpinsime kitame straipsnyje.

Pažymėti

Paskelbus straipsnį sužinojau, kad mūsų turinio tvarkyklė rodo ne HTML kodą, o rezultatą. Pavyzdžius įkelsiu į Github ar panašiai ir čia patalpinsiu ekrano kopijas.