Membuat lingkungan pengembangan Bootstrap

Di artikel ini Kita akan mulai dengan membuat lingkungan pengembangan Bootstrap. Seperti yang sudah kami jelaskan di artikel sebelumnya, Bootstrap adalah framework yang memudahkan kita untuk membuat situs yang otomatis beradaptasi dengan ukuran layar apapun.

Sebenarnya tidak diperlukan alat khusus. Anda dapat dengan mudah menulis kode di editor teks di desktop Anda. Banyak yang bahkan memiliki dukungan untuk HTML, CSS, dan Javascript. Tetapi, lingkungan pengembangan terintegrasi mencakup alat lain yang memudahkan Anda untuk menulis dan mengoreksi kode.

Membuat lingkungan pengembangan Bootstrap

Menurut selera saya, lingkungan pengembangan terintegrasi terbaik adalah Visual Studio Code. Namun, banyak pengguna Linux yang tidak menyukainya karena mengirimkan telemetri ke Microsoft. Namun demikian, Ada alternatif yang menggunakan kode sumber VSCode yang disebut VSCodium yang tidak berbagi data dengan siapa pun. Itu adalah versi yang akan kita gunakan mulai sekarang.

Menginstal VSCodium

Kita dapat menginstal VSCodium dengan cara berikut:

Snap Store

sudo snap install codium --classic

paket datar

flatpak install flathub com.vscodium.codium

Debian dan derivatif

Kami mendapat kunci verifikasi

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 menambahkan repositori
echo 'deb [ ditandatangani-oleh=/usr/share/keyrings/vscodium-archive-keyring.gpg ] https://download.vscodium.com/debs vscodium main' \
| sudo tee /etc/apt/sources.list.d/vscodium.list
Kami memperbarui dan menginstal
sudo apt update
sudo apt install codium

Fedora / RHEL / CentOS / Rocky Linux / OpenSUSE

Kami mendapatkan kunci verifikasi

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

Kami menambahkan 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 menginstal kita lakukan:

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

OpenSUSE / SUSE: sudo zypper in codium

Arch Linux

Kita dapat menggunakan salah satu dari dua perintah ini

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

OS burung beo

sudo apt update
sudo apt install codium

Nix(OS)

nix-env -iA nixpkgs.vscodium

Mengkonfigurasi VSCodium

Tergantung pada mode instalasi, VSCodium mungkin dalam bahasa Inggris. Kita dapat dengan mudah mengubah ini.

1. Di menu File, klik Preferensi.
2. Klik Perpanjangan.
3. Kami menulis Spanyol di mesin pencari.
4. Klik pada ekstensi Spanyol Bahasa.
5. Kami memulai instalasi dengan mengklik Menginstal.
6. Klik Ubah Bahasa dan mulai ulang.

VSCode memiliki banyak koleksi ekstensi yang memfasilitasi pemrograman dalam berbagai bahasa, dan kami juga dapat menggunakannya di VSCodium. Mari kita instal yang kita butuhkan:

1. Klik Preferensi.
2. Klik Ekstensi.
3. Kami menulis Bootstrap di mesin pencari.
4. Kami memilih salah satu yang mengatakan Bootstrap 5 & Font Cuplikan Luar Biasa.
5. Klik instal

Kita akan melihat penggunaan ekstensi ini ketika kita mulai menulis kode situs. Tapi, saya harus membuat klarifikasi. Agar berfungsi, Anda harus mengetikkan perintah. Salin dan tempel dalam hal ini tidak berfungsi.

Mendapatkan Bootstrap

Bootstrap pada dasarnya adalah kumpulan komponen. Saat kami menulis kode situs web berdasarkan Bootstrap hal pertama yang perlu kita lakukan adalah memberi tahu browser di mana menemukannya.

Untuk mendapatkan Bootstrap ada dua alternatif. Yang pertama adalah mengunduhnya dari situs web dan menambahkannya ke file proyek dan yang kedua adalah meletakkan tautan ke server proyek itu sendiri. Itu juga dapat diunduh menggunakan beberapa manajer paket (maksud saya yang digunakan oleh bahasa pemrograman yang berbeda, bukan yang digunakan oleh distribusi) tetapi, kami akan menyerahkannya pada dokumentasi.

Ingat itu jika Anda lebih suka bekerja dengan file Bootstrap secara lokal, Anda harus mengunggahnya ke server dengan sisa situs web. Jika Anda menautkan ke server CDN proyek, itu tidak akan diperlukan.

Jika Anda mengunduh paket Bootstrap, Anda akan melihat bahwa ada dua folder dan serangkaian file. Kami hanya tertarik pada dua. Dari folder JS bootstrap.bundle.js dan dari folder CSS bootstrap.css.

Kode untuk kedua opsi ini hampir sama. Hanya mengubah jalur lokasi.

Mari kita lihat contohnya
Menggunakan Bootstrap secara lokal

Menggunakan dari proyek CDN

Lokasi file lokal adalah arbitrer. Saya meletakkannya di dalam folder bernama bootrap dan membuat dua subfolder bernama JS dan CSS.

Jangan khawatir jika Anda tidak memahami kode lainnya. Kami akan membahasnya di artikel berikutnya.

catatan

Setelah menerbitkan artikel saya menemukan bahwa pengelola konten kami tidak menampilkan kode HTML tetapi hasilnya. Saya akan mengunggah contoh ke Github atau yang serupa dan saya akan meletakkan tangkapan layar di sini.