この投稿では、Bootstrap を使用してサイトを作成することから始めます。は、応答性を高め、ある程度のインタラクティブ性を提供することを容易にするオープン ソース フレームワークです。 これは、以前に推奨した開発環境プラグインによって自動的に生成された基本的なテンプレートであり、変更する必要があります。
で 前の記事 VS Codium のインストール、ユーザー インターフェイスのスペイン語への翻訳、Bootstrap プラグインのインストールの手順が記載されています。
覚えておくべきXNUMXつのこと：
- 使用するコマンドはキーボード ショートカットなので、入力する必要があります。 コピー/貼り付けが機能しません。
- コンテンツ マネージャーでは HTML コードを表示できないため、スクリーンショットを使用する必要があります。 私がアップロードした例のコードにアクセスできるように GitHubに。
GitHub リポジトリのクローンを作成する方法
偉人を私たちと区別するのは、彼らが問題に反応する方法です。 Richard Stallman は自分のプリンタ ドライバが気に入らず、変更を許可されなかったため、フリー ソフトウェア運動を開始しました。 Linus Torvalds は、どのコード共有プラットフォームにも納得できず、独自のプラットフォームを作成しました。 ギット。
ユーザーの操作がダウンロードのみである従来のソフトウェア配布システムとは異なり、 Git を使用すると、時間の経過に伴うプロジェクトの進化をたどることができます。 他の人は、リポジトリを複製し、変更を加えて、元のプロジェクトの開発者にそれらを組み込むことを提案できます。 承認された場合、開発者はファイルをダウンロードして再アップロードすることなく、簡単に行うことができます。
Git ベースのサービスはいくつかありますが、私は GitHub を選びました VS Codium と統合されているからです。
サンプル ファイルをコンピューターにダウンロードするには、ターミナルにパッケージをインストールするためのディストリビューションの指示に従って、git パッケージをインストールするだけです。
次に、次のコマンドを入力します。
ファイルを Documents フォルダーに保存することを好むので、ディレクトリを次のように変更します
cd Documentos
次に、ファイルを次のように複製します。
git clone https://github.com/dggonzalez1971/bootstrap.git
残りの各記事でこれらの手順を思い出してください。このようにして、アップロードされたサンプル ファイルを更新することになるからです。
ファイルを表示するには、ファイル エクスプローラーを開いてフォルダーを探します。 ブートストラップ。
Bootstrapでサイトを作る
コードを手動で入力する場合は、サイトを保存するフォルダーを作成することから始めます。 好きな名前を付けて構いません。
次に、次の手順に従います。
- メニューに行きましょう アーカイブ。
- クリック 新しいテキスト ファイル.
- クリック 保存します。
- 作成したフォルダーを探し、ファイルの名前を入力します example1.html。
- クリック 保存します。
ファイル エクスプローラー ウィンドウが VSCodium によって非表示になることがあります。
拡張機能に基本的なテンプレートを作成してもらいましょう。 このために、次のように入力します !b5-$
これにより、example1.html としてサンプル フォルダーにあるコードが生成されます。
次のように表示されます。
これは、Bootstrap 拡張機能によって生成されたコードです。
このファイルにいくつかの変更を加えます。 変更は example2.html という名前で見つかります。
- 2 行目で、eng を es に置き換えて言語を変更します。 これは、サイトの言語がスペイン語であることを検索エンジンに示します。
- 6 行目では、ラベルの下にあるテキストを変更します タイトル。 入れます 私の最初の Bootstrap サイト。
- 12 行目で、タグ間のコンテンツを変更します h1 によって Bootstrapで作ったサイトです。
次に、いくつかの重要な変更を行います。 これらの変更は、次のものと関係があります。
- プラグインの開発者は Bootstrap のバージョンについていくことができず、より新しいバージョンがあります。
- ブートストラップ コンポーネントには多くのオプションがあり、別のオプションに興味があります。
- 公式ドキュメントによると、Javascript ライブラリへの呼び出しは body タグ内にある必要があります。
例 2 では、7 行目の内容を変更し、8 行目と 9 行目を削除し、残りの内容をアップロードして番号付けの互換性を維持しました。 次に、10 行目の終わりをクリックして新しい 11 行目を作成し、Javascript ライブラリへのリンクを配置します。
コードがわからなくても心配しないでください。 次の記事で各行の機能について説明します。