Tạo môi trường phát triển Bootstrap

Trong bài viết này Chúng ta sẽ bắt đầu bằng cách tạo một môi trường phát triển Bootstrap. Như chúng tôi đã giải thích trong một bài viết trước, Bootstrap là một khuôn khổ giúp chúng tôi dễ dàng tạo các trang web tự động thích ứng với bất kỳ kích thước màn hình nào.

Trên thực tế, không có công cụ đặc biệt nào là cần thiết. Bạn có thể dễ dàng viết mã trong trình soạn thảo văn bản trên máy tính để bàn của mình. Nhiều ứng dụng thậm chí còn hỗ trợ HTML, CSS và Javascript. Nhưng mà, môi trường phát triển tích hợp bao gồm các công cụ khác giúp bạn dễ dàng viết và hiệu đính mã.

Tạo môi trường phát triển Bootstrap

Đối với sở thích của tôi, môi trường phát triển tích hợp tốt nhất là Visual Studio Code. Tuy nhiên, nhiều người dùng Linux không thích nó vì nó gửi phép đo từ xa cho Microsoft. Tuy nhiên, Có một giải pháp thay thế sử dụng mã nguồn VSCode được gọi là VSCodium không chia sẻ dữ liệu với bất kỳ ai. Đó là phiên bản mà chúng tôi sẽ sử dụng từ bây giờ.

Cài đặt VSCodium

Chúng ta có thể cài đặt VSCodium theo những cách sau:

Cửa hàng Snap

sudo snap install codium --classic

gói phẳng

flatpak install flathub com.vscodium.codium

Debian và các dẫn xuất

Chúng tôi đã nhận được các khóa xác minh

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
Chúng tôi thêm kho lưu trữ
echo 'deb [sign-by = / usr / share / keyrings / vscodium-archive-keyring.gpg] https://download.vscodium.com/debs vscodium main' \
| sudo tee /etc/apt/sources.list.d/vscodium.list
Chúng tôi cập nhật và cài đặt
sudo apt update
sudo apt install codium

Fedora / RHEL / CentOS / Rocky Linux / OpenSUSE

Chúng tôi nhận được các khóa xác minh

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

Chúng tôi thêm các kho lưu trữ

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

Để cài đặt chúng tôi thực hiện:

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

OpenSUSE / SUSE: sudo zypper in codium

Arch Linux

Chúng ta có thể sử dụng một trong hai lệnh này

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

Hệ điều hành vẹt

sudo apt update
sudo apt install codium

Nix (Hệ điều hành)

nix-env -iA nixpkgs.vscodium

Cấu hình VSCodium

Tùy thuộc vào chế độ cài đặt, VSCodium có thể bằng tiếng Anh. Chúng ta có thể dễ dàng thay đổi điều này.

1. Trong menu Tệp, bấm vào Sở thích.
2. Bấm vào Extension.
3. Chúng tôi viết người Tây Ban Nha trong công cụ tìm kiếm.
4. Nhấp vào phần mở rộng Tiếng Tây Ban Nha.
5. Chúng tôi bắt đầu cài đặt bằng cách nhấp vào Cài đặt.
6. Bấm vào Thay đổi ngôn ngữ và khởi động lại.

VSCode có một bộ sưu tập khổng lồ các phần mở rộng hỗ trợ lập trình bằng các ngôn ngữ khác nhau và chúng ta cũng có thể sử dụng chúng trong VSCodium. Hãy cài đặt cái chúng ta cần:

1. Bấm vào Sở thích.
2. Bấm vào Các phần mở rộng.
3. Chúng tôi viết bootstrap trong công cụ tìm kiếm.
4. Chúng tôi chọn cái có nội dung Bootstrap 5 & Font Awesome Snippets.
5. Bấm vào cài đặt

Chúng tôi sẽ thấy việc sử dụng tiện ích mở rộng này khi chúng tôi bắt đầu viết mã trang web. Nhưng, tôi phải làm rõ. Để nó hoạt động, bạn sẽ phải nhập các lệnh. Sao chép và dán trong trường hợp này không hoạt động.

Bắt Bootstrap

Bootstrap về cơ bản là một tập hợp các thành phần. Khi chúng tôi viết mã của một trang web dựa trên Bootstrap điều đầu tiên chúng ta cần làm là cho trình duyệt biết nơi tìm chúng.

Để tải Bootstrap, có hai lựa chọn thay thế. Đầu tiên là tải xuống từ website và thêm nó vào các tệp dự án và thứ hai là đặt một liên kết đến các máy chủ của chính dự án. Nó cũng có thể được tải xuống bằng cách sử dụng một số trình quản lý gói (ý tôi là những người được sử dụng bởi các ngôn ngữ lập trình khác nhau, không phải những ngôn ngữ được sử dụng bởi các bản phân phối) nhưng, chúng tôi sẽ để điều đó cho tài liệu.

Xin lưu ý rằng nếu bạn muốn làm việc với các tệp Bootstrap cục bộ, bạn sẽ cần tải chúng lên máy chủ với phần còn lại của trang web. Nếu bạn liên kết đến máy chủ CDN của dự án, nó sẽ không cần thiết.

Nếu bạn tải xuống gói Bootstrap, bạn sẽ thấy có hai thư mục và một loạt tệp. Chúng tôi chỉ quan tâm đến hai. Từ thư mục JS bootstrap.bundle.js và từ thư mục CSS bootstrap.css.

Mã cho cả hai tùy chọn gần như giống nhau. Chỉ cần thay đổi đường dẫn vị trí.

Hãy xem một ví dụ
Sử dụng Bootstrap cục bộ

Sử dụng từ dự án CDN

Vị trí của tệp cục bộ là tùy ý. Tôi đặt chúng bên trong một thư mục có tên là bootrap và tạo hai thư mục con có tên là JS và CSS.

Đừng lo lắng nếu bạn không hiểu phần còn lại của mã. Chúng tôi sẽ giải quyết vấn đề đó trong bài viết tiếp theo.

Ghi

Sau khi xuất bản bài viết, tôi phát hiện ra rằng trình quản lý nội dung của chúng tôi không hiển thị mã HTML mà là kết quả. Tôi sẽ tải các ví dụ lên Github hoặc tương tự và tôi sẽ đặt ảnh chụp màn hình ở đây.