Mencipta Persekitaran Pembangunan Bootstrap

Dalam artikel ini Kami akan mulakan dengan mencipta persekitaran pembangunan Bootstrap. Seperti yang kami jelaskan dalam artikel sebelum ini, Bootstrap ialah rangka kerja yang memudahkan kami membuat tapak yang menyesuaikan diri secara automatik kepada mana-mana saiz skrin.

Sebenarnya, tiada alat khas diperlukan. Anda boleh dengan mudah menulis kod dalam editor teks pada desktop anda. Malah ramai yang mempunyai sokongan untuk HTML, CSS dan Javascript. Tetapi, persekitaran pembangunan bersepadu termasuk alat lain yang memudahkan anda menulis dan membaca pruf kod.

Mencipta Persekitaran Pembangunan Bootstrap

Untuk citarasa saya, persekitaran pembangunan bersepadu yang terbaik ialah Visual Studio Code. Tetapi, ramai pengguna Linux tidak menyukainya kerana ia menghantar telemetri kepada Microsoft. Namun begitu, Terdapat alternatif yang menggunakan kod sumber VSCode yang dipanggil VSCodium yang tidak berkongsi data dengan sesiapa pun. Itu dia versi yang akan kami gunakan mulai sekarang.

Memasang VSCodium

Kami boleh memasang VSCodium dengan cara berikut:

Kedai Snap

sudo snap install codium --classic

beg rata

flatpak install flathub com.vscodium.codium

Debian dan derivatif

Kami mendapat kunci pengesahan

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
Kami menambah repositori
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
Kami mengemas kini dan memasang
sudo apt update
sudo apt install codium

Fedora / RHEL / CentOS / Rocky Linux / OpenSUSE

Kami mendapat kunci pengesahan

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

Kami menambah repositori

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

Untuk memasang kami lakukan:

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

OpenSUSE / SUSE: sudo zypper in codium

Arch Linux

Kita boleh menggunakan salah satu daripada dua arahan ini

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

OS Parrot

sudo apt update
sudo apt install codium

Nix(OS)

nix-env -iA nixpkgs.vscodium

Mengkonfigurasi VSCodium

Bergantung pada mod pemasangan, VSCodium mungkin dalam bahasa Inggeris. Kita boleh mengubahnya dengan mudah.

1. Dalam menu Fail klik pada Keutamaan.
2. Klik pada Lanjutan.
3. kami menulis spanish di enjin carian.
4. Klik pada sambungan Bahasa Sepanyol.
5. Kami memulakan pemasangan dengan mengklik pada Pasang.
6. Klik pada Tukar Bahasa dan mulakan semula.

VSCode mempunyai banyak koleksi sambungan yang memudahkan pengaturcaraan dalam bahasa yang berbeza, dan kami juga boleh menggunakannya dalam VSCodium. Mari pasang yang kita perlukan:

1. Klik pada Keutamaan.
2. Klik pada Sambungan.
3. kami menulis Bootstrap di enjin carian.
4. Kami pilih yang mengatakan Bootstrap 5 & Fon Coretan Hebat.
5. Klik pada pasang

Kami akan melihat penggunaan sambungan ini apabila kami mula menulis kod tapak. Tetapi, saya perlu membuat penjelasan. Untuk berfungsi, anda perlu menaip arahan. Salin dan tampal dalam kes ini tidak berfungsi.

Mendapatkan Bootstrap

Bootstrap pada asasnya ialah koleksi komponen. Apabila kita menulis kod tapak web berdasarkan Bootstrap perkara pertama yang perlu kita lakukan ialah memberitahu pelayar di mana untuk mencarinya.

Untuk mendapatkan Bootstrap terdapat dua alternatif. Yang pertama ialah memuat turunnya dari laman web dan tambahkannya pada fail projek dan yang kedua ialah meletakkan pautan ke pelayan projek itu sendiri. Ia juga boleh dimuat turun menggunakan beberapa pengurus pakej (maksud saya yang digunakan oleh bahasa pengaturcaraan yang berbeza, bukan yang digunakan oleh pengedaran) tetapi, kami akan menyerahkannya kepada dokumentasi.

Harap maklum bahawa jika anda lebih suka bekerja dengan fail Bootstrap secara setempat, anda perlu memuat naiknya ke pelayan dengan seluruh laman web. Jika anda memaut ke pelayan CDN projek, ia tidak diperlukan.

Jika anda memuat turun pakej Bootstrap anda akan melihat bahawa terdapat dua folder dan satu siri fail. Kami hanya berminat pada dua. Dari folder JS bootstrap.bundle.js dan dari folder CSS bootstrap.css.

Kod untuk kedua-dua pilihan adalah hampir sama. Cuma tukar laluan lokasi.

Mari kita lihat contoh
Menggunakan Bootstrap secara setempat

Menggunakan daripada projek CDN

Lokasi fail tempatan adalah sewenang-wenangnya. Saya meletakkannya di dalam folder yang dipanggil bootrap dan mencipta dua subfolder yang dipanggil JS dan CSS.

Jangan risau jika anda tidak memahami kod yang lain. Kami mengurusnya dalam artikel seterusnya.

Nota

Selepas menerbitkan artikel saya mendapati bahawa pengurus kandungan kami tidak menunjukkan kod HTML tetapi hasilnya. Saya akan memuat naik contoh ke Github atau yang serupa dan saya akan meletakkan tangkapan skrin di sini.