ブートストラップ開発環境の作成

この記事では まず、Bootstrap 開発環境を作成します。 以前の記事で説明したように、Bootstrap は、任意の画面サイズに自動的に適応するサイトを簡単に作成できるようにするフレームワークです。

実際、特別なツールは必要ありません。 デスクトップのテキスト エディターでコードを簡単に記述できます。 多くは、HTML、CSS、および Javascript をサポートしています。 しかし、 統合開発環境には、コードの記述と校正を容易にする他のツールが含まれています。

ブートストラップ開発環境の作成

私の好みでは、最適な統合開発環境は Visual Studio Code です。 しかし、テレメトリが Microsoft に送信されるため、多くの Linux ユーザーは気に入りません。 それにもかかわらず、 誰ともデータを共有しない VSCodium と呼ばれる VSCode ソース コードを使用する代替手段があります。 あれは バージョン これから使用します。

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 [ signed-by=/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

アーチのLinux

これらXNUMXつのコマンドのいずれかを使用できます

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

オウムOS

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 スニペット。
5. インストールをクリック

サイト コードの記述を開始するときに、この拡張機能の使用を確認します。 しかし、私は明確にする必要があります。 機能させるには、コマンドを入力する必要があります。 この場合、コピー アンド ペーストは機能しません。

ブートストラップの取得

Bootstrap は基本的にコンポーネントの集まりです。 Bootstrapに基づいてウェブサイトのコードを書くとき 最初に行う必要があるのは、ブラウザにそれらを見つける場所を伝えることです。

Bootstrap を取得するには、XNUMX つの方法があります。 XNUMXつ目は、からダウンロードすることです。 ウェブサイト それをプロジェクトファイルに追加し、XNUMXつ目はプロジェクト自体のサーバーへのリンクを配置することです. 一部のパッケージ マネージャー (ディストリビューションで使用されるものではなく、異なるプログラミング言語で使用されるもの) を使用してダウンロードすることもできますが、それについてはドキュメントに任せます。

覚えておいてください Bootstrap ファイルをローカルで使用する場合は、サーバーにアップロードする必要があります。 ウェブサイトの残りの部分と一緒に。 プロジェクトの CDN サーバーにリンクする場合は、必要ありません。

Bootstrap パッケージをダウンロードすると、XNUMX つのフォルダーと一連のファイルがあることがわかります。 興味があるのは XNUMX つだけです。 JSフォルダから ブートストラップ.バンドル.js そしてCSSフォルダから ブートストラップ.css。

両方のオプションのコードはほとんど同じです。 ロケーションパスを変更するだけです。

例を見てみましょう
Bootstrap をローカルで使用する

プロジェクト CDN からの使用

ローカル ファイルの場所は任意です。 これらを bootrap というフォルダーに入れ、JS と CSS という XNUMX つのサブフォルダーを作成しました。

コードの残りの部分を理解できなくても心配しないでください。 これについては、次の記事で扱います。

注意

記事を公開した後、コンテンツ マネージャーが HTML コードではなく結果を表示することを発見しました。 例を Github などにアップロードし、スクリーンショットをここに置きます。