Bootstrapi arenduskeskkonna loomine

Selles artiklis Alustame Bootstrapi arenduskeskkonna loomisega. Nagu eelmises artiklis selgitasime, on Bootstrap raamistik, mis võimaldab meil hõlpsasti luua saite, mis kohanduvad automaatselt mis tahes ekraanisuurusega.

Tegelikult pole spetsiaalseid tööriistu vaja. Koodi saate hõlpsalt oma töölaua tekstiredaktorisse kirjutada. Paljud toetavad isegi HTML-i, CSS-i ja Javascripti. Aga, integreeritud arenduskeskkonnad sisaldavad muid tööriistu, mis muudavad koodi kirjutamise ja korrektuuri lugemise lihtsaks.

Bootstrapi arenduskeskkonna loomine

Minu maitse jaoks on parim integreeritud arenduskeskkond Visual Studio Code. Kuid paljudele Linuxi kasutajatele see ei meeldi, sest see saadab Microsoftile telemeetria. Sellegipoolest On olemas alternatiiv, mis kasutab VSCode'i lähtekoodi nimega VSCodium, mis ei jaga andmeid kellegagi. See on versioon mida me nüüdsest kasutame.

VSCodiumi installimine

VSCodiumi saame installida järgmistel viisidel:

Snap Store

sudo snap install codium --classic

tasane pakk

flatpak install flathub com.vscodium.codium

Debian ja derivaadid

Saime kinnitusvõtmed

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
Lisame hoidla
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
Uuendame ja installime
sudo apt update
sudo apt install codium

Fedora / RHEL / CentOS / Rocky Linux / OpenSUSE

Saame kinnitusvõtmed

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

Lisame hoidlad

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

Paigaldamiseks teeme:

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

OpenSUSE / SUSE: sudo zypper in codium

Arch Linux

Saame kasutada üht neist kahest käsust

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

Papagoi OS

sudo apt update
sudo apt install codium

Nix (OS)

nix-env -iA nixpkgs.vscodium

VSCodiumi seadistamine

Olenevalt installirežiimist võib VSCodium olla inglise keeles. Saame seda kergesti muuta.

1. Klõpsake menüüs Failid nuppu Eelistused.
2. Kliki Laiendamine.
3. me kirjutada hispaania otsingumootoris.
4. Klõpsake laiendil Hispaania keel.
5. Alustame installimist, klõpsates nuppu Paigaldada.
6. Kliki Muutke keelt ja taaskäivitage.

VSCode'il on tohutult laiendusi, mis hõlbustavad programmeerimist erinevates keeltes ja me saame neid kasutada ka VSCodiumis. Installime vajaliku:

1. Kliki Eelistused
2. Kliki Laiendused.
3. me kirjutada Bootstrap otsingumootoris.
4. Valime selle, mis ütleb Bootstrap 5 ja fondi suurepärased väljavõtted.
5. Klõpsake installi

Selle laienduse kasutamist näeme siis, kui hakkame saidi koodi kirjutama. Kuid ma pean täpsustuse tegema. Selle toimimiseks peate sisestama käsud. Sel juhul kopeerimine ja kleepimine ei tööta.

Bootstrapi hankimine

Bootstrap on põhimõtteliselt komponentide kogum. Kui kirjutame Bootstrapil põhineva veebisaidi koodi esimese asjana peame brauserile ütlema, kust need leida.

Bootstrapi hankimiseks on kaks alternatiivi. Esimene on selle allalaadimine saidilt veebisait ja lisage see projektifailidesse ja teine ​​​​on panna link projekti enda serveritele. Selle saab alla laadida ka mõne paketihalduri abil (pean silmas neid, mida kasutavad erinevad programmeerimiskeeled, mitte neid, mida distributsioonid kasutavad), kuid jätame selle dokumentatsiooni hooleks.

Pange tähele seda kui eelistate töötada Bootstrapi failidega kohapeal, peate need serverisse üles laadima ülejäänud veebisaidiga. Kui lingite projekti CDN-serveriga, pole see vajalik.

Kui laadite alla paketi Bootstrap, näete, et seal on kaks kausta ja rida faile. Oleme huvitatud ainult kahest. JS kaustast bootstrap.bundle.js ja CSS-i kaustast bootstrap.css.

Mõlema valiku kood on peaaegu sama. Lihtsalt muutke asukoha teed.

Vaatame näidet
Bootstrapi kasutamine kohapeal

Kasutamine projektist CDN

Kohaliku faili asukoht on suvaline. Panin need kausta nimega bootrap ja lõin kaks alamkausta nimega JS ja CSS.

Ärge muretsege, kui te ülejäänud koodist aru ei saanud. Selle eest hoolitseme järgmises artiklis.

Pange tähele

Pärast artikli avaldamist avastasin, et meie sisuhaldur ei näita mitte HTML-koodi, vaid tulemust. Laen näited Githubisse vms ja panen siia ekraanipildid.