Paglikha ng Bootstrap Development Environment

Sa artikulong ito Magsisimula tayo sa pamamagitan ng paglikha ng isang Bootstrap development environment. Gaya ng ipinaliwanag namin sa isang nakaraang artikulo, ang Bootstrap ay isang framework na nagpapadali para sa amin na gumawa ng mga site na awtomatikong umaangkop sa anumang laki ng screen.

Sa totoo lang, walang mga espesyal na tool ang kailangan. Madali mong maisulat ang code sa text editor sa iyong desktop. Marami pa nga ang may suporta para sa HTML, CSS, at Javascript. pero, Kasama sa pinagsama-samang development environment ang iba pang mga tool na nagpapadali para sa iyo na magsulat at mag-proofread ng code.

Paglikha ng Bootstrap Development Environment

Para sa aking panlasa, ang pinakamahusay na pinagsama-samang kapaligiran sa pag-unlad ay Visual Studio Code. Ngunit, maraming mga gumagamit ng Linux ang hindi nagustuhan dahil nagpapadala ito ng telemetry sa Microsoft. gayunpaman, Mayroong alternatibong gumagamit ng VSCode source code na tinatawag na VSCodium na hindi nagbabahagi ng data sa sinuman. Yan ay ang bersyon na gagamitin natin mula ngayon.

Pag-install ng VSCodium

Maaari naming i-install ang VSCodium sa mga sumusunod na paraan:

Tindahan ng Snap

sudo snap install codium --classic

flat pack

flatpak install flathub com.vscodium.codium

Debian at derivatives

Nakuha namin ang mga verification key

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
Nagdagdag kami ng imbakan
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
Ina-update at na-install namin
sudo apt update
sudo apt install codium

Fedora / RHEL / CentOS / Rocky Linux / OpenSUSE

Nakukuha namin ang mga verification key

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

Nagdagdag kami ng mga repositoryo

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

Upang i-install ginagawa namin:

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

OpenSUSE / SUSE: sudo zypper in codium

Arch Linux

Magagamit natin ang alinman sa dalawang utos na ito

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

OS ng loro

sudo apt update
sudo apt install codium

Nix(OS)

nix-env -iA nixpkgs.vscodium

Pag-configure ng VSCodium

Depende sa mode ng pag-install, maaaring nasa English ang VSCodium. Madali nating mababago ito.

1. Sa Files menu mag-click sa Kagustuhan.
2. Mag-click sa Karugtong.
3. Isulat namin Espanyol sa search engine.
4. Mag-click sa extension Espanyol Wika.
5. Sinisimulan namin ang pag-install sa pamamagitan ng pag-click sa Install.
6. Mag-click sa Baguhin ang Wika at i-restart.

Ang VSCode ay may malaking koleksyon ng mga extension na nagpapadali sa pagprograma sa iba't ibang wika, at magagamit din namin ang mga ito sa VSCodium. I-install natin ang kailangan natin:

1. Mag-click sa Kagustuhan.
2. Mag-click sa Mga Extension
3. Isulat namin Bootstrap sa search engine.
4. Pinipili namin ang isa na nagsasabing Bootstrap 5 at Font Awesome Snippet.
5. Mag-click sa pag-install

Makikita natin ang paggamit ng extension na ito kapag sinimulan nating isulat ang code ng site. Pero, kailangan kong gumawa ng paglilinaw. Para gumana ito, kailangan mong i-type ang mga utos. Kopyahin at i-paste sa kasong ito ay hindi gumagana.

Pagkuha ng Bootstrap

Ang Bootstrap ay karaniwang isang koleksyon ng mga bahagi. Kapag isinulat namin ang code ng isang website batay sa Bootstrap ang unang bagay na kailangan nating gawin ay sabihin sa browser kung saan mahahanap ang mga ito.

Upang makakuha ng Bootstrap mayroong dalawang alternatibo. Ang una ay i-download ito mula sa website at idagdag ito sa mga file ng proyekto at ang pangalawa ay maglagay ng link sa mga server ng mismong proyekto. Maaari din itong i-download gamit ang ilang mga manager ng package (Ibig kong sabihin ang mga ginagamit ng iba't ibang mga programming language, hindi ang mga ginagamit ng mga distribusyon) ngunit, iiwan natin iyon sa dokumentasyon.

Mangyaring tandaan na kung mas gusto mong magtrabaho kasama ang mga file ng Bootstrap nang lokal, kakailanganin mong i-upload ang mga ito sa server kasama ang natitirang bahagi ng website. Kung magli-link ka sa CDN server ng proyekto, hindi ito kakailanganin.

Kung nag-download ka ng Bootstrap package makikita mo na mayroong dalawang folder at isang serye ng mga file. Dalawa lang kami interesado. Mula sa folder ng JS bootstrap.bundle.js at mula sa folder ng CSS bootstrap.css.

Ang code para sa parehong mga pagpipilian ay halos pareho. Baguhin lang ang path ng lokasyon.

Tingnan natin ang isang halimbawa
Paggamit ng Bootstrap nang lokal

Gamit mula sa proyektong CDN

Ang lokasyon ng lokal na file ay arbitrary. Inilagay ko ang mga ito sa loob ng isang folder na tinatawag na bootrap at lumikha ng dalawang subfolder na tinatawag na JS at CSS.

Huwag mag-alala kung hindi mo naiintindihan ang natitirang code. Ating asikasuhin iyan sa susunod na artikulo.

Nota

Matapos mailathala ang artikulo, natuklasan ko na hindi ipinapakita ng aming tagapamahala ng nilalaman ang HTML code ngunit ang resulta. I-upload ko ang mga halimbawa sa Github o katulad at maglalagay ako ng mga screenshot dito.