この投稿では、Bootstrap サイトのレイアウトについて説明します このオープンソース フレームワークの驚くべき機能を紹介します。 の 以前の記事 作業を容易にするために、開発環境と必要なプラグインをインストールしました。
のコンテンツ管理者として、次のことを覚えておいてください。 Linux Adictos GitHub にアップロードしたサンプルのコードを挿入することはできません。これらをダウンロードするには、ディストリビューションに Git パッケージをインストールし、次のコマンドを記述する必要があります。
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
これら XNUMX つのコマンドを定期的に実行して、新しいファイルをダウンロードする必要があります。
コードの分析
ファイル エクスプローラーで、VSCodium を使用して example2.html を開きます。 (右ボタンで開く) 次のように表示されます。
- 1 行目では、ブラウザーにドキュメントのタイプを伝え、レンダリング方法を認識できるようにします。
- 行 2 は、サイトの言語を示します。これは、特定の文字をどのように表現するかをブラウザに示し、検索エンジンに、ポジショニングを容易にするコンテンツの言語を示します。 私たちのコードでは es として定義されていますが、スペインのスペイン語の場合は es_ES、アルゼンチンのスペイン語の場合は es_AR などの地域的なバリエーションがあります。
- 3 行目から、タグの間にメタデータ コンテナーが配置されます。 よ. メタデータは、ドキュメントに関する情報を提供します。 この例では:
- 行 4 は、文字エンコーディングに使用される標準を示します。 アクセント付きの文字や特殊記号の代わりに、ひし形の中にクエスチョン マークが表示されているのを見たことがあるかもしれません。 これは、ブラウザが不適切なエンコーディングを使用しているためです。 8行目のステートメントは、明示的に宣言することでこれを回避しています。
- 5 行目では、さまざまな画面フォーマットにどのように適応するかをブラウザーに指示します。
- 6 行目で設定したタイトルは、ブラウザのトップバーと検索エンジンに表示されます。
- 7 行目で、スタイリングに関連する Bootstrap フレームワーク要素の場所をブラウザに伝えます。
- 10行目からコンテナが始まります。 本文には、Web ページのコンテンツと、サイトに双方向性を与える Bootstrap スクリプトへのリンクが含まれます。
- 行 13 は、ドキュメントの終わりを示します。
Bootstrap サイトのレイアウト
Bootstrap サイトのレイアウトに関する重要な概念
以前の記事で述べたように、 Bootstrap は、モバイル ファーストのアプローチを採用しています。 このアプローチを適用すると、最小の画面サイズを念頭に置いてデバイスを設計し、その後のサイズに合わせてレイヤーを追加します。
ここでは、次の XNUMX つの重要な概念を考慮する必要があります。
- ブレークポイント。
- メディア相談。
ブレークポイントは、レイアウトが変更された画面幅を示します。、メディア クエリは、特定のブラウザーとオペレーティング システムの特性に基づいてスタイル パラメーターを適用します。 つまり、各ブレークポイントには対応するスタイルがあります。
Bootstrap には、より高度なプログラマーが変更できる XNUMX つの事前定義されたブレークポイントが付属しています。 デフォルトのポイントは次のとおりです。
- 極小: プリセット識別子がなく、幅 576 ピクセル未満の画面に適用されます。
- 小: sm で識別され、576 ピクセル以上の画面に使用されます。
- 中: md で識別され、768 ピクセル以上の画面に使用されます。
- 長さ: lg は 992 ピクセル以上の画面に使用されるため識別されます。
- エクストラロング: 識別子 lg を持ち、スタイルを 1200 ピクセル以上の画面に適用します。
- エクストラ エクストラ ロング: 識別子 xxl でマークされ、1400 ピクセル以上の画面にデザインを適用するために使用されます。
これらのサイズは、何気なく選んだわけではありません。 各ブレークポイントには、幅が 12 の倍数のコンテナーを含めることができます。 また、特定のデバイスをターゲットにするのではなく、さまざまなカテゴリのデバイスと画面サイズに適応します。
さまざまな画面サイズの中でコンテナを見つけます。 これらは、特定のデバイスまたはグラフィックウィンドウでサイトのコンテンツをホスト、入力、および配置する責任があります.
;