การสร้างสภาพแวดล้อมการพัฒนา Bootstrap

ในบทความนี้ เราจะเริ่มต้นด้วยการสร้างสภาพแวดล้อมการพัฒนา Bootstrap ดังที่เราได้อธิบายไว้ในบทความก่อนหน้านี้ Bootstrap เป็นเฟรมเวิร์กที่ทำให้เราสร้างไซต์ที่ปรับให้เข้ากับขนาดหน้าจอโดยอัตโนมัติได้อย่างง่ายดาย

ที่จริงแล้ว ไม่จำเป็นต้องใช้เครื่องมือพิเศษใดๆ คุณสามารถเขียนโค้ดในโปรแกรมแก้ไขข้อความบนเดสก์ท็อปของคุณได้อย่างง่ายดาย หลายคนยังรองรับ HTML, CSS และ Javascript แต่, สภาพแวดล้อมการพัฒนาแบบบูรณาการรวมถึงเครื่องมืออื่นๆ ที่ช่วยให้คุณเขียนและตรวจทานโค้ดได้ง่าย

การสร้างสภาพแวดล้อมการพัฒนา Bootstrap

สำหรับรสนิยมของฉัน สภาพแวดล้อมการพัฒนาแบบบูรณาการที่ดีที่สุดคือ Visual Studio Code แต่ผู้ใช้ลีนุกซ์หลายคนไม่ชอบเพราะมันส่ง telemetry ไปยัง Microsoft แต่ถึงอย่างไร, มีทางเลือกอื่นที่ใช้ซอร์สโค้ด VSCode ที่เรียกว่า VSCodium ซึ่งไม่เปิดเผยข้อมูลกับใครเลย นั่นคือ เวอร์ชัน ที่เราจะใช้ต่อจากนี้ไป

การติดตั้ง VSCodium

เราสามารถติดตั้ง VSCodium ได้ด้วยวิธีต่อไปนี้:

สแน็ปสโตร์

sudo snap install codium --classic

กระเป๋าแบน

flatpak install flathub com.vscodium.codium

Debian และอนุพันธ์

เราได้รับคีย์การตรวจสอบแล้ว

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
เราเพิ่มที่เก็บ
echo 'deb [ ลงชื่อโดย=/usr/share/keyrings/vscodium-archive-keyring.gpg ] https://download.vscodium.com/debs vscodium main' \
| sudo ที /etc/apt/sources.list.d/vscodium.list
เราอัปเดตและติดตั้ง
sudo apt update
sudo apt install codium

Fedora / RHEL / CentOS / Rocky Linux / OpenSUSE

เราได้รับคีย์การตรวจสอบ

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

เราเพิ่มที่เก็บ

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

ในการติดตั้งเราทำ:

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

OpenSUSE / SUSE: sudo zypper in codium

Arch ลินุกซ์

เราสามารถใช้หนึ่งในสองคำสั่งนี้

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

OS Parrot

sudo apt update
sudo apt install codium

ห้าม(OS)

nix-env -iA nixpkgs.vscodium

การกำหนดค่า VSCodium

ขึ้นอยู่กับโหมดการติดตั้ง VSCodium อาจเป็นภาษาอังกฤษ เราสามารถเปลี่ยนแปลงสิ่งนี้ได้อย่างง่ายดาย

1. ในเมนูไฟล์ให้คลิกที่ การตั้งค่า
2. คลิกที่ นามสกุล.
3. เราเขียน สเปน ในเครื่องมือค้นหา
4. คลิกที่นามสกุล ภาษาสเปน.
5. เราเริ่มการติดตั้งโดยคลิกที่ ติดตั้ง
6. คลิกที่ เปลี่ยนภาษาและเริ่มต้นใหม่

VSCode มีส่วนขยายจำนวนมากที่ช่วยอำนวยความสะดวกในการเขียนโปรแกรมในภาษาต่างๆ และเราสามารถใช้ส่วนขยายเหล่านี้ใน VSCodium ได้ มาติดตั้งอันที่เราต้องการกันเถอะ:

1. คลิกที่ การตั้งค่า
2. คลิกที่ ส่วนขยาย
3. เราเขียน บูต ในเครื่องมือค้นหา
4. เราเลือกอันที่เขียนว่า Bootstrap 5 & Font Awesome Snippets.
5. คลิกติดตั้ง

เราจะเห็นการใช้ส่วนขยายนี้เมื่อเราเริ่มเขียนโค้ดของไซต์ แต่ฉันต้องชี้แจง เพื่อให้ใช้งานได้คุณจะต้องพิมพ์คำสั่ง คัดลอกและวางในกรณีนี้ไม่ทำงาน

รับ Bootstrap

Bootstrap นั้นเป็นชุดของส่วนประกอบ เมื่อเราเขียนโค้ดของเว็บไซต์โดยใช้ Bootstrap สิ่งแรกที่เราต้องทำคือบอกเบราว์เซอร์ที่จะหาพวกเขา

ในการรับ Bootstrap มีสองทางเลือก ขั้นแรกให้ดาวน์โหลดจาก เว็บไซต์ และเพิ่มลงในไฟล์โปรเจ็กต์ อันที่สองคือการใส่ลิงค์ไปยังเซิร์ฟเวอร์ของโปรเจ็กต์เอง. นอกจากนี้ยังสามารถดาวน์โหลดได้โดยใช้ตัวจัดการแพ็คเกจบางตัว (ฉันหมายถึงตัวจัดการที่ใช้โดยภาษาโปรแกรมต่าง ๆ ไม่ใช่ที่ใช้โดยการแจกแจง) แต่เราจะปล่อยให้มันอยู่ในเอกสารประกอบ

พึงระลึกไว้เสมอว่า หากคุณต้องการทำงานกับไฟล์ Bootstrap ในเครื่อง คุณจะต้องอัปโหลดไปยังเซิร์ฟเวอร์ กับส่วนที่เหลือของเว็บไซต์ หากคุณลิงก์ไปยังเซิร์ฟเวอร์ CDN ของโปรเจ็กต์ ก็ไม่จำเป็น

หากคุณดาวน์โหลดแพ็คเกจ Bootstrap คุณจะเห็นว่ามีสองโฟลเดอร์และชุดของไฟล์ เราสนใจแค่สองอย่าง จากโฟลเดอร์ JS bootstrap.bundle.js และจากโฟลเดอร์ CSS bootstrap.css

รหัสสำหรับทั้งสองตัวเลือกเกือบจะเหมือนกัน เพียงแค่เปลี่ยนเส้นทางตำแหน่ง

มาดูตัวอย่างกัน
ใช้ Bootstrap ในเครื่อง

ใช้จากโครงการ CDN

ตำแหน่งของไฟล์ในเครื่องนั้นกำหนดได้เอง ฉันใส่ไว้ในโฟลเดอร์ชื่อ bootrap และสร้างโฟลเดอร์ย่อยสองโฟลเดอร์ชื่อ JS และ CSS

อย่ากังวลหากคุณไม่เข้าใจรหัสที่เหลือ เราจะดูแลในบทความถัดไป

หมายเหตุ

หลังจากเผยแพร่บทความ ฉันพบว่าระบบจัดการเนื้อหาของเราไม่แสดงโค้ด HTML แต่แสดงผลลัพธ์ ฉันจะอัปโหลดตัวอย่างไปที่ Github หรือคล้ายกัน และฉันจะใส่ภาพหน้าจอที่นี่