創建引導開發環境

在這篇文章中 我們將從創建一個 Bootstrap 開發環境開始。 正如我們在上一篇文章中所解釋的，Bootstrap 是一個框架，它使我們可以輕鬆創建自動適應任何屏幕尺寸的網站。

實際上，不需要特殊工具。 您可以輕鬆地在桌面上的文本編輯器中編寫代碼。 許多甚至支持 HTML、CSS 和 Javascript。 但， 集成開發環境包括其他工具，可讓您輕鬆編寫和校對代碼。

創建引導開發環境

在我看來，最好的集成開發環境是 Visual Studio Code。 但是，許多 Linux 用戶不喜歡它，因為它會將遙測數據發送給 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 tee /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 Linux

我們可以使用這兩個命令中的任何一個

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

鸚鵡操作系統

sudo apt update
sudo apt install codium

尼克斯（操作系統）

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 文件，則需要將它們上傳到服務器 與網站的其餘部分。 如果您鏈接到項目的 CDN 服務器，則沒有必要。

如果你下載 Bootstrap 包，你會看到有兩個文件夾和一系列文件。 我們只對兩個感興趣。 從 JS 文件夾 bootstrap.bundle.js 並從 CSS 文件夾中 引導程序.css。

這兩個選項的代碼幾乎相同。 只需更改位置路徑。

讓我們看一個例子
在本地使用 Bootstrap

從項目 CDN 使用

本地文件的位置是任意的。 我將它們放在一個名為 bootrap 的文件夾中，並創建了兩個名為 JS 和 CSS 的子文件夾。

如果您不理解其餘代碼，請不要擔心。 我們會在下一篇文章中解決這個問題。

注意

發表文章後，我發現我們的內容管理器不顯示 HTML 代碼，而是顯示結果。 我會將示例上傳到 Github 或類似網站，並將屏幕截圖放在這裡。