创建引导开发环境

在这篇文章中 我们将从创建一个 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 或类似网站，并将屏幕截图放在这里。